Commits

Mark Lavin  committed 312eb50

Additional deck postions and styles. see #2.

  • Participants
  • Parent commits 0efece0

Comments (0)

Files changed (3)

File selectable/forms/widgets.py

 
     def __init__(self, lookup_class, *args, **kwargs):
         self.lookup_class = lookup_class
+        position = kwargs.pop('position', 'bottom')
+        attrs = {
+            u'data-selectable-multiple': 'true',
+            u'data-selectable-position': position
+        }
         widgets = [
-            AutoCompleteWidget(lookup_class, allow_new=False, attrs={u'data-selectable-multiple': 'true'}),
+            AutoCompleteWidget(lookup_class, allow_new=False, attrs=attrs),
             LookupMultipleHiddenInput(lookup_class)
         ]
         super(AutoCompleteSelectMultipleWidget, self).__init__(widgets, *args, **kwargs)
 
     def __init__(self, lookup_class, *args, **kwargs):
         self.lookup_class = lookup_class
+        position = kwargs.pop('position', 'bottom')
+        attrs = {
+            u'data-selectable-multiple': 'true',
+            u'data-selectable-position': position
+        }
         widgets = [
-            AutoComboboxWidget(lookup_class, allow_new=False, attrs={u'data-selectable-multiple': 'true'}),
+            AutoComboboxWidget(lookup_class, allow_new=False, attrs=attrs),
             LookupMultipleHiddenInput(lookup_class)
         ]
         super(AutoComboboxSelectMultipleWidget, self).__init__(widgets, *args, **kwargs)

File selectable/static/css/dj.selectable.css

 ul.selectable-deck li.selectable-deck-item .selectable-deck-remove {
     float: right;
 }
-
+ul.selectable-deck-bottom-inline,
+ul.selectable-deck-top-inline {
+    padding: 0;
+}
+ul.selectable-deck-bottom-inline li.selectable-deck-item,
+ul.selectable-deck-top-inline li.selectable-deck-item {
+    display: inline;
+}
+ul.selectable-deck-bottom-inline li.selectable-deck-item .selectable-deck-remove,
+ul.selectable-deck-top-inline li.selectable-deck-item .selectable-deck-remove {
+    margin-left: 0.4em;
+    display: inline;
+    float: none;
+}

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

         
         _initDeck: function(hiddenInputs) {
             var self = this;
-            this.deck = $('<ul>').addClass('ui-widget selectable-deck');
-            $(this.element).after(this.deck);
+            var data = $(this.element).data();
+            var style = data['selectable-position'] || 'bottom';
+            this.deck = $('<ul>').addClass('ui-widget selectable-deck selectable-deck-' + style);
+            if (style === 'bottom' || style === 'bottom-inline') {
+                $(this.element).after(this.deck);
+            } else {
+                $(this.element).before(this.deck);
+            }
             $(hiddenInputs).each(function(i, input) {
                 self._addDeckItem(input);
             });