Use config file and IDs instead of raw titles

WasabiFan · Dec 30, 2015 · Dec 30, 2015 · Dec 30, 2015 · Dec 30, 2015 · Dec 30, 2015
commit 7f993d2dfbdbf2cb2f2ab0eaeaff7580b3c7c77b
diff --git a/_config.yml b/_config.yml
@@ -63,6 +63,12 @@ defaults:
       type: "posts"
     values:
       layout: "news"
+  -
+    scope:
+      path: "javascripts"
+      type: "pages"
+    values:
+      layout: "none"
 
 kramdown:
     toc_levels: "2,3"
diff --git a/_data/platform-attributes.json b/_data/platform-attributes.json
@@ -0,0 +1,31 @@
+{
+    "client-platform": {
+        "values": {
+            "android": {
+                "title": "Android"
+            },
+            "osx": {
+                "title": "OS X"
+            },
+            "ubuntu": {
+                "title": "Ubuntu"
+            },
+            "windows": {
+                "title": "Windows"
+            }
+        }
+    },
+    "ev3dev-hardware-platform": {
+        "values": {
+            "ev3": {
+                "title": "EV3 Brick"
+            },
+            "brickpi": {
+                "title": "BrickPi"
+            },
+            "pistorms": {
+                "title": "PiStorms"
+            }
+        }
+    }
+}
diff --git a/_layouts/none.html b/_layouts/none.html
@@ -0,0 +1,5 @@
+---
+
+---
+
+{{ content }}
diff --git a/docs/tutorials/platform-test-page.md b/docs/tutorials/platform-test-page.md
@@ -5,33 +5,33 @@ subject: Website
 
 This is a test page.
 
-*   {: data-platform-attribute-value="Android"}
+*   {: data-platform-attribute-value-id="android"}
     1.  This is the first step for Android.
 
     2.  This is the second step for Android.
 
-*   {: data-platform-attribute-value="Mac OSX"}
+*   {: data-platform-attribute-value-id="osx"}
 
     1.  Another step! This one's for Mac.
 
     2.  ...And another for Mac.
 
-*   {: data-platform-attribute-value="Ubuntu"}
+*   {: data-platform-attribute-value-id="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-attribute-value-id="windows"} I give up. Just imagine there are steps here.
 {: data-platform-select-list-attribute="client-platform" }
 
-*   {: data-platform-attribute-value="EV3 Brick"}
+*   {: data-platform-attribute-value-id="ev3"}
     On the EV3, do a thing in this specific way.
 
-*   {: data-platform-attribute-value="BrickPi"}
+*   {: data-platform-attribute-value-id="brickpi"}
     The BrickPi is a little different. You actually need to do this other thing.
 
-*   {: data-platform-attribute-value="PiStorms"}
+*   {: data-platform-attribute-value-id="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" }
diff --git a/javascripts/platform-select.js b/javascripts/platform-select.js
@@ -1,3 +1,10 @@
+---
+
+---
+
+// Loaded from _data/platform-attributes.json
+var platformAttributes = {{ site.data.platform-attributes | jsonify }};
+
 function supportsHtml5Storage() {
     try {
         return 'localStorage' in window && window['localStorage'] !== null;
@@ -27,47 +34,49 @@ function getFilterByData(dataHash) {
 
 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
+    // Containers of platform content should have data-platform-attribute-name and data-platform-attribute-value-id
     $('.platform-content-item')
         .filter(getFilterByData('platform-attribute-name', platformAttributeName))
         .hide()
-        .filter(getFilterByData('platform-attribute-value', newAttributeValue))
+        .filter(getFilterByData('platform-attribute-value-id', newAttributeValue))
         .show();
 
     $('.platform-attribute-select-group')
         .filter(getFilterByData('target-platform-attribute-name', platformAttributeName))
         .children()
         .removeClass('active')
-        .filter(getFilterByData('platform-attribute-value', newAttributeValue))
+        .filter(getFilterByData('platform-attribute-value-id', newAttributeValue))
         .addClass('active');
 
     // TODO: Save current option to local storage
 }
 
-function addPlatformNavItem(platformAttributeName, newAttributeValue) {    
+function addPlatformNavItem(platformAttributeId, newAttributeValueId) {    
     // 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));
+        .filter(getFilterByData('target-platform-attribute-name', platformAttributeId));
 
     if ($platNav.length <= 0) {
         $platNav = $('<ul class="nav nav-pills platform-attribute-select-group"/>')
-            .data('target-platform-attribute-name', platformAttributeName);
+            .data('target-platform-attribute-name', platformAttributeId);
         $platNav.insertAfter($('.page-header'));
     }
-    else if($platNav.children().filter(getFilterByData('platform-attribute-value', newAttributeValue)).length > 0) {
+    else if($platNav.children().filter(getFilterByData('platform-attribute-value-id', newAttributeValueId)).length > 0) {
         // If there are any pills that have already been created for this value, we are done
         return;
     }
 
     var $pillItem = $('<li/>')
-        .data('platform-attribute-value', newAttributeValue)
+        .data('platform-attribute-value-id', newAttributeValueId)
         .addClass('platform-select-link');
 
-    // TODO: Use text lookup and data file
-    $('<a/>').text(newAttributeValue).appendTo($pillItem);
+
+    var platformAttributeMetadata = platformAttributes[platformAttributeId];
+    var newAttributeValueMetadata = platformAttributeMetadata.values[newAttributeValueId];
+    $('<a/>').text(newAttributeValueMetadata.title).appendTo($pillItem);
 
     $pillItem.click(function () {
-        switchSelectedPlatformAttribute(platformAttributeName, newAttributeValue);
+        switchSelectedPlatformAttribute(platformAttributeId, newAttributeValueId);
     })
 
     $platNav.append($pillItem);
@@ -76,28 +85,28 @@ function addPlatformNavItem(platformAttributeName, newAttributeValue) {
 $(document).ready(function () {    
     $('ul[data-platform-select-list-attribute]').each(function (i, platformUl) {
         var $platformUl = $(platformUl);
-        var targetAttribute = $platformUl.data('platform-select-list-attribute');
+        var targetAttributeId = $platformUl.data('platform-select-list-attribute');
 
         var $platformContentContainer = $('<div/>');
         $platformContentContainer.insertBefore($platformUl);
 
         $platformUl.detach();
 
-        $platformUl.children('li[data-platform-attribute-value]').each(function (i, platformLi) {
+        $platformUl.children('li[data-platform-attribute-value-id]').each(function (i, platformLi) {
             var $platformLi = $(platformLi);
-            var currentPlatformAttributeValue = $platformLi.data('platform-attribute-value');
+            var currentPlatformAttributeValueId = $platformLi.data('platform-attribute-value-id');
 
             var $newPlatformContentItem = $('<div/>').addClass("platform-content-item");
-            $newPlatformContentItem.attr('id', 'plat-' + cleanTextForId(targetAttribute) + '-' + cleanTextForId(currentPlatformAttributeValue));
+            $newPlatformContentItem.attr('id', 'plat-' + cleanTextForId(targetAttributeId) + '-' + cleanTextForId(currentPlatformAttributeValueId));
             $newPlatformContentItem.data({
-                'platform-attribute-name': targetAttribute,
-                'platform-attribute-value': currentPlatformAttributeValue
+                'platform-attribute-name': targetAttributeId,
+                'platform-attribute-value-id': currentPlatformAttributeValueId
             });
 
             $newPlatformContentItem.append($platformLi.contents().detach());
             $newPlatformContentItem.appendTo($platformContentContainer);
 
-            addPlatformNavItem(targetAttribute, currentPlatformAttributeValue);
+            addPlatformNavItem(targetAttributeId, currentPlatformAttributeValueId);
         });
 
         // TODO: Add ability to nest options (as dropdown)
@@ -111,7 +120,7 @@ $(document).ready(function () {
 
         var defaultValue = $(this)
             .children(':first')
-            .data('platform-attribute-value');
+            .data('platform-attribute-value-id');
 
         switchSelectedPlatformAttribute(attributeName, defaultValue);
     })