Flexible templates (insert images before / after text regardless of rtl)

websemantics · Feb 8, 2016 · 9daf021 · 9daf021
1 parent 9715ac4
commit 9daf021
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
  |___|_| |_| |_|\__,_|\__, |\___| |____/ \___|_|\___|\___|\__|
  Web Semantics, Inc.  |___/                                   
 
- Version 1.4
+ Version 1.5
 ```
 
 We designed this plugin extension as a humanized UI element for social networking sites that need to faciliate relations between people. Research shows that people are extremely sensitvie to photos of others, so we needed to revamp the traditional UI elements to make them more intuitive and human.
@@ -51,6 +51,11 @@ $(".my-select").chosen();
 # Change Log
 All notable changes to this project will be documented in this section.
 
+## [1.5] - 2016-02-08
+### Changed
+- Flexible templates (insert images before / after text regardless of rtl)
+- Various code fixes
+
 ### [1.4] - 2015-08-18
 #### Changed
 - Use [Bower](http://bower.io/) for dependancies.
@@ -72,4 +77,3 @@ All notable changes to this project will be documented in this section.
 
 ## Related
 Chosen, http://github.com/harvesthq/chosen
-
diff --git a/dist/ImageSelect.jquery.js b/dist/ImageSelect.jquery.js
@@ -43,23 +43,30 @@ function prependTemplate(element, option, template, rtl, multiple, cls){
     // cls*: String (optional)
     //          Css styles class
 
-    if((src = $(option).data('img-src')) != undefined){
+    var src = $(option).data('img-src');
+
+    if(src != undefined && src > ''){
 
         element = $(element);
 
+        text     = $(option).val();
         multiple = (multiple != undefined) ? multiple : true;
         cls      = cls || (multiple ? 'chose-image' : 'chose-image-small');
         cls      = rtl ? cls + ' rtl' : cls;
-        template = template.replace('{url}',src).replace('{class_name}',cls);
+        template = template.replace('{url}',src)
+                           .replace('{class_name}',cls)
+                           .replace('{text}',text);
 
-        // If has an image, remove!
-        element.find('img').remove();
+        // Empty the element
+        element.empty();
 
         // Insert after if ltr or multiple select, otherwise, insert before
-        if(rtl && multiple)
+        if(rtl && multiple){
             element.append(template);
-        else 
+        }
+        else {
             element.prepend(template);
+        }
     }
 }
 
@@ -90,11 +97,9 @@ var fn_chosen = $.fn.chosen;
 $.fn.extend({
  // summery:
  //  Extend the original 'chosen' method to support images
- chosen: function(options) {
+ chosen: function(params) {
 
-    if (window.AbstractChosen && window.AbstractChosen.browser_is_supported() == false) return this;
-    options           = options || {};
-    var html_template = options.html_template || fn_template;
+    params = params || {};
 
     // Original behavior - use function.apply to preserve context
     var ret = fn_chosen.apply(this, arguments);
@@ -115,15 +120,14 @@ $.fn.extend({
             // _chosen: Object {chosen:Chosen}
             //      Contains the current instance of Chosen class
 
-            if(chosen.chosen){ 
-                var options = getSelectedOptions(chosen.chosen);
+            var options       = getSelectedOptions(chosen.chosen);
+            var rtl           = chosen.chosen.is_rtl;
+            var multiple      = chosen.chosen.is_multiple;
+            var html_template = params.html_template || 
+                                (rtl && multiple ? '{text}' + fn_template : fn_template + '{text}');
 
-                for (var i = 0; i < options.length; i++)
-                    prependTemplate(options[i].span, 
-                                    options[i].option, 
-                                    html_template, 
-                                    chosen.chosen.is_rtl, 
-                                    chosen.chosen.is_multiple);
+            for (var i = 0; i < options.length; i++){
+                prependTemplate(options[i].span, options[i].option, html_template, rtl, multiple);
             }
         })
 
@@ -137,8 +141,11 @@ $.fn.extend({
             // chosen: Object {chosen:Chosen}
             //      Contains the current instance of Chosen class
 
-            var chosen   = chosen.chosen;
-            var options  = chosen.form_field.options || [];
+            var chosen        = chosen.chosen;
+            var options       = chosen.form_field.options || [];
+            var rtl           = chosen.is_rtl;
+            var html_template = params.html_template || 
+                                rtl ? '{text}'+fn_template : fn_template+'{text}';
 
             var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')
 
@@ -150,8 +157,7 @@ $.fn.extend({
                 if (idx) /* correct option index */
                    option = options[chosen.results_data[idx].options_index];
 
-                prependTemplate(li, option, html_template, chosen.is_rtl, 
-                                true, 'chose-image-list');
+                prependTemplate(li, option, html_template, rtl, true, 'chose-image-list');
             }
         });
 

diff --git a/index.html b/index.html
@@ -125,9 +125,9 @@ <h3>
 <h3>
 <a class="anchor"><span class="octicon octicon-link"></span></a>Custom Style / Markup</h3>
 
-<p><b>Image Select</b> allows the customization of THML markup and styles it uses to insert images. For example, to style the image directly, add your own css classes, or define your own HTML markup which would include the image.</p>
+<p><b>Image Select</b> allows the customization of THML markup and styles it uses to insert images. For example, to style the image directly, add your own css classes, or define your own HTML markup which would include the image and text placement.</p>
 
-<p>The following example adds a black border to the images.</p>
+<p>The following example adds a black border to the images and places the text before the image (similar to <b>rtl</b> mode).</p>
 
  <select multiple="multiple" class="my-select-border">
      <option data-img-src="img/adnan.png">Adnan Sagar</option> 
@@ -141,7 +141,7 @@ <h3>
 
 <div class="js-code" >$(".my-select").chosen({
   width:"100%",
-  html_template: '<img style="border:3px solid black;padding:0px;margin-right:4px"  class="{class_name}" src="{url}" />'
+  html_template: '{text} <img style="border:3px solid black;padding:0px;margin-right:4px"  class="{class_name}" src="{url}" />'
 });</div>
 <br/>
 <p>Use the <i style="color:red">html_template</i> to write your own markup. Make sure you always include the two place hodlers <i style="color:red">{class_name}</i> and <i style="color:red">{url}</i>, which are being used internally to insert the approperiate class name, and image url for each options element</p>
@@ -256,7 +256,7 @@ <h3>
 
       $(".my-select-border").chosen({
         width:"100%",
-        html_template: '<img style="border:3px solid black;padding:0px;margin-right:4px"  class="{class_name}" src="{url}" />'
+        html_template: '{text} <img style="border:3px solid black;padding:0px;margin-right:4px"  class="{class_name}" src="{url}" />'
       });
 
     </script>