Mark Lavin avatar Mark Lavin committed e1389c2

Factor out combobutton and remove button creation. Remove div wrapper around remove button. Move input classes into plugin options. See #86

Comments (0)

Files changed (3)

selectable/static/selectable/js/jquery.dj.selectable.js

         options: {
             removeIcon: "ui-icon-close",
             comboboxIcon: "ui-icon-triangle-1-s",
+            defaultClasses: {
+                "text": "ui-widget ui-widget-content ui-corner-all",
+                "combobox": "ui-widget ui-widget-content ui-corner-left ui-combo-input"
+            },
             prepareQuery: null,
             highlightMatch: true,
             formatLabel: null
 
         _addDeckItem: function (input) {
             /* Add new deck list item from a given hidden input */
-            var self = this;
-            var li = $('<li>')
-            .addClass('selectable-deck-item');
+            var self = this,
+                li = $('<li>').addClass('selectable-deck-item'),
+                item = {element: self.element, input: input, wrapper: li, deck: self.deck},
+                button;
             li.html($(input).attr('title'));
-            var item = {element: self.element, input: input, wrapper: li, deck: self.deck};
             if (self._trigger("add", null, item) === false) {
                 input.remove();
             } else {
-                var button = $('<div>')
-                .addClass('selectable-deck-remove')
-                .append(
-                    $('<a>')
-                    .attr('href', '#')
-                    .button({
-                        icons: {
-                            primary: self.options.removeIcon
-                        },
-                        text: false
-                    })
-                    .click(function (e) {
-                        e.preventDefault();
-                        if (self._trigger("remove", e, item) !== false) {
-                            $(input).remove();
-                            li.remove();
-                        }
-                    })
-                );
+                button = this._removeButtonTemplate(item);
+                button.click(function (e) {
+                    e.preventDefault();
+                    if (self._trigger("remove", e, item) !== false) {
+                        $(input).remove();
+                        li.remove();
+                    }
+                });
                 li.append(button).appendTo(this.deck);
             }
         },
 
+        _removeButtonTemplate: function (item) {
+            var options = {
+                    icons: {
+                        primary: this.options.removeIcon
+                    },
+                    text: false
+                },
+                button = $('<a>')
+                .attr('href', '#')
+                .addClass('selectable-deck-remove')
+                .button(options);
+            return button;
+        },
+
         select: function (item, event) {
             /* Trigger selection of a given item.
             Item should contain two properties: id and value
             }
         },
 
+        _comboButtonTemplate: function (input) {
+            // Add show all items button
+            var options = {
+                    icons: {
+                        primary: this.options.comboboxIcon
+                    },
+                    text: false
+                },
+                button = $("<a>")
+                    .html("&nbsp;")
+                    .attr("tabIndex", -1)
+                    .attr("title", "Show All Items")
+                    .button(options)
+                    .removeClass("ui-corner-all")
+                    .addClass("ui-corner-right ui-button-icon ui-combo-button");
+            return button;
+        },
+
         _create: function () {
             /* Initialize a new selectable widget */
             var self = this,
             $input = $(this.element),
             data = $input.data(),
-            options;
+            options, button;
             this.url = data.selectableUrl || data['selectable-url'];
             this.allowNew = data.selectableAllowNew || data['selectable-allow-new'];
             this.allowMultiple = data.selectableMultiple || data['selectable-multiple'];
             // Call super-create
             // This could be replaced by this._super() with jQuery UI 1.9
             $.ui.autocomplete.prototype._create.call(this);
-            $input.addClass("ui-widget ui-widget-content ui-corner-all");
+            $input.addClass(this.options.defaultClasses[this.selectableType]);
             // Additional work for combobox widgets
             if (this.selectableType === 'combobox') {
-                $input.removeClass("ui-corner-all")
-                .addClass("ui-corner-left ui-combo-input");
                 // Add show all items button
-                $("<a>").html("&nbsp;").attr("tabIndex", -1).attr("title", "Show All Items")
-                .insertAfter($input)
-                .button({
-                    icons: {
-                        primary: this.options.comboboxIcon
-                    },
-                    text: false
-                })
-                .removeClass("ui-corner-all")
-                .addClass("ui-corner-right ui-button-icon ui-combo-button")
-                .click(function (e) {
+                button = this._comboButtonTemplate($input);
+                button.insertAfter($input).click(function (e) {
                     e.preventDefault();
                     // close if already visible
                     if (self.widget().is(":visible")) {
             var label = item.label,
                 self = this,
                 $input = $(this.element),
-                re = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
-                $.ui.autocomplete.escapeRegex(this.term) +
-                ")(?![^<>]*>)(?![^&;]+;)", "gi"),
-                 html, li;
+                re, html, li;
             if (this.options.formatLabel && !item.page) {
                 label = this.options.formatLabel.apply(this, [label, item]);
             }
             if (this.options.highlightMatch && this.term && !item.page) {
+                re = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
+                    $.ui.autocomplete.escapeRegex(this.term) +
+                    ")(?![^<>]*>)(?![^&;]+;)", "gi");
                 if (label.html) {
                     html = label.html();
                     html = html.replace(re, "<span class='highlight'>$1</span>");

selectable/tests/qunit/index.html

     <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css" media="screen">
     <script src="jquery-loader.js"></script>
     <script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>
-    <script src="http://sinonjs.org/releases/sinon-1.5.2.js"></script>
+    <script src="sinon-1.5.2.js"></script>
     <script src="helpers.js"></script>
     <script>QUnit.config.autostart = false;</script>
     <script data-main="main" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js"></script>

selectable/tests/qunit/test-events.js

             count = count + 1;
         });
         this.textInput.djselectable('select', item);
-        $('.selectable-deck-remove a', deck).click();
+        $('.selectable-deck-remove', deck).click();
         equal(count, 1, "djselectableremove should fire once when item is removed.");
     });
 
         });
         var item = {id: "1", value: 'foo'};
         this.textInput.djselectable('select', item);
-        $('.selectable-deck-remove a', deck).click();
+        $('.selectable-deck-remove', deck).click();
         equal($('li', deck).length, 1, "Item should not be removed.");
     });
 });
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.