support dropdown position

fortifi · Aug 8, 2018 · 7955890 · 7955890
1 parent 83eba20
commit 7955890
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/assets/js/GlobalElements.min.js b/assets/js/GlobalElements.min.js
diff --git a/assets_src/assets/js/GlobalElements/Dropdown/Dropdown.js b/assets_src/assets/js/GlobalElements/Dropdown/Dropdown.js
@@ -69,7 +69,7 @@
           self.reposition();
         }
       });
-      xhr.open('GET', this._action.attr('data-content-url'));
+      xhr.open('GET', this._options.contentUrl);
       xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
       xhr.setRequestHeader('X-Fortifi-Req-With', 'ui.dropdown');
       xhr.send();
@@ -101,29 +101,45 @@
       $content.css({left: '', top: ''});
 
       var
+        css = {},
         left = $action.offset().left,
-        right = left + $content.outerWidth(true),
-        top = $action.offset().top + $action.outerHeight(true);
+        right = left + $content.outerWidth(true);
 
       if(right > window.innerWidth - this._options.margin)
       {
-        left = Math.max(2, left - (right - window.innerWidth) - this._options.margin);
+        css.left = Math.max(2, left - (right - window.innerWidth) - this._options.margin);
+      }
+      else
+      {
+        css.left = left;
+      }
+
+      switch(this._options.position)
+      {
+        case 'top':
+          css.top = $action.offset().top - $content.outerHeight(true);
+          break;
+        case 'bottom':
+        default:
+          css.top = $action.offset().top + $action.outerHeight(true);
+          break;
       }
 
-      $content.css({left: left, top: top});
+      $content.css(css);
     }
   };
 
   Dropdown.prototype.init = function (options) {
     if(!this._isInitialised)
     {
       var self = this;
-      options = $.extend({margin: 10}, options);
+      console.log($(this._ele).data());
+      options = $.extend({margin: 10, position: 'bottom', contentUrl: null}, $(this._ele).data(), options);
       this._options = options;
 
       this._action = $(this._ele).on('click', this.toggle.bind(this));
 
-      if(this._action.attr('data-content-url'))
+      if(this._options.contentUrl)
       {
         this._action.on('mouseenter', function () {
           self.refreshContent();

diff --git a/example_src/Views/DropdownView.php b/example_src/Views/DropdownView.php
@@ -68,4 +68,18 @@ final public function textDropdown()
     $d->setContent($div);
     return $d;
   }
+
+  /**
+   * @group Dropdowns
+   */
+  final public function textDropup()
+  {
+    $div = Div::create('here is some content');
+
+    $d = Dropdown::i();
+    $d->setPosition('top');
+    $d->setAction('Simple text dropup');
+    $d->setContent($div);
+    return $d;
+  }
 }
diff --git a/src/GlobalElements/Dropdowns/Dropdown.php b/src/GlobalElements/Dropdowns/Dropdown.php
@@ -11,6 +11,7 @@ class Dropdown extends UiElement
   protected $_url;
   protected $_content;
   protected $_arrow;
+  protected $_position;
   protected $_classes = [];
 
   /**
@@ -44,6 +45,17 @@ public function getAction()
     return $this->_action;
   }
 
+  public function setPosition($position)
+  {
+    $this->_position = $position;
+    return $this;
+  }
+
+  public function getPosition()
+  {
+    return $this->_position;
+  }
+
   public function setArrow($bool = true)
   {
     $this->_arrow = $bool;
@@ -122,6 +134,11 @@ protected function _produceHtml()
       $actionContainer->addClass($class);
     }
 
+    if($this->getPosition())
+    {
+      $actionContainer->setAttribute('data-position', $this->getPosition());
+    }
+
     if($this->getUrl())
     {
       $actionContainer->setAttribute('data-content-url', $this->getUrl());