From 934f77a1f3e20a3cdec845d1108d1be27d74dc2a Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Wed, 29 Jul 2015 20:03:48 +1000 Subject: [PATCH] Implement dropdown-fixed mode. --- .../partials/_markdowneditor.htm | 4 +-- modules/system/assets/ui/js/dropdown.js | 32 ++++++++++++++++++- modules/system/assets/ui/js/toolbar.js | 14 -------- modules/system/assets/ui/less/toolbar.less | 5 ++- modules/system/assets/ui/storm-min.js | 15 ++++++--- modules/system/assets/ui/storm.css | 3 +- 6 files changed, 49 insertions(+), 24 deletions(-) diff --git a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm index 82c78cf83..0fe19745d 100644 --- a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm +++ b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm @@ -11,8 +11,8 @@
-
- +
+
  • Quote
  • Code
    • diff --git a/modules/system/assets/ui/js/dropdown.js b/modules/system/assets/ui/js/dropdown.js index 42cf556b5..97daab378 100644 --- a/modules/system/assets/ui/js/dropdown.js +++ b/modules/system/assets/ui/js/dropdown.js @@ -94,7 +94,7 @@ } }) - $(document).on('hidden.bs.dropdown', '.dropdown', function(){ + $(document).on('hidden.bs.dropdown', '.dropdown', function() { var dropdown = $(this).data('oc.dropdown') if (dropdown !== undefined) { dropdown.css('display', 'none') @@ -104,4 +104,34 @@ $(document.body).removeClass('dropdown-open'); }) + /* + * Fixed positioned dropdowns + * - Useful for dropdowns inside hidden overflow containers + */ + + var $dropdown, $container, $target + + function fixDropdownPosition() { + var position = $container.offset() + + $dropdown.css({ + position: 'fixed', + top: position.top - $(window).scrollTop() + $target.outerHeight(), + left: position.left + }) + } + + $(document).on('shown.bs.dropdown', '.dropdown.dropdown-fixed', function(event, eventData) { + $container = $(this) + $dropdown = $('.dropdown-menu', $container) + $target = $(eventData.relatedTarget) + fixDropdownPosition() + + $(window).on('scroll.oc.dropdown', fixDropdownPosition) + }) + + $(document).on('hidden.bs.dropdown', '.dropdown.dropdown-fixed', function() { + $(window).off('scroll.oc.dropdown', fixDropdownPosition) + }) + }(window.jQuery); \ No newline at end of file diff --git a/modules/system/assets/ui/js/toolbar.js b/modules/system/assets/ui/js/toolbar.js index 027874c70..ffc7c2f7a 100644 --- a/modules/system/assets/ui/js/toolbar.js +++ b/modules/system/assets/ui/js/toolbar.js @@ -50,20 +50,6 @@ update() }) - $el.on('shown.bs.dropdown', '.dropdown', function(event, eventData) { - var $this = $(this), - $dropdown = $('.dropdown-menu', $this), - $target = $(eventData.relatedTarget), - $window = $(window), - position = $this.offset() - - $dropdown.css({ - position: 'fixed', - top: position.top - $window.scrollTop() + $target.outerHeight(), - left: position.left - }) - }) - this.$el.one('dispose-control', this.proxy(this.dispose)) function update() { diff --git a/modules/system/assets/ui/less/toolbar.less b/modules/system/assets/ui/less/toolbar.less index a2c35f94b..c75be20c5 100644 --- a/modules/system/assets/ui/less/toolbar.less +++ b/modules/system/assets/ui/less/toolbar.less @@ -127,15 +127,18 @@ .border-bottom-radius(0); .toolbar-item { - .btn { + .btn, .btn-group, .dropdown { margin: 0; padding: 0; + } + .btn { text-align: center; height: 40px; width: 40px; line-height: 40px; zoom: 1; color: @color-toolbar-editor-btn-color; + background: transparent; .user-select(none); &:before { diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js index e3488d483..a62fd3107 100644 --- a/modules/system/assets/ui/storm-min.js +++ b/modules/system/assets/ui/storm-min.js @@ -1397,7 +1397,16 @@ if($('.dropdown-overlay',document.body).length==0){$(document.body).prepend($('< $(document).on('hidden.bs.dropdown','.dropdown',function(){var dropdown=$(this).data('oc.dropdown') if(dropdown!==undefined){dropdown.css('display','none') $(this).append(dropdown)} -$(document.body).removeClass('dropdown-open');})}(window.jQuery);+function($){'use strict';var dismiss='[data-dismiss="callout"]' +$(document.body).removeClass('dropdown-open');}) +var $dropdown,$container,$target +function fixDropdownPosition(){var position=$container.offset() +$dropdown.css({position:'fixed',top:position.top-$(window).scrollTop()+$target.outerHeight(),left:position.left})} +$(document).on('shown.bs.dropdown','.dropdown.dropdown-fixed',function(event,eventData){$container=$(this) +$dropdown=$('.dropdown-menu',$container) +$target=$(eventData.relatedTarget) +fixDropdownPosition() +$(window).on('scroll.oc.dropdown',fixDropdownPosition)}) +$(document).on('hidden.bs.dropdown','.dropdown.dropdown-fixed',function(){$(window).off('scroll.oc.dropdown',fixDropdownPosition)})}(window.jQuery);+function($){'use strict';var dismiss='[data-dismiss="callout"]' var Callout=function(el){$(el).on('click',dismiss,this.close)} Callout.prototype.close=function(e){var $this=$(this) var selector=$this.attr('data-target') @@ -1567,8 +1576,6 @@ var scrollClassContainer=options.scrollClassContainer!==undefined?options.scroll $el.dragScroll({scrollClassContainer:scrollClassContainer}) $('.form-control.growable',$toolbar).on('focus.toolbar',function(){update()}) $('.form-control.growable',$toolbar).on('blur.toolbar',function(){update()}) -$el.on('shown.bs.dropdown','.dropdown',function(event,eventData){var $this=$(this),$dropdown=$('.dropdown-menu',$this),$target=$(eventData.relatedTarget),$window=$(window),position=$this.offset() -$dropdown.css({position:'fixed',top:position.top-$window.scrollTop()+$target.outerHeight(),left:position.left})}) this.$el.one('dispose-control',this.proxy(this.dispose)) function update(){$(window).trigger('resize')}} Toolbar.prototype=Object.create(BaseProto) @@ -3760,8 +3767,6 @@ var scrollClassContainer=options.scrollClassContainer!==undefined?options.scroll $el.dragScroll({scrollClassContainer:scrollClassContainer}) $('.form-control.growable',$toolbar).on('focus.toolbar',function(){update()}) $('.form-control.growable',$toolbar).on('blur.toolbar',function(){update()}) -$el.on('shown.bs.dropdown','.dropdown',function(event,eventData){var $this=$(this),$dropdown=$('.dropdown-menu',$this),$target=$(eventData.relatedTarget),$window=$(window),position=$this.offset() -$dropdown.css({position:'fixed',top:position.top-$window.scrollTop()+$target.outerHeight(),left:position.left})}) this.$el.one('dispose-control',this.proxy(this.dispose)) function update(){$(window).trigger('resize')}} Toolbar.prototype=Object.create(BaseProto) diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index 2ffde4e13..f75fef11d 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -1432,7 +1432,8 @@ ul.status-list li span.status.info{background:#5bc0de} [data-control=toolbar]{white-space:nowrap;width:100%;overflow:hidden} #layout-side-panel .control-toolbar,.panel-contents .control-toolbar{padding:20px 0 20px 20px} .control-toolbar.edita-toolbar{padding:0;background:#dddddd;border-bottom-right-radius:0;border-bottom-left-radius:0} -.control-toolbar.edita-toolbar .toolbar-item .btn{margin:0;padding:0;text-align:center;height:40px;width:40px;line-height:40px;zoom:1;color:#404040;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} +.control-toolbar.edita-toolbar .toolbar-item .btn,.control-toolbar.edita-toolbar .toolbar-item .btn-group,.control-toolbar.edita-toolbar .toolbar-item .dropdown{margin:0;padding:0} +.control-toolbar.edita-toolbar .toolbar-item .btn{text-align:center;height:40px;width:40px;line-height:40px;zoom:1;color:#404040;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .control-toolbar.edita-toolbar .toolbar-item .btn:before{font-size:14px !important} .control-toolbar.edita-toolbar .toolbar-item .btn:hover{outline:none;background-color:#999999;color:#ffffff} .control-toolbar.edita-toolbar .toolbar-item .btn:active{outline:none;background-color:#404040;color:#ffffff}