From c611d2c7ddfd590668f5db00a0a7bfc4a0f5cedf Mon Sep 17 00:00:00 2001 From: chenglu Date: Mon, 22 Jul 2019 17:36:16 +0800 Subject: [PATCH 1/2] ADD: toolbarScrollContainer for Toolbar --- lib/simditor.js | 29 +++++++++++++++++------------ package.json | 2 +- site/assets/scripts/simditor.js | 25 +++++++++++++++---------- src/toolbar.coffee | 25 +++++++++++++++++-------- styles/simditor.css | 4 ++-- 5 files changed, 52 insertions(+), 33 deletions(-) diff --git a/lib/simditor.js b/lib/simditor.js index ab38092a..93bb4182 100644 --- 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,7 +1957,11 @@ 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() { @@ -1964,27 +1969,27 @@ Toolbar = (function(superClass) { _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 index 0f78e3f6..8942cbf0 100644 --- 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 index f8cb5b9e..509e2ad1 100644 --- 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,7 +1952,11 @@ 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() { @@ -1959,27 +1964,27 @@ Toolbar = (function(superClass) { _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 index 9e649690..0515d55a 100644 --- 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: '
' @@ -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) -> + $(@opts.toolbarScrollContainer).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 index 3f5c4fa3..bd2022f6 100644 --- 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'; From b0cb78eadd87c3d3fffd22b7110c405f8defff1c Mon Sep 17 00:00:00 2001 From: chenglu Date: Mon, 22 Jul 2019 18:19:45 +0800 Subject: [PATCH 2/2] FIX: comments --- src/toolbar.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/toolbar.coffee b/src/toolbar.coffee index 0515d55a..77fdd809 100644 --- a/src/toolbar.coffee +++ b/src/toolbar.coffee @@ -54,7 +54,7 @@ class Toolbar extends SimpleModule true floatInitialized = null - $(@opts.toolbarScrollContainer).on 'resize.simditor-' + @editor.id, (e) -> + $(window).on 'resize.simditor-' + @editor.id, (e) -> floatInitialized = initToolbarFloat() $(@opts.toolbarScrollContainer).on 'scroll.simditor-' + @editor.id, (e) =>