-```
-
-```javascript
-//loader.js
-console.log("Loaded gizmo!")
-function TmplitCustomTmplit( ... ){
- ...
-}
-```
-```handlebars
-
-{{> gizmo}}
-{{W CustomTmplit}}
-```
+This directory contains the global classes for the tmplits project. These classes are used by the tmplits to support global functionality for specific behaviors.
## Licensing
diff --git a/src/tmplits/tmplits-globalclasses/module.js b/src/tmplits/tmplits-globalclasses/module.js
index 723bddc..bc409b5 100644
--- a/src/tmplits/tmplits-globalclasses/module.js
+++ b/src/tmplits/tmplits-globalclasses/module.js
@@ -7,6 +7,7 @@
*
*/
+
//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.
@@ -22,9 +23,10 @@
// return `Hello ${context[0]}!`
//}
+import { evalContext } from "../tmplits-utilities/module.js"
-export class multiOptionSelector{
+export class multiOptionSelector {
static selected(el, click) {
let index = el.getAttribute('data-index')
let value = el.getAttribute('data-value')
@@ -32,17 +34,17 @@ export class multiOptionSelector{
scope.setAttribute('selectedIndex', index)
let targets = scope.querySelectorAll('.lui-select-value')
- targets.forEach((target)=>{
+ targets.forEach((target) => {
target.value = value || +index;
})
let selection = el.textContent;
let query = el.querySelector('.select-text')
- if( query != null){
+ if (query != null) {
selection = query.textContent;
}
selection = selection.trim()
-
+
let text = scope.querySelectorAll('.lui-select-text:not(.noset)')
if (text.length) {
text.forEach(e => {
@@ -55,7 +57,7 @@ export class multiOptionSelector{
e.dispatchEvent(evt);
});
}
-
+
if (click) {
try {
evalInContext(click, el)
@@ -65,35 +67,41 @@ export class multiOptionSelector{
}
multiOptionSelector.updateSelection(scope, value || +index)
}
- static updateSelection(scope, value){
+ static updateSelection(scope, value) {
let selection = '';
- let page =''
+ let page = ''
let dom = ''
+ let context = ''
let options = scope.querySelectorAll('.option')
- options.forEach((option)=>{
- let dataValue = option.getAttribute('data-value')
- if( (dataValue == null && option.getAttribute('data-index') == Math.floor(value)) || dataValue == value )
- {
+ options.forEach((option) => {
+ let dataValue = option.getAttribute('data-value')
+ if ((dataValue == null && option.getAttribute('data-index') == Math.floor(value)) || dataValue == value) {
option.classList.add('active')
selection = option.textContent;
let query = option.querySelector('.select-text')
- if( query != null){
+ if (query != null) {
selection = query.textContent;
- }
+ }
page = option.getAttribute('data-page')
query = option.querySelector('[data-page]')
- if( query != null){
+ if (query != null) {
page = query.getAttribute('data-page');
- }
+ }
dom = option.getAttribute('data-target-dom')
query = option.querySelector('[data-target-dom]')
- if( query != null){
+ if (query != null) {
dom = query.getAttribute('data-target-dom');
- }
+ }
+
+ context = evalContext.call(option, option.getAttribute('data-context'))
+ query = option.querySelector('[data-context]')
+ if (query != null) {
+ context = evalContext.call(query, query.getAttribute('data-context'))
+ }
}
- else{
+ else {
option.classList.remove('active')
}
})
@@ -112,16 +120,23 @@ export class multiOptionSelector{
e.dispatchEvent(evt);
});
}
- if( (page !== null) && (page != '') ){
- if( (dom !== null) && (dom != '') ){
+ if ((page !== null) && (page != '')) {
+ //If the user provided a dom, use that
+ if ((dom !== null) && (dom != '')) {
tmplits.loadPage(dom, page, context)
- }
+ }
+ //Query the dom for any lui-select-dom elements and load the page into them
dom = scope.querySelectorAll('.lui-select-dom:not(.noset)')
if (dom.length) {
dom.forEach(e => {
- tmplits.loadPage(e, page)
+ //Check if the user has provided a context on the lui-select-dom element
+ ctx = e.getAttribute('data-context')
+ if (ctx != null) {
+ context = evalContext.call(e, ctx);
+ }
+ tmplits.loadPage(e, page, context)
});
- }
+ }
}
}
static setSelected(evt) {
@@ -130,7 +145,7 @@ export class multiOptionSelector{
if (valueHolder != null) {
multiOptionSelector.updateSelection(scope, valueHolder.getAttribute('value'))
}
- }
+ }
}
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
@@ -143,15 +158,15 @@ export class LuiSlider {
scope.classList.add('lui-slider-active')
let target = scope.querySelectorAll('.lui-slider-value')
- target.forEach((input)=>{
+ target.forEach((input) => {
input.classList.add('editing')
})
let value;
if (target?.[0].getAttribute('data-var-name')) {
- try{
+ try {
value = LUX.getValue($(target?.[0]))
}
- catch(e){
+ catch (e) {
value = +target?.[0].value
}
} else {
@@ -169,12 +184,12 @@ export class LuiSlider {
static luiSlideEnd(selected) {
let scope = document.querySelectorAll('.lui-slider-scope.lui-slider-active')
scope.forEach((e) => {
- let pop = e.getAttribute('pop-position')
+ let pop = e.getAttribute('pop-position')
let target = e.querySelectorAll('.lui-slider-value')
- target.forEach((input)=>{
+ target.forEach((input) => {
//Pop is a bit buggy, seems like maybe a debounce issue
- if(pop){
- input.value = pop
+ if (pop) {
+ input.value = pop
}
input.classList.remove('editing')
})
@@ -213,11 +228,11 @@ export class LuiSlider {
let max = +scope.getAttribute('lui-slider-max')
let min = +scope.getAttribute('lui-slider-min')
let total = max - min;
- let screenStart = +(direction ? scope.getAttribute('lui-slider-screen-x-start') : scope.getAttribute('lui-slider-screen-y-start'))
+ let screenStart = +(direction ? scope.getAttribute('lui-slider-screen-x-start') : scope.getAttribute('lui-slider-screen-y-start'))
let screenNew = +(direction ? evt.screenX : evt.screenY)
- let scrollDistance =-(direction ? -scope.clientWidth : scope.clientHeight)
- let scrollBarPercent = (((screenNew - screenStart)/(scrollDistance*0.9)) * screenScale)
- let value = startValue + scrollBarPercent*total
+ let scrollDistance = -(direction ? -scope.clientWidth : scope.clientHeight)
+ let scrollBarPercent = (((screenNew - screenStart) / (scrollDistance * 0.9)) * screenScale)
+ let value = startValue + scrollBarPercent * total
value = clamp(value, min, max)
target.forEach((e) => {
@@ -227,9 +242,9 @@ export class LuiSlider {
"bubbles": true,
"cancelable": true
});
- try{
+ try {
e.dispatchEvent(evt);
- }catch{
+ } catch {
}
})
@@ -238,14 +253,14 @@ export class LuiSlider {
static luiSlideMouse(evt) {
let scope = evt.target.classList.contains('lui-slider-scope') ? evt.target : evt.target.closest('.lui-slider-scope')
- if( scope == null){
+ if (scope == null) {
return
}
evt.preventDefault()
scope.classList.add('lui-slider-active')
if (scope.length == 0) {
return;
- }
+ }
let target = scope.querySelectorAll('.lui-slider-value')
if (target.length == 0) {
@@ -261,8 +276,8 @@ export class LuiSlider {
let max = +scope.getAttribute('lui-slider-max')
let min = +scope.getAttribute('lui-slider-min')
let direction = scope.getAttribute('direction') > 0
- let scrollDistance =(direction ? scope.clientWidth : scope.clientHeight)*10
- let value = startValue + evt.deltaY/scrollDistance
+ let scrollDistance = (direction ? scope.clientWidth : scope.clientHeight) * 10
+ let value = startValue + evt.deltaY / scrollDistance
value = clamp(value, min, max)
target.forEach((e) => {
@@ -273,20 +288,20 @@ export class LuiSlider {
"bubbles": true,
"cancelable": true
});
- try{
+ try {
e.dispatchEvent(evt);
- }catch{
+ } catch {
}
})
let oldTimeout = scope.getAttribute('timeout')
- if(oldTimeout!=null){
+ if (oldTimeout != null) {
clearTimeout(oldTimeout)
}
- let timeout = setTimeout(()=>{
+ let timeout = setTimeout(() => {
target.forEach((e) => {
e.classList.remove('editing')
- })
+ })
scope.classList.remove('lui-slider-active')
scope.removeAttribute('timeout')
}, 500)
@@ -308,10 +323,10 @@ export class LuiSlider {
let percent = ((max - value) / total) * 90 //90 keeps the bar from going past the bottom
sliderBar.forEach((e) => {
- if(direction){
+ if (direction) {
e.style.left = (100 - percent) + '%';
}
- else{
+ else {
e.style.top = (percent) + '%';
}
})
@@ -320,36 +335,36 @@ export class LuiSlider {
}
-export class luiDirectory{
- static updateDirectory(evt){
- try{
- var data = JSON.parse( evt.currentTarget.value )
+export class luiDirectory {
+ static updateDirectory(evt) {
+ try {
+ var data = JSON.parse(evt.currentTarget.value)
}
- catch{
+ catch {
return
}
- if( typeof data.files == 'undefined'){
+ if (typeof data.files == 'undefined') {
return
}
let scope = evt.currentTarget.closest('.select-scope')
let target = scope.querySelectorAll('.dropdown-menu,.list-view')
-
+
let table = ''
table += '
'
table += ''
-
- let folders = data.files.filter( e => e.name.slice(-1) == '/' )
- let files = data.files.filter( e => e.name.slice(-1) != '/' )
-
- folders.forEach((file)=>{
+
+ let folders = data.files.filter(e => e.name.slice(-1) == '/')
+ let files = data.files.filter(e => e.name.slice(-1) != '/')
+
+ folders.forEach((file) => {
table += `| ${file.name} | ${file.date} | ${file.size} |
`
})
- files.forEach((file)=>{
+ files.forEach((file) => {
table += `| ${file.name} | ${file.date} | ${file.size} |
`
})
table += ''
- table += '
'
+ table += ''
let tableEl = htmlToElement(table)
target.forEach(element => {
@@ -358,11 +373,11 @@ export class luiDirectory{
});
}
- static fileSelect(el){
+ static fileSelect(el) {
let item = el.closest('.select-scope')
let selection = el.textContent;
let query = el.querySelector('.select-text')
- if( query != null){
+ if (query != null) {
selection = query.textContent;
}
selection = selection.trim()
@@ -370,96 +385,96 @@ export class luiDirectory{
if (text != null) {
let cleanPath = []
let path = text.value.split("/")
- path = path.filter((e, i,arr)=>{return ((e != '') || (i == (arr.length-1)))})
+ path = path.filter((e, i, arr) => { return ((e != '') || (i == (arr.length - 1))) })
path.pop()
- path = path.concat( selection.split("/") )
- path.forEach((el, i)=>{
- if( (el == '.' || el == ' ' )){
- if( i == 0 ){
+ path = path.concat(selection.split("/"))
+ path.forEach((el, i) => {
+ if ((el == '.' || el == ' ')) {
+ if (i == 0) {
cleanPath.push('.')
}
}
- else if( el == '..'){
+ else if (el == '..') {
cleanPath.pop()
}
- else{
- if(cleanPath.length==0){
+ else {
+ if (cleanPath.length == 0) {
cleanPath.push('.')
}
cleanPath.push(el)
}
})
- if(cleanPath.length == 1){
+ if (cleanPath.length == 1) {
cleanPath.push('')
}
- text.innerHTML = cleanPath.join("/")
- text.value = cleanPath.join("/")
+ text.innerHTML = cleanPath.join("/")
+ text.value = cleanPath.join("/")
let evt = new Event("change", {
"bubbles": true,
"cancelable": true
});
text.dispatchEvent(evt);
- }
+ }
}
- static filter(e, key){
+ static filter(e, key) {
let filter = e.getAttribute('filter') || ''
- switch(key.toLowerCase()){
+ switch (key.toLowerCase()) {
case 'backspace':
filter = filter.slice(0, -1);
- break;
+ break;
case 'escape':
filter = ''
- break;
+ break;
default:
- if(key.length == 1){
- filter += key
+ if (key.length == 1) {
+ filter += key
}
- break
+ break
}
e.setAttribute('filter', filter)
- for( let row of e.rows){
- if( row.textContent.toLowerCase().includes(filter) ){
+ for (let row of e.rows) {
+ if (row.textContent.toLowerCase().includes(filter)) {
row.style.display = ''
}
- else{
+ else {
row.style.display = 'none'
}
- }
+ }
if (e.nextSibling) {
e.nextSibling.innerHTML = `filtering: ${filter}`
} else {
- let el = document.createElement('div')
- el.innerHTML = `filtering: ${filter}`
- el.classList.add('filter-text');
- el.classList.add('form-control')
- e.parentNode.appendChild(el);
+ let el = document.createElement('div')
+ el.innerHTML = `filtering: ${filter}`
+ el.classList.add('filter-text');
+ el.classList.add('form-control')
+ e.parentNode.appendChild(el);
}
}
- static filterKey(e){
+ static filterKey(e) {
e.preventDefault()
let key = e.key
let scope = e.target.closest('.select-scope')
let target = scope.querySelectorAll('.dropdown-menu,.list-view')
-
+
//if the user presses enter, set the value of filter to the html of e
- if( key == 'Enter'){
+ if (key == 'Enter') {
let evt = new Event("change", {
"bubbles": true,
"cancelable": true
});
- e.target.dispatchEvent(evt);
+ e.target.dispatchEvent(evt);
return
}
- target.forEach((element)=>{
+ target.forEach((element) => {
element.parentNode.classList.add('open')
luiDirectory.filter(element.children[0], key)
- })
+ })
let filter = scope.querySelector('[filter]')
if (filter) {
- e.target.value = filter.getAttribute('filter')
+ e.target.value = filter.getAttribute('filter')
}
}
}
@@ -498,7 +513,7 @@ $(document).on({
$(document).on({
"touchmove": LuiSlider.luiSlideChange
});
-window.addEventListener("wheel", LuiSlider.luiSlideMouse, { passive:false })
+window.addEventListener("wheel", LuiSlider.luiSlideMouse, { passive: false })
$(document).on({
"mouseup": LuiSlider.luiSlideEnd
@@ -529,33 +544,9 @@ export function selectPage(selected) {
selected = $(selected.currentTarget)
let page = selected.attr('data-page')
let dom = selected.attr('data-target-dom')
- if(dom && page){
+ if (dom && page) {
//Check if the user has provided a context
- let ctx = selected.attr('data-context')
-
- //If the context is a string, try to parse it as json, then as javascript, then just pass it as a string
- if(typeof ctx == 'string'){
- try{
- ctx = JSON.parse(ctx)
- }catch{
- try{
- ctx = eval(ctx)
- }
- catch{
- }
- if(ctx == null){
- console.warn('Context was not valid json or javascript')
- ctx = selected.attr('data-context')
- }
- }
- }
- //If the context is a number, pass it as a number
- else if(typeof ctx == 'number'){
- ctx = +ctx
- }
- else{
- ctx = ' '
- }
+ let ctx = evalContext.call(this, selected.attr('data-context'))
tmplits.loadPage(dom, page, ctx)
}
}
@@ -583,11 +574,11 @@ export function luiIncrementValue(selected) {
let increment;
let max = selected.currentTarget.getAttribute('max');
let min = selected.currentTarget.getAttribute('min');
-
+
// limit with min value
- if ((max === null) && (min !== null)){
+ if ((max === null) && (min !== null)) {
let minValue = Number(min);
- if (value > minValue){
+ if (value > minValue) {
increment = +selected.currentTarget.getAttribute('increment');
} else {
increment = 0;
@@ -595,9 +586,9 @@ export function luiIncrementValue(selected) {
}
// limit with max value
- if ((max !== null) && (min === null)){
+ if ((max !== null) && (min === null)) {
let maxValue = Number(max);
- if (value < maxValue){
+ if (value < maxValue) {
increment = +selected.currentTarget.getAttribute('increment');
} else {
increment = 0;
diff --git a/src/tmplits/tmplits-globalclasses/package.json b/src/tmplits/tmplits-globalclasses/package.json
index 714da48..95b1914 100644
--- a/src/tmplits/tmplits-globalclasses/package.json
+++ b/src/tmplits/tmplits-globalclasses/package.json
@@ -1,6 +1,6 @@
{
"name": "@loupeteam/tmplits-globalclasses",
- "version": "0.0.4",
+ "version": "0.0.5",
"description": "",
"main": "index.js",
"scripts": {
@@ -9,10 +9,9 @@
"keywords": [],
"author": "",
"license": "MIT",
- "dependencies": {
- },
+ "dependencies": {},
"repository": {
"type": "git",
"url": "https://github.com/loupeteam/tmplits.git"
}
-}
+}
\ No newline at end of file
diff --git a/src/tmplits/tmplits-pageselect/README.md b/src/tmplits/tmplits-pageselect/README.md
index bb8b0eb..4604771 100644
--- a/src/tmplits/tmplits-pageselect/README.md
+++ b/src/tmplits/tmplits-pageselect/README.md
@@ -1,76 +1,34 @@
-This is a template gizmo
+Example Usage:
-Use this template by running:
-```
-lpm install tmplits-gizmo
-```
-then modify it for your needs.
-
-Settings up the template:
-
-This gizmo can be installed using NPM install and will get loaded by the tmplit system
-the important parts are a
-- library.handlebars - this is your template
-- loader.js - js file that will run after loading the templates. This can do work to instantiate things or contain function tmplits
-- Package.json that includes a name with the prefix
- - @loupeteam/tmplit-[your tmplits name]
- - Version number
- - Link to repo the repo (the local one or tmplits, this is important because it is how the package gets it's access rights)
-```json
-{
- "name": "@loupeteam/tmplits-[TmplitName]",
- "version": "x.x.x",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/loupeteam/tmplits.git"
- },
-}
-```
-
-The entire page template will be loaded with the name [your tmplit name] and any tmplits inside scripts will also be available
-
-Usage:
-
-
-```json
-//Application Package.json
-{
-{
- "name": "@loupeteam/tmplit-template",
- "version": "0.0.2",
- ...
- "dependencies": {
- "@loupeteam/tmplits": "0.0.2",
- "@loupeteam/tmplits-gizmo": "0.0.1",
- }
-}
-}
-``````
-
-```json
-//Gizmo Package.json
-{
- "name": "@loupeteam/tmplits-gizmo",
- "version": "0.0.1",
-}
-``````
-
-```handlebars
-
-
Hello World
-```
-
-```javascript
-//loader.js
-console.log("Loaded gizmo!")
-function TmplitCustomTmplit( ... ){
- ...
-}
-```
```handlebars
-
-{{> gizmo}}
-{{W CustomTmplit}}
+{{tmplit
+ "PageSelect"
+ "Page 1: json"
+ ctx='{"msg":"hello"}'
+ dom="container1"
+ template="page1"
+}}
+{{tmplit
+ "PageSelect"
+ "Page 2: javascript"
+ ctx="this.innerHTML"
+ dom="container1"
+ template="page2"
+}}
+
+
+
+
+
+
+
+
```
## Licensing
diff --git a/src/tmplits/tmplits-pageselect/module.js b/src/tmplits/tmplits-pageselect/module.js
index 77241c4..703bc3d 100644
--- a/src/tmplits/tmplits-pageselect/module.js
+++ b/src/tmplits/tmplits-pageselect/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 Page Select Usage
{{tmplit 'PageSelect' 'Page 1' dom="container1" template="page1"}}
{{tmplit 'PageSelect' 'Page 2' dom="container1" template="page2"}}
@@ -60,15 +45,8 @@ export function TmplitPageSelect(context, args) {
classList = classList.concat(['active'])
}
- if( typeof ctx == 'string'){
- attr = attr.concat(`data-context='${ctx}'`)
- }
- else if( typeof ctx == 'object'){
- attr = attr.concat(`data-context='${JSON.stringify(ctx)}'`)
- }
- else if( typeof ctx == 'number'){
- attr = attr.concat(`data-context=${ctx}`)
- }
+ attr = util.appendContextToAttr(attr, ctx)
+
return `
${context[0]}
diff --git a/src/tmplits/tmplits-pageselect/package.json b/src/tmplits/tmplits-pageselect/package.json
index fe153cf..806032f 100644
--- a/src/tmplits/tmplits-pageselect/package.json
+++ b/src/tmplits/tmplits-pageselect/package.json
@@ -1,6 +1,6 @@
{
"name": "@loupeteam/tmplits-pageselect",
- "version": "0.0.3",
+ "version": "0.0.4",
"description": "",
"main": "index.js",
"scripts": {
@@ -10,11 +10,11 @@
"author": "",
"license": "MIT",
"dependencies": {
- "@loupeteam/tmplits-globalclasses" : "*",
- "@loupeteam/tmplits-utilities" : "*"
+ "@loupeteam/tmplits-globalclasses": "*",
+ "@loupeteam/tmplits-utilities": "*"
},
"repository": {
"type": "git",
"url": "https://github.com/loupeteam/tmplits.git"
}
-}
+}
\ No newline at end of file
diff --git a/src/tmplits/tmplits-utilities/README.md b/src/tmplits/tmplits-utilities/README.md
index bb8b0eb..09f46f2 100644
--- a/src/tmplits/tmplits-utilities/README.md
+++ b/src/tmplits/tmplits-utilities/README.md
@@ -1,77 +1,4 @@
-This is a template gizmo
-
-Use this template by running:
-```
-lpm install tmplits-gizmo
-```
-then modify it for your needs.
-
-Settings up the template:
-
-This gizmo can be installed using NPM install and will get loaded by the tmplit system
-the important parts are a
-- library.handlebars - this is your template
-- loader.js - js file that will run after loading the templates. This can do work to instantiate things or contain function tmplits
-- Package.json that includes a name with the prefix
- - @loupeteam/tmplit-[your tmplits name]
- - Version number
- - Link to repo the repo (the local one or tmplits, this is important because it is how the package gets it's access rights)
-```json
-{
- "name": "@loupeteam/tmplits-[TmplitName]",
- "version": "x.x.x",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/loupeteam/tmplits.git"
- },
-}
-```
-
-The entire page template will be loaded with the name [your tmplit name] and any tmplits inside scripts will also be available
-
-Usage:
-
-
-```json
-//Application Package.json
-{
-{
- "name": "@loupeteam/tmplit-template",
- "version": "0.0.2",
- ...
- "dependencies": {
- "@loupeteam/tmplits": "0.0.2",
- "@loupeteam/tmplits-gizmo": "0.0.1",
- }
-}
-}
-``````
-
-```json
-//Gizmo Package.json
-{
- "name": "@loupeteam/tmplits-gizmo",
- "version": "0.0.1",
-}
-``````
-
-```handlebars
-
-Hello World
-```
-
-```javascript
-//loader.js
-console.log("Loaded gizmo!")
-function TmplitCustomTmplit( ... ){
- ...
-}
-```
-```handlebars
-
-{{> gizmo}}
-{{W CustomTmplit}}
-```
+## Utility functions for tmplits
## Licensing
diff --git a/src/tmplits/tmplits-utilities/module.js b/src/tmplits/tmplits-utilities/module.js
index 3b33b94..03a2eb8 100644
--- a/src/tmplits/tmplits-utilities/module.js
+++ b/src/tmplits/tmplits-utilities/module.js
@@ -6,29 +6,13 @@
* This file is part of tmplits, licensed under the MIT License.
*
*/
-
-//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]}!`
-//}
-
'use strict';
let scope = this
export function evalInContext(js, context) {
//# Return the results of the in-line anonymous function we .call with the passed context
- return function() { return eval(js); }.call(context);
+ return function () { return eval(js); }.call(context);
}
export function htmlToElements(html) {
@@ -48,7 +32,7 @@ export function dropDownSelected(el, click) {
let item = el.closest('.dropdown-scope')
let selection = el.textContent;
let query = el.querySelector('.select-text')
- if( query != null){
+ if (query != null) {
selection = query.textContent;
}
selection = selection.trim()
@@ -95,7 +79,7 @@ export function dropDownSelected(el, click) {
export function updateSelectOptions(el, index) {
el.querySelectorAll('.option').forEach((e) => {
- let click = `multiOptionSelector.selected(this, '${e.getAttribute('onclick') }');`
+ let click = `multiOptionSelector.selected(this, '${e.getAttribute('onclick')}');`
e.setAttribute('onclick', click)
e.setAttribute('data-index', index++)
})
@@ -103,15 +87,15 @@ export function updateSelectOptions(el, index) {
//Functionality for number grid
export function numGridPopulate() {
-
+
// get all grids
const grids = document.querySelectorAll(".grid");
// iterate over each grid
- grids.forEach( function (grid) {
+ grids.forEach(function (grid) {
// only update if grid is visible
- if (grid.offsetWidth == 0 && grid.offsetHeight == 0 && grid.getClientRects().length == 0 ) {
+ if (grid.offsetWidth == 0 && grid.offsetHeight == 0 && grid.getClientRects().length == 0) {
return
}
@@ -165,7 +149,7 @@ export function numGridPopulate() {
for (let j = cols; j >= 0; j--) {
const cell = document.createElement("td");
let $cell = $(cell)
- $cell.attr('data-var-name', `${dataVarName}[${j*10 + i}]`)
+ $cell.attr('data-var-name', `${dataVarName}[${j * 10 + i}]`)
let value;
value = LUX.getValue($cell); //Math.floor(Math.random() * (-150)) // to get random number between -150 to 0
cell.innerHTML = value;
@@ -192,7 +176,7 @@ export function numGrid() {
if (numGridIntervalID) {
clearInterval(numGridIntervalID);
}
-
+
// numGridPopulate takes ~3ms to render on a 4x4 grid
// I think this is fine for the moment
numGridIntervalID = setInterval(numGridPopulate, 100);
@@ -247,22 +231,64 @@ export function getButtonType(type, classList) {
//Work up throught the template context to get the full path of a variable
// That has been expanded
-export function getVariablePath( context, key){
+export function getVariablePath(context, key) {
let path = key
- if( context.key ){
+ if (context.key) {
path = context.key;
- if(key != ''){
- if(context._parent.key){
- path +='.' + key;
+ if (key != '') {
+ if (context._parent.key) {
+ path += '.' + key;
}
- else{
- path +=':' + key;
+ else {
+ path += ':' + key;
}
}
}
- if(context._parent){
- path = getVariablePath( context._parent, path);
+ if (context._parent) {
+ path = getVariablePath(context._parent, path);
}
return path;
+}
+
+//Convert a context to an attribute string
+export function appendContextToAttr(attr, ctx) {
+ if (typeof ctx == 'string') {
+ attr = attr.concat(`data-context='${ctx}'`)
+ }
+ else if (typeof ctx == 'object') {
+ attr = attr.concat(`data-context='${JSON.stringify(ctx)}'`)
+ }
+ else if (typeof ctx == 'number') {
+ attr = attr.concat(`data-context=${ctx}`)
+ }
+ return attr
+}
+
+export function evalContext(ctx) {
+ let tmp = ctx
+ //If the context is a string, try to parse it as json, then as javascript, then just pass it as a string
+ if (typeof ctx == 'string') {
+ try {
+ ctx = JSON.parse(ctx)
+ } catch {
+ try {
+ ctx = eval(ctx)
+ }
+ catch {
+ }
+ if (ctx == null) {
+ console.warn('Context was not valid json or javascript')
+ ctx = tmp
+ }
+ }
+ }
+ //If the context is a number, pass it as a number
+ else if (typeof ctx == 'number') {
+ ctx = +ctx
+ }
+ else {
+ ctx = ' '
+ }
+ return ctx
}
\ No newline at end of file
diff --git a/src/tmplits/tmplits-utilities/package.json b/src/tmplits/tmplits-utilities/package.json
index f2846a7..339b905 100644
--- a/src/tmplits/tmplits-utilities/package.json
+++ b/src/tmplits/tmplits-utilities/package.json
@@ -1,6 +1,6 @@
{
"name": "@loupeteam/tmplits-utilities",
- "version": "0.0.3",
+ "version": "0.0.4",
"description": "",
"main": "index.js",
"scripts": {
@@ -9,10 +9,9 @@
"keywords": [],
"author": "",
"license": "MIT",
- "dependencies": {
- },
+ "dependencies": {},
"repository": {
"type": "git",
"url": "https://github.com/loupeteam/tmplits.git"
}
-}
+}
\ No newline at end of file