Merge pull request mycolorway#543 from mycolorway/scl/add-toolbar-con…

…tainer-option ADD: toolbarScrollContainer for Toolbar
Malimalihoon · Jul 22, 2019 · 2d002a1 · 2d002a1
2 parents d7f3e06 + b0cb78e
commit 2d002a1
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 32 deletions.
diff --git a/lib/simditor.js b/lib/simditor.js
@@ -1,7 +1,7 @@
 /*!
-* Simditor v2.3.25
+* Simditor v2.3.26
 * http://simditor.tower.im/
-* 2019-05-01
+* 2019-07-22
 */
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
@@ -1924,7 +1924,8 @@ Toolbar = (function(superClass) {
     toolbar: true,
     toolbarFloat: true,
     toolbarHidden: false,
-    toolbarFloatOffset: 0
+    toolbarFloatOffset: 0,
+    toolbarScrollContainer: window
   };
 
   Toolbar.prototype._tpl = {
@@ -1933,7 +1934,7 @@ Toolbar = (function(superClass) {
   };
 
   Toolbar.prototype._init = function() {
-    var floatInitialized, initToolbarFloat, toolbarHeight;
+    var floatInitialized, initToolbarFloat, scrollContainerOffset, toolbarHeight;
     this.editor = this._module;
     if (!this.opts.toolbar) {
       return;
@@ -1956,35 +1957,39 @@ Toolbar = (function(superClass) {
       };
     })(this));
     if (!this.opts.toolbarHidden && this.opts.toolbarFloat) {
-      this.wrapper.css('top', this.opts.toolbarFloatOffset);
+      scrollContainerOffset = this.opts.toolbarScrollContainer === window ? {
+        top: 0,
+        left: 0
+      } : $(this.opts.toolbarScrollContainer).offset();
+      this.wrapper.css('top', scrollContainerOffset.top + this.opts.toolbarFloatOffset);
       toolbarHeight = 0;
       initToolbarFloat = (function(_this) {
         return function() {
           _this.wrapper.css('position', 'static');
           _this.wrapper.width('auto');
           _this.editor.util.reflow(_this.wrapper);
           _this.wrapper.width(_this.wrapper.outerWidth());
-          _this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left);
+          _this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left - scrollContainerOffset.left);
           _this.wrapper.css('position', '');
           toolbarHeight = _this.wrapper.outerHeight();
-          _this.editor.placeholderEl.css('top', toolbarHeight);
+          _this.editor.placeholderEl.css('top', scrollContainerOffset.top);
           return true;
         };
       })(this);
       floatInitialized = null;
-      $(window).on('resize.simditor-' + this.editor.id, function(e) {
+      $(this.opts.toolbarScrollContainer).on('resize.simditor-' + this.editor.id, function(e) {
         return floatInitialized = initToolbarFloat();
       });
-      $(window).on('scroll.simditor-' + this.editor.id, (function(_this) {
+      $(this.opts.toolbarScrollContainer).on('scroll.simditor-' + this.editor.id, (function(_this) {
         return function(e) {
           var bottomEdge, scrollTop, topEdge;
           if (!_this.wrapper.is(':visible')) {
             return;
           }
-          topEdge = _this.editor.wrapper.offset().top;
+          topEdge = _this.opts.toolbarScrollContainer === window ? _this.editor.wrapper.get(0).getBoundingClientRect().top : _this.editor.wrapper.offset().top - scrollContainerOffset.top;
           bottomEdge = topEdge + _this.editor.wrapper.outerHeight() - 80;
-          scrollTop = $(document).scrollTop() + _this.opts.toolbarFloatOffset;
-          if (scrollTop <= topEdge || scrollTop >= bottomEdge) {
+          scrollTop = $(_this.opts.toolbarScrollContainer).scrollTop() + _this.opts.toolbarFloatOffset;
+          if (topEdge > 0 || bottomEdge < 0) {
             _this.editor.wrapper.removeClass('toolbar-floating').css('padding-top', '');
             if (_this.editor.util.os.mobile) {
               return _this.wrapper.css('top', _this.opts.toolbarFloatOffset);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simditor",
-  "version": "2.3.25",
+  "version": "2.3.26",
   "description": "A simple online editor",
   "repository": {
     "type": "git",

diff --git a/site/assets/scripts/simditor.js b/site/assets/scripts/simditor.js
@@ -1919,7 +1919,8 @@ Toolbar = (function(superClass) {
     toolbar: true,
     toolbarFloat: true,
     toolbarHidden: false,
-    toolbarFloatOffset: 0
+    toolbarFloatOffset: 0,
+    toolbarScrollContainer: window
   };
 
   Toolbar.prototype._tpl = {
@@ -1928,7 +1929,7 @@ Toolbar = (function(superClass) {
   };
 
   Toolbar.prototype._init = function() {
-    var floatInitialized, initToolbarFloat, toolbarHeight;
+    var floatInitialized, initToolbarFloat, scrollContainerOffset, toolbarHeight;
     this.editor = this._module;
     if (!this.opts.toolbar) {
       return;
@@ -1951,35 +1952,39 @@ Toolbar = (function(superClass) {
       };
     })(this));
     if (!this.opts.toolbarHidden && this.opts.toolbarFloat) {
-      this.wrapper.css('top', this.opts.toolbarFloatOffset);
+      scrollContainerOffset = this.opts.toolbarScrollContainer === window ? {
+        top: 0,
+        left: 0
+      } : $(this.opts.toolbarScrollContainer).offset();
+      this.wrapper.css('top', scrollContainerOffset.top + this.opts.toolbarFloatOffset);
       toolbarHeight = 0;
       initToolbarFloat = (function(_this) {
         return function() {
           _this.wrapper.css('position', 'static');
           _this.wrapper.width('auto');
           _this.editor.util.reflow(_this.wrapper);
           _this.wrapper.width(_this.wrapper.outerWidth());
-          _this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left);
+          _this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left - scrollContainerOffset.left);
           _this.wrapper.css('position', '');
           toolbarHeight = _this.wrapper.outerHeight();
-          _this.editor.placeholderEl.css('top', toolbarHeight);
+          _this.editor.placeholderEl.css('top', scrollContainerOffset.top);
           return true;
         };
       })(this);
       floatInitialized = null;
-      $(window).on('resize.simditor-' + this.editor.id, function(e) {
+      $(this.opts.toolbarScrollContainer).on('resize.simditor-' + this.editor.id, function(e) {
         return floatInitialized = initToolbarFloat();
       });
-      $(window).on('scroll.simditor-' + this.editor.id, (function(_this) {
+      $(this.opts.toolbarScrollContainer).on('scroll.simditor-' + this.editor.id, (function(_this) {
         return function(e) {
           var bottomEdge, scrollTop, topEdge;
           if (!_this.wrapper.is(':visible')) {
             return;
           }
-          topEdge = _this.editor.wrapper.offset().top;
+          topEdge = _this.opts.toolbarScrollContainer === window ? _this.editor.wrapper.get(0).getBoundingClientRect().top : _this.editor.wrapper.offset().top - scrollContainerOffset.top;
           bottomEdge = topEdge + _this.editor.wrapper.outerHeight() - 80;
-          scrollTop = $(document).scrollTop() + _this.opts.toolbarFloatOffset;
-          if (scrollTop <= topEdge || scrollTop >= bottomEdge) {
+          scrollTop = $(_this.opts.toolbarScrollContainer).scrollTop() + _this.opts.toolbarFloatOffset;
+          if (topEdge > 0 || bottomEdge < 0) {
             _this.editor.wrapper.removeClass('toolbar-floating').css('padding-top', '');
             if (_this.editor.util.os.mobile) {
               return _this.wrapper.css('top', _this.opts.toolbarFloatOffset);

diff --git a/src/toolbar.coffee b/src/toolbar.coffee
@@ -8,6 +8,7 @@ class Toolbar extends SimpleModule
     toolbarFloat: true
     toolbarHidden: false
     toolbarFloatOffset: 0
+    toolbarScrollContainer: window
 
   _tpl:
     wrapper: '<div class="simditor-toolbar"><ul></ul></div>'
@@ -34,7 +35,8 @@ class Toolbar extends SimpleModule
       @list.find('.menu-on').removeClass('.menu-on')
 
     if not @opts.toolbarHidden and @opts.toolbarFloat
-      @wrapper.css 'top', @opts.toolbarFloatOffset
+      scrollContainerOffset = if @opts.toolbarScrollContainer == window then {top: 0, left: 0} else $(@opts.toolbarScrollContainer).offset()
+      @wrapper.css 'top', scrollContainerOffset.top + @opts.toolbarFloatOffset
       toolbarHeight = 0
 
       initToolbarFloat = =>
@@ -45,23 +47,30 @@ class Toolbar extends SimpleModule
         @wrapper.css 'left', if @editor.util.os.mobile
           @wrapper.position().left
         else
-          @wrapper.offset().left
+          @wrapper.offset().left - scrollContainerOffset.left
         @wrapper.css 'position', ''
         toolbarHeight = @wrapper.outerHeight()
-        @editor.placeholderEl.css 'top', toolbarHeight
+        @editor.placeholderEl.css 'top', scrollContainerOffset.top
         true
 
       floatInitialized = null
       $(window).on 'resize.simditor-' + @editor.id, (e) ->
         floatInitialized = initToolbarFloat()
 
-      $(window).on 'scroll.simditor-' + @editor.id, (e) =>
+      $(@opts.toolbarScrollContainer).on 'scroll.simditor-' + @editor.id, (e) =>
         return unless @wrapper.is(':visible')
-        topEdge = @editor.wrapper.offset().top
+        topEdge = if @opts.toolbarScrollContainer == window
+          @editor.wrapper.get(0).getBoundingClientRect().top
+        else
+          @editor.wrapper.offset().top - scrollContainerOffset.top
+
+
         bottomEdge = topEdge + @editor.wrapper.outerHeight() - 80
-        scrollTop = $(document).scrollTop() + @opts.toolbarFloatOffset
 
-        if scrollTop <= topEdge or scrollTop >= bottomEdge
+        # scrollTop = $(document).scrollTop() + @opts.toolbarFloatOffset
+        scrollTop = $(@opts.toolbarScrollContainer).scrollTop() + @opts.toolbarFloatOffset
+
+        if topEdge > 0 or bottomEdge < 0
           @editor.wrapper.removeClass('toolbar-floating')
             .css('padding-top', '')
           if @editor.util.os.mobile

diff --git a/styles/simditor.css b/styles/simditor.css
@@ -1,7 +1,7 @@
 /*!
-* Simditor v2.3.25
+* Simditor v2.3.26
 * http://simditor.tower.im/
-* 2019-05-01
+* 2019-07-22
 */
 @font-face {
   font-family: 'Simditor';