ko hidden: use html5 hidden attribute

ko visible: rollback to use style.display
This commit is contained in:
djmaze 2020-10-11 11:59:36 +02:00
parent 52e6b9b0ed
commit c2a5d0fda5
7 changed files with 21 additions and 15 deletions

View file

@ -21,7 +21,7 @@ class LoginAdminView extends AbstractViewNext {
this.mobile = !!appSettingsGet('mobile');
this.mobileDevice = !!appSettingsGet('mobileDevice');
this.hideSubmitButton = appSettingsGet('hideSubmitButton') ? '' : null;
this.hideSubmitButton = appSettingsGet('hideSubmitButton');
this.login = ko.observable('');
this.password = ko.observable('');

View file

@ -35,7 +35,7 @@ class LoginUserView extends AbstractViewNext {
constructor() {
super();
this.hideSubmitButton = Settings.app('hideSubmitButton') ? '' : null;
this.hideSubmitButton = Settings.app('hideSubmitButton');
this.welcome = ko.observable(!!Settings.get('UseLoginWelcomePage'));

View file

@ -33,7 +33,7 @@
</span>
</div>
</div>
<div class="controls controls-submit-wrp" data-bind="attr: { hidden: hideSubmitButton }">
<div class="controls controls-submit-wrp" data-bind="hidden: hideSubmitButton">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
<span data-i18n="LOGIN/BUTTON_LOGIN"></span>
</button>

View file

@ -12,7 +12,7 @@
<span class="desc" data-bind="text: loginDescription"></span>
</div>
{{INCLUDE/AfterLogo/PLACE}}
<div class="alert alertError" data-bind="attr: { hidden: '' === submitError() ? '' : null }" hidden="">
<div class="alert alertError" data-bind="hidden: !submitError()" hidden="">
<button type="button" class="close" data-bind="click: function () { submitError('') }">&times;</button>
<span data-bind="text: submitError"></span>
<div data-bind="visible: '' !== submitErrorAddidional()">
@ -81,7 +81,7 @@
}"></div>
</div>
{{INCLUDE/BottomControlGroup/PLACE}}
<div class="controls controls-submit-wrp" data-bind="attr: { hidden: hideSubmitButton }">
<div class="controls controls-submit-wrp" data-bind="hidden: hideSubmitButton">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN"></span>
</button>

View file

@ -4135,14 +4135,14 @@ ko.bindingHandlers['visible'] = {
var isCurrentlyVisible = !(element.style.display == "none");
if (value && !isCurrentlyVisible)
element.style.display = "";
else if ((!value) && isCurrentlyVisible)
else if (isCurrentlyVisible && !value)
element.style.display = "none";
}
};
ko.bindingHandlers['hidden'] = {
'update': (element, valueAccessor) =>
ko.bindingHandlers['visible']['update'](element, () => !ko.utils.unwrapObservable(valueAccessor()) )
element.hidden = !!ko.utils.unwrapObservable(valueAccessor())
};
// 'click' is just a shorthand for the usual full-length event:{click:handler}
makeEventHandlerShortcut('click');

View file

@ -82,12 +82,12 @@ a.a.kb(x,u));return[x]},c,k);if(!m){var w;d?w=n.length&&g().length<n.length:w=n.
d)=>d.toUpperCase());var f=b.style[e];b.style[e]=g;g===f||b.style[e]!=f||isNaN(g)||(b.style[e]=g+"px")}})}};a.g.submit={init:(b,c,e,g,f)=>{if("function"!=typeof c())throw Error("The value for a submit binding must be a function");a.a.L(b,"submit",h=>{var d=c();try{var l=d.call(f.$data,b)}finally{!0!==l&&(h.preventDefault?h.preventDefault():h.returnValue=!1)}})}};a.g.text={init:()=>({controlsDescendantBindings:!0}),update:(b,c)=>a.a.kb(b,c())};a.c.ja.text=!0;a.g.textInput={init:(b,c,e)=>{var g=b.value,
f,h,d=()=>{clearTimeout(f);h=f=void 0;var k=b.value;g!==k&&(g=k,a.u.$b(c(),e,"textInput",k))},l=()=>{var k=a.a.i(c());if(null===k||void 0===k)k="";void 0!==h&&k===h?a.a.setTimeout(l,4):b.value!==k&&(b.value=k,g=b.value)};a.a.L(b,"input",d);a.a.L(b,"change",d);a.a.L(b,"blur",d);a.m(l,null,{l:b})}};a.u.ob.textInput=!0;a.g.textinput={preprocess:(b,c,e)=>e("textInput",b)};a.g.value={init:(b,c,e)=>{var g=a.a.ia(b),f="input"==g;if(!f||"checkbox"!=b.type&&"radio"!=b.type){var h=[],d=e.get("valueUpdate"),
l=null;d&&("string"==typeof d?h=[d]:h=d?d.filter((q,t)=>d.indexOf(q)===t):[],a.a.Da(h,"change"));var k=()=>{l=null;var q=c(),t=a.v.N(b);a.u.$b(q,e,"value",t)};a.a.X(h,q=>{var t=k;a.a.ud(q,"after")&&(t=()=>{l=a.v.N(b);a.a.setTimeout(k,0)},q=q.substring(5));a.a.L(b,q,t)});var m=f&&"file"==b.type?()=>{var q=a.a.i(c());null===q||void 0===q||""===q?b.value="":a.o.I(k)}:()=>{var q=a.a.i(c()),t=a.v.N(b);if(null!==l&&q===l)a.a.setTimeout(m,0);else if(q!==t||void 0===t)"select"===g?(t=e.get("valueAllowUnset"),
a.v.Ra(b,q,t),t||q===a.v.N(b)||a.o.I(k)):a.v.Ra(b,q)};if("select"===g){var n;a.h.subscribe(b,a.h.G,()=>{n?e.get("valueAllowUnset")?m():k():(a.a.L(b,"change",k),n=a.m(m,null,{l:b}))},null,{notifyImmediately:!0})}else a.a.L(b,"change",k),a.m(m,null,{l:b})}else a.Va(b,{checkedValue:c})},update:()=>{}};a.u.ob.value=!0;a.g.visible={update:(b,c)=>{c=a.a.i(c());var e="none"!=b.style.display;c&&!e?b.style.display="":!c&&e&&(b.style.display="none")}};a.g.hidden={update:(b,c)=>a.g.visible.update(b,()=>!a.a.i(c()))};
(function(b){a.g[b]={init:function(c,e,g,f,h){return a.g.event.init.call(this,c,()=>{var d={};d[b]=e();return d},g,f,h)}}})("click");a.da=function(){};a.da.prototype.renderTemplateSource=()=>{throw Error("Override renderTemplateSource");};a.da.prototype.createJavaScriptEvaluatorBlock=()=>{throw Error("Override createJavaScriptEvaluatorBlock");};a.da.prototype.makeTemplateSource=(b,c)=>{if("string"==typeof b){c=c||W;c=c.getElementById(b);if(!c)throw Error("Cannot find template with ID "+b);return new a.B.C(c)}if(1==
b.nodeType||8==b.nodeType)return new a.B.fa(b);throw Error("Unknown template type: "+b);};a.da.prototype.renderTemplate=function(b,c,e,g){b=this.makeTemplateSource(b,g);return this.renderTemplateSource(b,c,e,g)};a.da.prototype.isTemplateRewritten=function(b,c){return!1===this.allowTemplateRewriting?!0:this.makeTemplateSource(b,c).data("isRewritten")};a.da.prototype.rewriteTemplate=function(b,c,e){b=this.makeTemplateSource(b,e);c=c(b.text());b.text(c);b.data("isRewritten",!0)};a.b("templateEngine",
a.da);a.Yb=(()=>{function b(g,f,h,d){g=a.u.Nb(g);for(var l=a.u.Fa,k=0;k<g.length;k++){var m=g[k].key;if(Object.prototype.hasOwnProperty.call(l,m)){var n=l[m];if("function"===typeof n){if(m=n(g[k].value))throw Error(m);}else if(!n)throw Error("This template engine does not support the '"+m+"' binding within its templates");}}h="ko.__tr_ambtns(function($context,$element){return(function(){return{ "+a.u.Ob(g,{valueAccessors:!0})+" } })()},'"+h.toLowerCase()+"')";return d.createJavaScriptEvaluatorBlock(h)+
f}var c=/(<([a-z]+\d*)(?:\s+(?!data-bind\s*=\s*)[a-z0-9\-]+(?:=(?:"[^"]*"|'[^']*'|[^>]*))?)*\s+)data-bind\s*=\s*(["'])([\s\S]*?)\3/gi,e=/\x3c!--\s*ko\b\s*([\s\S]*?)\s*--\x3e/g;return{cd:(g,f,h)=>{f.isTemplateRewritten(g,h)||f.rewriteTemplate(g,d=>a.Yb.od(d,f),h)},od:(g,f)=>g.replace(c,(...h)=>b(h[4],h[1],h[2],f)).replace(e,(...h)=>b(h[1],"\x3c!-- ko --\x3e","#comment",f)),Vc:(g,f)=>a.V.Jb((h,d)=>{(h=h.nextSibling)&&h.nodeName.toLowerCase()===f&&a.Va(h,g,d)})}})();a.b("__tr_ambtns",a.Yb.Vc);(()=>{a.B=
{};a.B.C=function(e){if(this.C=e){var g=a.a.ia(e);this.Na="script"===g?1:"textarea"===g?2:"template"==g&&e.content&&11===e.content.nodeType?3:4}};a.B.C.prototype.text=function(){var e=1===this.Na?"text":2===this.Na?"value":"innerHTML";if(0==arguments.length)return this.C[e];var g=arguments[0];"innerHTML"===e?a.a.Ub(this.C,g):this.C[e]=g};var b=a.a.f.ca()+"_";a.B.C.prototype.data=function(e){if(1===arguments.length)return a.a.f.get(this.C,b+e);a.a.f.set(this.C,b+e,arguments[1])};var c=a.a.f.ca();a.B.C.prototype.nodes=
a.v.Ra(b,q,t),t||q===a.v.N(b)||a.o.I(k)):a.v.Ra(b,q)};if("select"===g){var n;a.h.subscribe(b,a.h.G,()=>{n?e.get("valueAllowUnset")?m():k():(a.a.L(b,"change",k),n=a.m(m,null,{l:b}))},null,{notifyImmediately:!0})}else a.a.L(b,"change",k),a.m(m,null,{l:b})}else a.Va(b,{checkedValue:c})},update:()=>{}};a.u.ob.value=!0;a.g.visible={update:(b,c)=>{c=a.a.i(c());var e="none"!=b.style.display;c&&!e?b.style.display="":e&&!c&&(b.style.display="none")}};a.g.hidden={update:(b,c)=>b.hidden=!!a.a.i(c())};(function(b){a.g[b]=
{init:function(c,e,g,f,h){return a.g.event.init.call(this,c,()=>{var d={};d[b]=e();return d},g,f,h)}}})("click");a.da=function(){};a.da.prototype.renderTemplateSource=()=>{throw Error("Override renderTemplateSource");};a.da.prototype.createJavaScriptEvaluatorBlock=()=>{throw Error("Override createJavaScriptEvaluatorBlock");};a.da.prototype.makeTemplateSource=(b,c)=>{if("string"==typeof b){c=c||W;c=c.getElementById(b);if(!c)throw Error("Cannot find template with ID "+b);return new a.B.C(c)}if(1==b.nodeType||
8==b.nodeType)return new a.B.fa(b);throw Error("Unknown template type: "+b);};a.da.prototype.renderTemplate=function(b,c,e,g){b=this.makeTemplateSource(b,g);return this.renderTemplateSource(b,c,e,g)};a.da.prototype.isTemplateRewritten=function(b,c){return!1===this.allowTemplateRewriting?!0:this.makeTemplateSource(b,c).data("isRewritten")};a.da.prototype.rewriteTemplate=function(b,c,e){b=this.makeTemplateSource(b,e);c=c(b.text());b.text(c);b.data("isRewritten",!0)};a.b("templateEngine",a.da);a.Yb=
(()=>{function b(g,f,h,d){g=a.u.Nb(g);for(var l=a.u.Fa,k=0;k<g.length;k++){var m=g[k].key;if(Object.prototype.hasOwnProperty.call(l,m)){var n=l[m];if("function"===typeof n){if(m=n(g[k].value))throw Error(m);}else if(!n)throw Error("This template engine does not support the '"+m+"' binding within its templates");}}h="ko.__tr_ambtns(function($context,$element){return(function(){return{ "+a.u.Ob(g,{valueAccessors:!0})+" } })()},'"+h.toLowerCase()+"')";return d.createJavaScriptEvaluatorBlock(h)+f}var c=
/(<([a-z]+\d*)(?:\s+(?!data-bind\s*=\s*)[a-z0-9\-]+(?:=(?:"[^"]*"|'[^']*'|[^>]*))?)*\s+)data-bind\s*=\s*(["'])([\s\S]*?)\3/gi,e=/\x3c!--\s*ko\b\s*([\s\S]*?)\s*--\x3e/g;return{cd:(g,f,h)=>{f.isTemplateRewritten(g,h)||f.rewriteTemplate(g,d=>a.Yb.od(d,f),h)},od:(g,f)=>g.replace(c,(...h)=>b(h[4],h[1],h[2],f)).replace(e,(...h)=>b(h[1],"\x3c!-- ko --\x3e","#comment",f)),Vc:(g,f)=>a.V.Jb((h,d)=>{(h=h.nextSibling)&&h.nodeName.toLowerCase()===f&&a.Va(h,g,d)})}})();a.b("__tr_ambtns",a.Yb.Vc);(()=>{a.B={};a.B.C=
function(e){if(this.C=e){var g=a.a.ia(e);this.Na="script"===g?1:"textarea"===g?2:"template"==g&&e.content&&11===e.content.nodeType?3:4}};a.B.C.prototype.text=function(){var e=1===this.Na?"text":2===this.Na?"value":"innerHTML";if(0==arguments.length)return this.C[e];var g=arguments[0];"innerHTML"===e?a.a.Ub(this.C,g):this.C[e]=g};var b=a.a.f.ca()+"_";a.B.C.prototype.data=function(e){if(1===arguments.length)return a.a.f.get(this.C,b+e);a.a.f.set(this.C,b+e,arguments[1])};var c=a.a.f.ca();a.B.C.prototype.nodes=
function(){var e=this.C;if(0==arguments.length){var g=a.a.f.get(e,c)||{},f=g.Xa||(3===this.Na?e.content:4===this.Na?e:void 0);if(!f||g.Sc){var h=this.text();h&&h!==g.Oa&&(f=a.a.qd(h,e.ownerDocument),a.a.f.set(e,c,{Xa:f,Oa:h,Sc:!0}))}return f}g=arguments[0];void 0!==this.Na&&this.text("");a.a.f.set(e,c,{Xa:g})};a.B.fa=function(e){this.C=e};a.B.fa.prototype=new a.B.C;a.B.fa.prototype.constructor=a.B.fa;a.B.fa.prototype.text=function(){if(0==arguments.length){var e=a.a.f.get(this.C,c)||{};void 0===e.Oa&&
e.Xa&&(e.Oa=e.Xa.innerHTML);return e.Oa}a.a.f.set(this.C,c,{Oa:arguments[0]})};a.b("templateSources",a.B);a.b("templateSources.domElement",a.B.C);a.b("templateSources.anonymousTemplate",a.B.fa)})();(function(){function b(k,m,n){var q;for(m=a.c.nextSibling(m);k&&(q=k)!==m;)k=a.c.nextSibling(q),n(q,k)}function c(k,m){if(k.length){var n=k[0],q=k[k.length-1],t=n.parentNode,w=a.$.instance,u=w.preprocessNode;if(u){b(n,q,(x,p)=>{var r=x.previousSibling,v=u.call(w,x);v&&(x===n&&(n=v[0]||p),x===q&&(q=v[v.length-
1]||r))});k.length=0;if(!n)return;n===q?k.push(n):(k.push(n,q),a.a.Ia(k,t))}b(n,q,x=>{1!==x.nodeType&&8!==x.nodeType||a.lc(m,x)});b(n,q,x=>{1!==x.nodeType&&8!==x.nodeType||a.V.Mc(x,[m])});a.a.Ia(k,t)}}function e(k){return k.nodeType?k:0<k.length?k[0]:null}function g(k,m,n,q,t){t=t||{};var w=(k&&e(k)||n||{}).ownerDocument,u=t.templateEngine||h;a.Yb.cd(n,u,w);n=u.renderTemplate(n,q,t,w);if("number"!=typeof n.length||0<n.length&&"number"!=typeof n[0].nodeType)throw Error("Template engine must return an array of DOM nodes");

View file

@ -1,6 +1,12 @@
ko.bindingHandlers['visible'] = {
'update': (element, valueAccessor) =>
element.hidden = !ko.utils.unwrapObservable(valueAccessor())
'update': (element, valueAccessor) => {
var value = ko.utils.unwrapObservable(valueAccessor());
var isCurrentlyVisible = !(element.style.display == "none");
if (value && !isCurrentlyVisible)
element.style.display = "";
else if (isCurrentlyVisible && !value)
element.style.display = "none";
}
};
ko.bindingHandlers['hidden'] = {