Added support for new array element
This commit is contained in:
parent
2056744eaa
commit
f6a07be0ec
|
@ -172,7 +172,7 @@
|
|||
</script>
|
||||
|
||||
<script type="text/html" id="template-numeric-form">
|
||||
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="number" autocomplete="off" data-ls-bind="{{project-document|documentLabel}}" />
|
||||
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="number" autocomplete="off" data-ls-bind="{{project-document|documentLabel}}" data-cast-to="integer" />
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="template-boolean-form">
|
||||
|
@ -182,11 +182,11 @@
|
|||
<script type="text/html" id="template-array-form">
|
||||
<input type="hidden" data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" data-cast-to="array-empty">
|
||||
|
||||
<ul data-ls-loop="project-document.{{rule.key}}" data-ls-as="node" class="sortable">
|
||||
<ul data-forms-add="New" data-ls-loop="project-document.{{rule.key}}" data-ls-as="node" class="sortable">
|
||||
<li data-forms-remove data-forms-move-up data-forms-move-down>
|
||||
<div class="row responsive margin-bottom-small">
|
||||
<div class="row thin responsive margin-bottom-small">
|
||||
<div class="col span-3">
|
||||
<button type="button" class="margin-bottom strip round" data-remove><i class="icon-cancel"></i></button>
|
||||
<button type="button" class="margin-bottom strip round margin-end" data-remove><i class="icon-cancel"></i></button>
|
||||
<button type="button" class="margin-bottom strip round" data-move-down><i class="icon-down-dir"></i></button>
|
||||
<button type="button" class="margin-bottom strip round" data-move-up><i class="icon-up-dir"></i></button>
|
||||
</div>
|
||||
|
@ -198,4 +198,5 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</script>
|
|
@ -35,6 +35,7 @@ const configApp = {
|
|||
'public/scripts/views/analytics/pageview.js',
|
||||
|
||||
'public/scripts/views/forms/clone.js',
|
||||
'public/scripts/views/forms/add.js',
|
||||
'public/scripts/views/forms/code.js',
|
||||
'public/scripts/views/forms/color.js',
|
||||
'public/scripts/views/forms/copy.js',
|
||||
|
|
2
public/dist/scripts/app-all.js
vendored
2
public/dist/scripts/app-all.js
vendored
|
@ -2642,7 +2642,7 @@ var project=router.params["project"]||'None';ga("set","page",window.location.pat
|
|||
if(target){target=document.getElementById(target);}
|
||||
button.addEventListener("click",function(){var clone=document.createElement(element.tagName);if(element.name){clone.name=element.name;}
|
||||
clone.innerHTML=template;clone.className=element.className;view.render(clone);if(target){target.appendChild(clone);}else{button.parentNode.insertBefore(clone,button);}
|
||||
clone.querySelector("input").focus();Array.prototype.slice.call(clone.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:"smooth"});});});Array.prototype.slice.call(clone.querySelectorAll("[data-up]")).map(function(obj){obj.addEventListener("click",function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:"smooth"});}});});Array.prototype.slice.call(clone.querySelectorAll("[data-down]")).map(function(obj){obj.addEventListener("click",function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:"smooth"});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);div.className="ide";pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||
clone.querySelector("input").focus();Array.prototype.slice.call(clone.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:"smooth"});});});Array.prototype.slice.call(clone.querySelectorAll("[data-up]")).map(function(obj){obj.addEventListener("click",function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:"smooth"});}});});Array.prototype.slice.call(clone.querySelectorAll("[data-down]")).map(function(obj){obj.addEventListener("click",function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:"smooth"});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-add",repeat:false,controller:function(element,view,container){var button=document.createElement("button");let template=element.children[0].cloneNode(true);let as=element.getAttribute('data-ls-as');button.type="button";button.innerText="Add";button.classList.add("reverse");button.addEventListener('click',function(){container.set(as,null,true,true);let child=template.cloneNode(true);element.appendChild(child);view.render(child);});element.after(button);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);div.className="ide";pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||
element.disabled=true;alerts.add({text:"Copied to clipboard",class:""},3000);});let check=function(){if(!element.value){return;}
|
||||
let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}catch(error){value=element.value;}
|
||||
code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
|
|
2
public/dist/scripts/app.js
vendored
2
public/dist/scripts/app.js
vendored
|
@ -358,7 +358,7 @@ var project=router.params["project"]||'None';ga("set","page",window.location.pat
|
|||
if(target){target=document.getElementById(target);}
|
||||
button.addEventListener("click",function(){var clone=document.createElement(element.tagName);if(element.name){clone.name=element.name;}
|
||||
clone.innerHTML=template;clone.className=element.className;view.render(clone);if(target){target.appendChild(clone);}else{button.parentNode.insertBefore(clone,button);}
|
||||
clone.querySelector("input").focus();Array.prototype.slice.call(clone.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:"smooth"});});});Array.prototype.slice.call(clone.querySelectorAll("[data-up]")).map(function(obj){obj.addEventListener("click",function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:"smooth"});}});});Array.prototype.slice.call(clone.querySelectorAll("[data-down]")).map(function(obj){obj.addEventListener("click",function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:"smooth"});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);div.className="ide";pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||
clone.querySelector("input").focus();Array.prototype.slice.call(clone.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:"smooth"});});});Array.prototype.slice.call(clone.querySelectorAll("[data-up]")).map(function(obj){obj.addEventListener("click",function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:"smooth"});}});});Array.prototype.slice.call(clone.querySelectorAll("[data-down]")).map(function(obj){obj.addEventListener("click",function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:"smooth"});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-add",repeat:false,controller:function(element,view,container){var button=document.createElement("button");let template=element.children[0].cloneNode(true);let as=element.getAttribute('data-ls-as');button.type="button";button.innerText="Add";button.classList.add("reverse");button.addEventListener('click',function(){container.set(as,null,true,true);let child=template.cloneNode(true);element.appendChild(child);view.render(child);});element.after(button);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);div.className="ide";pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||
element.disabled=true;alerts.add({text:"Copied to clipboard",class:""},3000);});let check=function(){if(!element.value){return;}
|
||||
let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}catch(error){value=element.value;}
|
||||
code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
|
|
29
public/scripts/views/forms/add.js
Normal file
29
public/scripts/views/forms/add.js
Normal file
|
@ -0,0 +1,29 @@
|
|||
(function(window) {
|
||||
"use strict";
|
||||
|
||||
window.ls.container.get("view").add({
|
||||
selector: "data-forms-add",
|
||||
repeat: false,
|
||||
controller: function(element, view, container) {
|
||||
var button = document.createElement("button");
|
||||
let template = element.children[0].cloneNode(true);
|
||||
let as = element.getAttribute('data-ls-as');
|
||||
|
||||
button.type = "button";
|
||||
button.innerText = "Add";
|
||||
button.classList.add("reverse");
|
||||
|
||||
button.addEventListener('click', function() {
|
||||
container.set(as, null, true, true);
|
||||
|
||||
let child = template.cloneNode(true);
|
||||
|
||||
element.appendChild(child);
|
||||
|
||||
view.render(child);
|
||||
});
|
||||
|
||||
element.after(button);
|
||||
}
|
||||
});
|
||||
})(window);
|
Loading…
Reference in a new issue