From 461e6562ca4309937e9de5083d8ea736adfba93a Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 21 Jun 2018 10:46:07 +0100 Subject: [PATCH] Allow typedInputs to have options plus value --- editor/js/ui/common/typedInput.js | 222 +++++++++++++++++++------- editor/sass/ui/common/typedInput.scss | 29 ++-- 2 files changed, 179 insertions(+), 72 deletions(-) diff --git a/editor/js/ui/common/typedInput.js b/editor/js/ui/common/typedInput.js index f5227fd68..bc6a71674 100644 --- a/editor/js/ui/common/typedInput.js +++ b/editor/js/ui/common/typedInput.js @@ -98,14 +98,17 @@ var that = this; this.disarmClick = false; + this.input = $(''); + this.input.insertAfter(this.element); + this.input.val(this.element.val()); this.element.addClass('red-ui-typedInput'); this.uiWidth = this.element.outerWidth(); - this.elementDiv = this.element.wrap("
").parent().addClass('red-ui-typedInput-input'); + this.elementDiv = this.input.wrap("
").parent().addClass('red-ui-typedInput-input'); this.uiSelect = this.elementDiv.wrap( "
" ).parent(); var attrStyle = this.element.attr('style'); var m; if ((m = /width\s*:\s*(calc\s*\(.*\)|\d+(%|px))/i.exec(attrStyle)) !== null) { - this.element.css('width','100%'); + this.input.css('width','100%'); this.uiSelect.width(m[1]); this.uiWidth = null; } else { @@ -114,17 +117,19 @@ ["Right","Left"].forEach(function(d) { var m = that.element.css("margin"+d); that.uiSelect.css("margin"+d,m); - that.element.css("margin"+d,0); + that.input.css("margin"+d,0); }); + this.uiSelect.addClass("red-ui-typedInput-container"); + this.element.attr('type','hidden'); + this.options.types = this.options.types||Object.keys(allOptions); this.selectTrigger = $('').prependTo(this.uiSelect); - if (this.options.types.length > 1) { - $('').appendTo(this.selectTrigger); - } - this.selectLabel = $('').appendTo(this.selectTrigger); + $('').toggle(this.options.types.length > 1).appendTo(this.selectTrigger); + + this.selectLabel = $('').appendTo(this.selectTrigger); this.types(this.options.types); @@ -138,14 +143,16 @@ this.typeField = $("",{type:'hidden'}).appendTo(this.uiSelect); } - this.element.on('focus', function() { + this.input.on('focus', function() { that.uiSelect.addClass('red-ui-typedInput-focus'); }); - this.element.on('blur', function() { + this.input.on('blur', function() { that.uiSelect.removeClass('red-ui-typedInput-focus'); }); - this.element.on('change', function() { + this.input.on('change', function() { that.validate(); + that.element.val(that.value()); + that.element.trigger('change',that.propertyType,that.value()); }) this.selectTrigger.click(function(event) { event.preventDefault(); @@ -161,7 +168,7 @@ }) // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline' - this.optionSelectTrigger = $('').appendTo(this.uiSelect); + this.optionSelectTrigger = $('').appendTo(this.uiSelect); this.optionSelectLabel = $('').prependTo(this.optionSelectTrigger); this.optionSelectTrigger.click(function(event) { event.preventDefault(); @@ -177,9 +184,7 @@ that.uiSelect.addClass('red-ui-typedInput-focus'); }); - this.optionExpandButton = $('').appendTo(this.uiSelect); - - + this.optionExpandButton = $('').appendTo(this.uiSelect); this.type(this.options.default||this.typeList[0].value); }, _showTypeMenu: function() { @@ -187,7 +192,7 @@ this._showMenu(this.menu,this.selectTrigger); this.menu.find("[value='"+this.propertyType+"']").focus(); } else { - this.element.focus(); + this.input.focus(); } }, _showOptionSelectMenu: function() { @@ -196,8 +201,8 @@ minWidth:this.optionSelectLabel.width() }); - this._showMenu(this.optionMenu,this.optionSelectLabel); - var selectedOption = this.optionMenu.find("[value='"+this.value()+"']"); + this._showMenu(this.optionMenu,this.optionSelectTrigger); + var selectedOption = this.optionMenu.find("[value='"+this.optionValue+"']"); if (selectedOption.length === 0) { selectedOption = this.optionMenu.children(":first"); } @@ -209,7 +214,7 @@ $(document).off("mousedown.close-property-select"); menu.hide(); if (this.elementDiv.is(":visible")) { - this.element.focus(); + this.input.focus(); } else if (this.optionSelectTrigger.is(":visible")){ this.optionSelectTrigger.focus(); } else { @@ -228,10 +233,19 @@ op.text(opt.label); } if (opt.icon) { - $('',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op); + if (opt.icon.indexOf("<") === 0) { + $(opt.icon).prependTo(op); + } else if (opt.icon.indexOf("/") !== -1) { + $('',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op); + } else { + $('',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(op); + } } else { op.css({paddingLeft: "18px"}); } + if (!opt.icon && !opt.label) { + op.text(opt.value); + } op.click(function(event) { event.preventDefault(); @@ -310,7 +324,8 @@ if (this.uiWidth !== null) { this.uiSelect.width(this.uiWidth); } - if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) { + var type = this.typeMap[this.propertyType]; + if (type && type.hasValue === false) { this.selectTrigger.addClass("red-ui-typedInput-full-width"); } else { this.selectTrigger.removeClass("red-ui-typedInput-full-width"); @@ -320,12 +335,64 @@ this.elementDiv.css('right',"22px"); } else { this.elementDiv.css('right','0'); + this.input.css({ + 'border-top-right-radius': '4px', + 'border-bottom-right-radius': '4px' + }); } + + // if (this.optionSelectTrigger) { + // this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'}); + // } + if (this.optionSelectTrigger) { - this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'}); + if (type && type.options && type.hasValue === true) { + this.optionSelectLabel.css({'left':'auto'}) + var lw = this._getLabelWidth(this.optionSelectLabel); + this.optionSelectTrigger.css({'width':(23+lw)+"px"}); + this.elementDiv.css('right',(23+lw)+"px"); + this.input.css({ + 'border-top-right-radius': 0, + 'border-bottom-right-radius': 0 + }); + } else { + this.optionSelectLabel.css({'left':'0'}) + this.optionSelectTrigger.css({'width':'calc( 100% - '+labelWidth+'px )'}); + if (!this.optionExpandButton.is(":visible")) { + this.elementDiv.css({'right':0}); + this.input.css({ + 'border-top-right-radius': '4px', + 'border-bottom-right-radius': '4px' + }); + } + } } } }, + _updateOptionSelectLabel: function(o) { + var opt = this.typeMap[this.propertyType]; + this.optionSelectLabel.empty(); + if (o.icon) { + if (o.icon.indexOf("<") === 0) { + $(o.icon).prependTo(this.optionSelectLabel); + } else if (o.icon.indexOf("/") !== -1) { + // url + $('',{src:o.icon,style:"height: 18px;"}).prependTo(this.optionSelectLabel); + } else { + // icon class + $('',{class:"red-ui-typedInput-icon "+o.icon}).prependTo(this.optionSelectLabel); + } + } else if (o.label) { + this.optionSelectLabel.text(o.label); + } else { + this.optionSelectLabel.text(o.value); + } + if (opt.hasValue) { + this.optionValue = o.value; + this._resize(); + this.input.trigger('change',this.propertyType,this.value()); + } + }, _destroy: function() { this.menu.remove(); }, @@ -344,6 +411,7 @@ return result; }); this.selectTrigger.toggleClass("disabled", this.typeList.length === 1); + this.selectTrigger.find(".fa-sort-desc").toggle(this.typeList.length > 1) if (this.menu) { this.menu.remove(); } @@ -351,6 +419,7 @@ if (currentType && !this.typeMap.hasOwnProperty(currentType)) { this.type(this.typeList[0].value); } + setTimeout(function() {that._resize();},0); }, width: function(desiredWidth) { this.uiWidth = desiredWidth; @@ -358,33 +427,33 @@ }, value: function(value) { if (!arguments.length) { - return this.element.val(); + var v = this.input.val(); + if (this.typeMap[this.propertyType].export) { + v = this.typeMap[this.propertyType].export(v,this.optionValue) + } + return v; } else { + var selectedOption; if (this.typeMap[this.propertyType].options) { - var validValue = false; - var label; for (var i=0;i