Inspector - added support for icons and images in the dropdown editor.

modules/system/assets/ui/js/inspector.editor.dropdown.js

@@ -54,11 +54,41 @@
         }
     }
 
+    DropdownEditor.prototype.formatSelectOption = function(state) {
+        if (!state.id)
+            return state.text; // optgroup
+
+        var option = state.element,
+            iconClass = option.getAttribute('data-icon'),
+            imageSrc = option.getAttribute('data-image')
+
+        if (iconClass) {
+            return '<i class="select-icon '+iconClass+'"></i> ' + state.text
+        }
+
+        if (imageSrc) {
+            return '<img class="select-image" src="'+imageSrc+'" alt="" /> ' + state.text
+        }
+
+        return state.text
+    }
+
     DropdownEditor.prototype.createOption = function(select, title, value) {
         var option = document.createElement('option')
 
         if (title !== null) {
-            option.textContent = title
+            if (!$.isArray(title)) {
+                option.textContent = title
+            } else {
+                if (title[1].indexOf('.') !== -1) {
+                    option.setAttribute('data-image', title[1])
+                }
+                else {
+                    option.setAttribute('data-icon', title[1])
+                }
+
+                option.textContent = title[0]
+            }
         }
 
         if (value !== null) {
@@ -89,6 +119,12 @@
             options.placeholder = this.propertyDefinition.placeholder
         }
 
+        options.templateResult = this.formatSelectOption
+        options.templateSelection = this.formatSelectOption
+        options.escapeMarkup = function(m) { 
+            return m 
+        }
+
         $(select).select2(options)
 
         if (!Modernizr.touch) {

modules/system/assets/ui/less/inspector.less

@@ -635,6 +635,10 @@ div.inspector-dictionary-container {
             li.select2-no-results {
                 padding: 5px 12px 5px;
             }
+
+            li > i, li > img {
+                margin-left: 6px;
+            }
         }
 
         .select2-search {

modules/system/assets/ui/storm-min.js

@@ -4192,8 +4192,15 @@ if(!this.dynamicOptions){this.loadStaticOptions(select)}
 this.containerCell.appendChild(select)
 this.initCustomSelect()
 if(this.dynamicOptions){this.loadDynamicOptions(true)}}
+DropdownEditor.prototype.formatSelectOption=function(state){if(!state.id)
+return state.text;var option=state.element,iconClass=option.getAttribute('data-icon'),imageSrc=option.getAttribute('data-image')
+if(iconClass){return'<i class="select-icon '+iconClass+'"></i> '+state.text}
+if(imageSrc){return'<img class="select-image" src="'+imageSrc+'" alt="" /> '+state.text}
+return state.text}
 DropdownEditor.prototype.createOption=function(select,title,value){var option=document.createElement('option')
-if(title!==null){option.textContent=title}
+if(title!==null){if(!$.isArray(title)){option.textContent=title}else{if(title[1].indexOf('.')!==-1){option.setAttribute('data-image',title[1])}
+else{option.setAttribute('data-icon',title[1])}
+option.textContent=title[0]}}
 if(value!==null){option.value=value}
 select.appendChild(option)}
 DropdownEditor.prototype.createOptions=function(select,options){for(var value in options){this.createOption(select,options[value],value)}}
@@ -4201,6 +4208,9 @@ DropdownEditor.prototype.initCustomSelect=function(){var select=this.getSelect()
 if(Modernizr.touch){return}
 var options={dropdownCssClass:'ocInspectorDropdown'}
 if(this.propertyDefinition.placeholder!==undefined){options.placeholder=this.propertyDefinition.placeholder}
+options.templateResult=this.formatSelectOption
+options.templateSelection=this.formatSelectOption
+options.escapeMarkup=function(m){return m}
 $(select).select2(options)
 if(!Modernizr.touch){this.indicatorContainer=$('.select2-container',this.containerCell)
 this.indicatorContainer.addClass('loading-indicator-container size-small')}}

modules/system/assets/ui/storm.css

@@ -2538,6 +2538,7 @@ div.inspector-dictionary-container table.inspector-dictionary-table tbody tr:las
 .select2-dropdown.ocInspectorDropdown > .select2-results > .select2-results__options{font-size:12px}
 .select2-dropdown.ocInspectorDropdown > .select2-results > li > div{padding:5px 12px 5px}
 .select2-dropdown.ocInspectorDropdown > .select2-results li.select2-no-results{padding:5px 12px 5px}
+.select2-dropdown.ocInspectorDropdown > .select2-results li > i,.select2-dropdown.ocInspectorDropdown > .select2-results li > img{margin-left:6px}
 .select2-dropdown.ocInspectorDropdown .select2-search{min-height:26px;position:relative;border-bottom:1px solid #b2b9be}
 .select2-dropdown.ocInspectorDropdown .select2-search:after{position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f002";right:10px;top:10px;color:#95a5a6}
 .select2-dropdown.ocInspectorDropdown .select2-search input.select2-search__field{min-height:26px;background:transparent !important;padding-left:12px;padding-right:12px;border:none}