From 21c0f130df99534209a9a21bafeffd8c348e7634 Mon Sep 17 00:00:00 2001 From: WasabiFan Date: Tue, 29 Dec 2015 19:36:37 -0500 Subject: [PATCH 01/11] Add new WIP code for platform selection Uses Bootstrap pills. Includes many TODOs, but mostly functional. Also included test page for platform content. Still need to format selectors on page (including labels and a flyout), implement load/save/defaults, and add nested options. --- _includes/head.html | 1 + docs/tutorials/platform-test-page.md | 37 +++++++++ javascripts/platform-select.js | 118 +++++++++++++++++++++++++++ 3 files changed, 156 insertions(+) create mode 100644 docs/tutorials/platform-test-page.md create mode 100644 javascripts/platform-select.js diff --git a/_includes/head.html b/_includes/head.html index 7682ae3f8..bd65dbfc1 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -27,6 +27,7 @@ + diff --git a/docs/tutorials/platform-test-page.md b/docs/tutorials/platform-test-page.md new file mode 100644 index 000000000..9bc4ed390 --- /dev/null +++ b/docs/tutorials/platform-test-page.md @@ -0,0 +1,37 @@ +--- +title: Platform test page +subject: Website +--- + +This is a test page. + +* {: data-platform-attribute-value="Android"} + 1. This is the first step for Android. + + 2. This is the second step for Android. + +* {: data-platform-attribute-value="Mac OSX"} + + 1. Another step! This one's for Mac. + + 2. ...And another for Mac. + +* {: data-platform-attribute-value="Ubuntu"} + + 1. Even more steps! Now featuring 100% more Ubuntu. + + 2. Steps continued. + +* {: data-platform-attribute-value="Windows"} I give up. Just imagine there are steps here. +{: data-platform-select-list-attribute="client-platform" } + +* {: data-platform-attribute-value="EV3 Brick"} + On the EV3, do a thing in this specific way. + +* {: data-platform-attribute-value="BrickPi"} + The BrickPi is a little different. You actually need to do this other thing. + +* {: data-platform-attribute-value="PiStorms"} + The PiStorms doesn't support this portion of the functionality. + You need to take this into consideration. +{: data-platform-select-list-attribute="ev3dev-hardware-platform" } \ No newline at end of file diff --git a/javascripts/platform-select.js b/javascripts/platform-select.js new file mode 100644 index 000000000..f85de0114 --- /dev/null +++ b/javascripts/platform-select.js @@ -0,0 +1,118 @@ +function supportsHtml5Storage() { + try { + return 'localStorage' in window && window['localStorage'] !== null; + } catch (e) { + return false; + } +} + +function cleanTextForId(text) { + return text.replace(/\W+/g, '-'); +} + +function getFilterByData(dataHash) { + if(arguments.length == 2) { + var newHash = {}; + newHash[arguments[0]] = arguments[1]; + dataHash = newHash; + } + + return function () { + var currentTarget = $(this); + return Object.keys(dataHash).every(function(property) { + return currentTarget.data(property) == dataHash[property]; + }); + } +} + +function switchSelectedPlatformAttribute(platformAttributeName, newAttributeValue) { + // Containers of platform content should have .platform-content-item + // Containers of platform content should have data-platform-attribute-name and data-platform-attribute-value + $('.platform-content-item') + .filter(getFilterByData('platform-attribute-name', platformAttributeName)) + .hide() + .filter(getFilterByData('platform-attribute-value', newAttributeValue)) + .show(); + + $('.platform-attribute-select-group') + .filter(getFilterByData('target-platform-attribute-name', platformAttributeName)) + .children() + .removeClass('active') + .filter(getFilterByData('platform-attribute-value', newAttributeValue)) + .addClass('active'); + + // TODO: Save current option to local storage +} + +function addPlatformNavItem(platformAttributeName, newAttributeValue) { + // Container for pills should have .platform-attribute-select-group and data-target-platform-attribute-name + var $platNav = $('.platform-attribute-select-group') + .filter(getFilterByData('target-platform-attribute-name', platformAttributeName)); + + if ($platNav.length <= 0) { + $platNav = $('