Merge pull request #33 from loupeteam/bugfix/lux-attributes

Copy lux attributes

src/tmplits/tmplits-led/module.js

@@ -7,21 +7,6 @@
  * 
  */
 
-//DO NOT DELETE THIS FILE 
-//- Doing so will cause 404 errors on the client side which will not break anything, but will throw errors in the console.
-
-//This file will get loaded as a javascript module, meaning you can import other modules from here.
-//You can also export functions from here, which will be available to the client side.
-
-//import * from "./module2.js"//Import relative to this file inside node_modules/this-module-name/
-//import * from "../tmplits-some-other/module.js"//Import relative to this file inside node_modules/tmplits-some-other/
-//import * from "/somewhere.js"//Import from the root of the project
-
-//Define your tmplit functions here and export them to make them globally available
-//export function TmplitHelloWorld(context, args){
-//    return `Hello ${context[0]}!`
-//}
-
 /* Example Led Usage
 {{tmplit 'Led' '<label>' data-var-name='<var>'}}
 {{tmplit 'Led' '<label>' error='true' data-var-name='<var>'}}
@@ -37,12 +22,20 @@ import * as util from "../tmplits-utilities/module.js"
 
 export function TmplitLed(context, args) {
     let {
-        side = 'middle', ['data-var-name']: dataVarName, buttonType = '', buttonVarName = '', error=false, warning=false, ..._args
+        side = 'middle', ['data-var-name']: dataVarName, buttonType = '', buttonVarName = '', error=false, warning=false, ..._args1
     } = args.hash
+    let {
+        ['data-led-true']: dataLedTrue = error ? 'led-red': (warning ? 'led-yellow':'led-green'), 
+        ['data-led-false']: dataLedFalse = 'led-off',         
+        ..._args
+    } = _args1
+
     //Get cleaned up values from args
     let {
         classList,
-        attr
+        attr,
+        luiClasses,
+        luiAttr,
     } = util.cleanArgs(_args)
 
     // apply the Led label if there is one
@@ -79,9 +72,12 @@ export function TmplitLed(context, args) {
         label = `<div class='led-label' style='${labelStyle}' >${finalResult}</div>`
     } 
 
+    // add the led class to the class list
+    let ledClassList = ['lux-led', 'led', ...luiClasses];
+
     return `
         <div class="${classList.join(' ')}" ${attr}>
-        <div class='led lux-led' data-led-false='led-off' data-led-true='${error ? 'led-red': (warning ? 'led-yellow':'led-green') }' data-var-name='${dataVarName}' ${attr}></div>
+        <div class="${ledClassList.join(' ')}" data-led-false=${dataLedFalse} data-led-true='${dataLedTrue}' data-var-name='${dataVarName}' ${attr} ${luiAttr} ></div>
         ${label}
         </div>
     `

src/tmplits/tmplits-led/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loupeteam/tmplits-led",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {

src/tmplits/tmplits-slider/module.js

@@ -49,20 +49,23 @@ export function TmplitSlider(context, args) {
     //Get cleaned values
     let {
         classList,
-        attr
+        attr,
+        luiClasses,
+        luiAttr,
     } = util.cleanArgs(_args)
     classList = classList.concat(['lui-slider-scope', 'slider'])
     inputStyle = `position:relative;width:150%;top:0%;border-style:none;background:transparent;display:none` + inputStyle
     let innerClassList = ['lui-slider-value']
+    innerClassList.push(...luiClasses)
     if (dataVarName) {
         innerClassList.push('lux-num-value')
     }
     let inner = '';
     if (args.children) {
         inner += 
-        inner += `<invisible-input class='${innerClassList.join(' ')}' value="${context}" style='display:none' ${dataVarName?'data-var-name="' + dataVarName +'"':''} ></invisible-input>`
+        inner += `<invisible-input class='${innerClassList.join(' ')}' value="${context}" style='display:none' ${dataVarName?'data-var-name="' + dataVarName +'"':''} ${luiAttr}></invisible-input>`
     } else {
-        inner = `<invisible-input type='number' min='${min}' max='${max}' class='${innerClassList.join(' ')}' value="${context}" style='${inputStyle}' ${dataVarName?'data-var-name="' + dataVarName +'"':''} ></invisible-input>`
+        inner = `<invisible-input type='number' min='${min}' max='${max}' class='${innerClassList.join(' ')}' value="${context}" style='${inputStyle}' ${dataVarName?'data-var-name="' + dataVarName +'"':'' } ${luiAttr}></invisible-input>`
     }
 
     let bar = document.createElement("div");

src/tmplits/tmplits-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loupeteam/tmplits-slider",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {

src/tmplits/tmplits-utilities/module.js

@@ -182,6 +182,13 @@ export function numGrid() {
     numGridIntervalID = setInterval(numGridPopulate, 100);
 }
 
+export function attributeString(args) {
+    let attr = Object.keys(args).map((v) => {
+        return `${v}="${args[v]}"`
+    })
+    return attr.join(' ');
+}
+
 export function cleanArgs(args) {
     let _args = args
     let classList = []
@@ -190,13 +197,14 @@ export function cleanArgs(args) {
         delete _args.class
     }
 
-    let attr = Object.keys(_args).map((v) => {
-        return `${v}="${_args[v]}"`
-    })
-    attr = attr.join(' ');
+    let attr = attributeString(_args);
+
+    let {['attr']:luiAttr, ['classList']:luiClasses} = getLuxAttributes(args)
     return {
         classList,
-        attr
+        attr,
+        luiAttr,
+        luiClasses
     }
 }
 
@@ -291,4 +299,53 @@ export function evalContext(ctx) {
         ctx = ' '
     }
     return ctx
+}
+
+const luiAttributes = [
+    'min-user-level-show',
+    'min-user-level-unlock',
+    'data-machine-name',
+    'data-var-name',        
+    'data-var-name-hide',
+    'data-var-name-lock',
+    'data-led-true',
+    'data-led-false',
+    'data-set-value',
+    'data-hide-true',
+    'data-lock-true',
+    'data-range',
+    'data-read-group',
+    'data-reset-value',
+    'data-hide-set',
+    'data-lock-set',
+    'data-unit-factor',
+    'data-unit-offset',
+    'data-source-units',
+    'data-display-units',
+    'data-fixed',
+    'data-precision',
+    'data-exponent',
+    'data-pad',
+    'data-unit-text',
+    'data-machine-value-text',
+    'data-machine-value-text-option',
+    'data-machine-value-dropdown',
+    'data-prevent-drag',
+    'data-include',
+]
+
+//This function will get all the lux attribuites so they can be applied to the proper elements
+export function getLuxAttributes(args){
+
+    let {
+        ['class']:classList = '',
+    } = args
+
+    //Make a combined list of all the attributes
+    let attr = Object.keys(args).filter((value)=>{return luiAttributes.includes(value)}).map((v) => { return `${v}="${args[v]}"`}).join(' ')
+
+    //Pull out the lux classes
+    classList = classList.split(' ').filter((v) => {return v.toLowerCase().startsWith('lux')})
+
+    return {attr, classList};
 }

src/tmplits/tmplits-utilities/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loupeteam/tmplits-utilities",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {