From 9ad0be3f9f6c70b80984de965bae8c1ffe0b808b Mon Sep 17 00:00:00 2001
From: coderaiser <mnemonic.enemy@gmail.com>
Date: Tue, 14 Apr 2015 09:36:24 -0400
Subject: [PATCH] feature(config) id -> data-name

---
 html/config.html     | 29 ++++++++++++++---------------
 lib/client/config.js | 42 ++++++++++++++++++++++++++++++------------
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/html/config.html b/html/config.html
index 650f1975..d5cb8d3b 100644
--- a/html/config.html
+++ b/html/config.html
@@ -7,7 +7,7 @@
     </li>
     <li>
         <input
-            id="username"
+            data-name="js-username"
             type="text"
             class="form-control"
             placeholder="username"
@@ -16,7 +16,7 @@
     </li>
     <li>
         <input
-            id="password"
+            data-name="js-password"
             type="password"
             class="form-control"
             placeholder="password"
@@ -26,7 +26,7 @@
     <li>
         <label>
             <input
-                id="diff"
+                data-name="js-diff"
                 type="checkbox"
                 {{ diff }}>
             Diff
@@ -35,14 +35,14 @@
     <li>
         <label>
             <input
-                id="zip" 
+                data-name="js-zip"
                 type="checkbox"
                 {{ zip }}>
             Zip
          </label>
     </li>
     <li>
-        <select class="form-control full-width" id="editor" title="Editor">
+        <select data-name="js-editor" class="form-control full-width" title="Editor">
             <option {{ edward-selected }}>edward</option>
             <option {{ dword-selected }}>dword</option>
         </select>
@@ -50,7 +50,7 @@
     <li>
         <label>
             <input
-                id="notifications"
+                data-name="js-notifications"
                 type="checkbox"
                 {{ notifications }}>
             Notifications
@@ -59,7 +59,7 @@
     <li>
         <label>
             <input
-                id="localStorage"
+                data-name="js-localStorage"
                 type="checkbox"
                 {{ localStorage }}>
             Local Storage
@@ -68,44 +68,43 @@
     <li>
         
         <label>
-            <input id="buffer" type="checkbox" {{ buffer }}>
-            
+            <input data-name="js-buffer" type="checkbox" {{ buffer }}>
             Buffer
         </label>
     </li>
     <li>
         <label>
-            <input id="dirStorage" type="checkbox" {{ dirStorage }} >
+            <input data-name="js-dirStorage" type="checkbox" {{ dirStorage }} >
             Directory Storage
         </label>
     </li>
     <li>
         <label>
-            <input id="minify" type="checkbox" {{ minify }}>
+            <input data-name="js-minify" type="checkbox" {{ minify }}>
             Minify
         </label>
     </li>
     <li>
         <label>
-            <input id="online" type="checkbox" {{ online }}>
+            <input data-name="js-online" type="checkbox" {{ online }}>
             Online
         </label>
     </li>
     <li>
         <label>
-            <input id="cache" type="checkbox" {{ cache }} >
+            <input data-name="js-cache" type="checkbox" {{ cache }} >
             Cache
         </label>
     </li>
     <li>
         <label>
-            <input id="showKeysPanel" type="checkbox" {{ showKeysPanel }}>
+            <input data-name="js-showKeysPanel" type="checkbox" {{ showKeysPanel }}>
             Show keys panel
         </label>
     </li>
     <li>
         <input 
-            id="port"
+            data-name="js-port"
             min="0"
             max="65535"
             title="Port"
diff --git a/lib/client/config.js b/lib/client/config.js
index 4042e80b..b30bf5db 100644
--- a/lib/client/config.js
+++ b/lib/client/config.js
@@ -17,7 +17,21 @@ var CloudCmd, Util, DOM, io;
             CONFIG,
             Template,
             Notify      = DOM.Notify,
-            Config      = this;
+            Config      = this,
+            
+            getByData   = function(selector) {
+                var el = DOM.getByDataName('js-' + selector, Element);
+                
+                return el;
+            },
+            
+            getName     = function(element) {
+                var name = element
+                    .getAttribute('data-name')
+                    .replace(/^js-/, '');
+                
+                return name;
+            };
             
         function init() {
             Loading     = true;
@@ -171,17 +185,17 @@ var CloudCmd, Util, DOM, io;
         function onChange(el) {
             var data,
                 obj     = {},
-                name    = el.id,
+                name    = getName(el),
                 type    = el.type;
             
             data        = getValue(el);
             
             if (type === 'checkbox')
-                if (/^(diff|buffer|dirStorage)$/.test(el.id))
+                if (/^(diff|buffer|dirStorage)$/.test(name))
                     onLSChange(el);
-                else if (el.id === 'localStorage')
+                else if (name === 'localStorage')
                     onLocalStorageChange();
-                else if (el.id === 'auth')
+                else if (name === 'auth')
                     onAuthChange(data);
             
             if (name === 'notifications') {
@@ -234,7 +248,7 @@ var CloudCmd, Util, DOM, io;
         }
         
         function setValue(name, value) {
-            var el      = DOM.getById(name, Element),
+            var el      = getByData(name),
                 type    = el.type;
             
             switch(type) {
@@ -251,7 +265,7 @@ var CloudCmd, Util, DOM, io;
         function onLocalStorageChange() {
             var names           = ['diff', 'buffer', 'dirStorage', 'localStorage'],
                 elements        = names.map(function(name) {
-                    return DOM.getById(name);
+                    return getByData(name);
                 }),
                 
                 el              = {},
@@ -259,7 +273,7 @@ var CloudCmd, Util, DOM, io;
                 isChecked;
                 
             elements.forEach(function(element) {
-                var name    = element.id;
+                var name    = getName(element);
                 
                 el[name]    = element;
                 
@@ -283,8 +297,12 @@ var CloudCmd, Util, DOM, io;
         }
         
         function onLSChange(el) {
-            var elLocalStorage  = DOM.getById('localStorage', Element),
-                msg             = el.id + ' depends on localStorage';
+            var elLocalStorage  = getByData('localStorage'),
+                name            = el
+                    .getAttribute('data-name')
+                    .replace(/^js-/, ''),
+                
+                msg             = name + ' depends on localStorage';
             
             if (el.checked && !elLocalStorage.checked) {
                 alert(msg);
@@ -293,8 +311,8 @@ var CloudCmd, Util, DOM, io;
         }
         
         function onAuthChange(checked) {
-            var elUsername      = DOM.getById('username', Element),
-                elPassword      = DOM.getById('password', Element);
+            var elUsername      = getByData('username'),
+                elPassword      = getByData('password');
             
             elUsername.disabled =
             elPassword.disabled = !checked;