feature(config) id -> data-name

coderaiser · Apr 14, 2015 · 9ad0be3 · 9ad0be3
1 parent 0b5df38
commit 9ad0be3
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 27 deletions.
diff --git 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,22 +35,22 @@
     <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>
     </li>
     <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
@@ -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,15 +265,15 @@ 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              = {},
                 msg             = 'Diff, Buffer and Directory Storage do not work without localStorage',
                 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;