Skip to content

Commit 2d002a1

Browse files
farthinkerfarthinker
authored
Merge pull request #543 from mycolorway/scl/add-toolbar-container-option
ADD: toolbarScrollContainer for Toolbar
2 parents d7f3e06 + b0cb78e commit 2d002a1

File tree

5 files changed

+51
-32
lines changed

5 files changed

+51
-32
lines changed

‎lib/simditor.js

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
2-
* Simditor v2.3.25
2+
* Simditor v2.3.26
33
* http://simditor.tower.im/
4-
* 2019-05-01
4+
* 2019-07-22
55
*/
66
(function (root, factory) {
77
if (typeof define === 'function' && define.amd) {
@@ -1924,7 +1924,8 @@ Toolbar = (function(superClass) {
19241924
toolbar: true,
19251925
toolbarFloat: true,
19261926
toolbarHidden: false,
1927-
toolbarFloatOffset: 0
1927+
toolbarFloatOffset: 0,
1928+
toolbarScrollContainer: window
19281929
};
19291930

19301931
Toolbar.prototype._tpl = {
@@ -1933,7 +1934,7 @@ Toolbar = (function(superClass) {
19331934
};
19341935

19351936
Toolbar.prototype._init = function() {
1936-
var floatInitialized, initToolbarFloat, toolbarHeight;
1937+
var floatInitialized, initToolbarFloat, scrollContainerOffset, toolbarHeight;
19371938
this.editor = this._module;
19381939
if (!this.opts.toolbar) {
19391940
return;
@@ -1956,35 +1957,39 @@ Toolbar = (function(superClass) {
19561957
};
19571958
})(this));
19581959
if (!this.opts.toolbarHidden && this.opts.toolbarFloat) {
1959-
this.wrapper.css('top', this.opts.toolbarFloatOffset);
1960+
scrollContainerOffset = this.opts.toolbarScrollContainer === window ? {
1961+
top: 0,
1962+
left: 0
1963+
} : $(this.opts.toolbarScrollContainer).offset();
1964+
this.wrapper.css('top', scrollContainerOffset.top + this.opts.toolbarFloatOffset);
19601965
toolbarHeight = 0;
19611966
initToolbarFloat = (function(_this) {
19621967
return function() {
19631968
_this.wrapper.css('position', 'static');
19641969
_this.wrapper.width('auto');
19651970
_this.editor.util.reflow(_this.wrapper);
19661971
_this.wrapper.width(_this.wrapper.outerWidth());
1967-
_this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left);
1972+
_this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left - scrollContainerOffset.left);
19681973
_this.wrapper.css('position', '');
19691974
toolbarHeight = _this.wrapper.outerHeight();
1970-
_this.editor.placeholderEl.css('top', toolbarHeight);
1975+
_this.editor.placeholderEl.css('top', scrollContainerOffset.top);
19711976
return true;
19721977
};
19731978
})(this);
19741979
floatInitialized = null;
1975-
$(window).on('resize.simditor-' + this.editor.id, function(e) {
1980+
$(this.opts.toolbarScrollContainer).on('resize.simditor-' + this.editor.id, function(e) {
19761981
return floatInitialized = initToolbarFloat();
19771982
});
1978-
$(window).on('scroll.simditor-' + this.editor.id, (function(_this) {
1983+
$(this.opts.toolbarScrollContainer).on('scroll.simditor-' + this.editor.id, (function(_this) {
19791984
return function(e) {
19801985
var bottomEdge, scrollTop, topEdge;
19811986
if (!_this.wrapper.is(':visible')) {
19821987
return;
19831988
}
1984-
topEdge = _this.editor.wrapper.offset().top;
1989+
topEdge = _this.opts.toolbarScrollContainer === window ? _this.editor.wrapper.get(0).getBoundingClientRect().top : _this.editor.wrapper.offset().top - scrollContainerOffset.top;
19851990
bottomEdge = topEdge + _this.editor.wrapper.outerHeight() - 80;
1986-
scrollTop = $(document).scrollTop() + _this.opts.toolbarFloatOffset;
1987-
if (scrollTop <= topEdge || scrollTop >= bottomEdge) {
1991+
scrollTop = $(_this.opts.toolbarScrollContainer).scrollTop() + _this.opts.toolbarFloatOffset;
1992+
if (topEdge > 0 || bottomEdge < 0) {
19881993
_this.editor.wrapper.removeClass('toolbar-floating').css('padding-top', '');
19891994
if (_this.editor.util.os.mobile) {
19901995
return _this.wrapper.css('top', _this.opts.toolbarFloatOffset);

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "simditor",
3-
"version": "2.3.25",
3+
"version": "2.3.26",
44
"description": "A simple online editor",
55
"repository": {
66
"type": "git",

‎site/assets/scripts/simditor.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1919,7 +1919,8 @@ Toolbar = (function(superClass) {
19191919
toolbar: true,
19201920
toolbarFloat: true,
19211921
toolbarHidden: false,
1922-
toolbarFloatOffset: 0
1922+
toolbarFloatOffset: 0,
1923+
toolbarScrollContainer: window
19231924
};
19241925

19251926
Toolbar.prototype._tpl = {
@@ -1928,7 +1929,7 @@ Toolbar = (function(superClass) {
19281929
};
19291930

19301931
Toolbar.prototype._init = function() {
1931-
var floatInitialized, initToolbarFloat, toolbarHeight;
1932+
var floatInitialized, initToolbarFloat, scrollContainerOffset, toolbarHeight;
19321933
this.editor = this._module;
19331934
if (!this.opts.toolbar) {
19341935
return;
@@ -1951,35 +1952,39 @@ Toolbar = (function(superClass) {
19511952
};
19521953
})(this));
19531954
if (!this.opts.toolbarHidden && this.opts.toolbarFloat) {
1954-
this.wrapper.css('top', this.opts.toolbarFloatOffset);
1955+
scrollContainerOffset = this.opts.toolbarScrollContainer === window ? {
1956+
top: 0,
1957+
left: 0
1958+
} : $(this.opts.toolbarScrollContainer).offset();
1959+
this.wrapper.css('top', scrollContainerOffset.top + this.opts.toolbarFloatOffset);
19551960
toolbarHeight = 0;
19561961
initToolbarFloat = (function(_this) {
19571962
return function() {
19581963
_this.wrapper.css('position', 'static');
19591964
_this.wrapper.width('auto');
19601965
_this.editor.util.reflow(_this.wrapper);
19611966
_this.wrapper.width(_this.wrapper.outerWidth());
1962-
_this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left);
1967+
_this.wrapper.css('left', _this.editor.util.os.mobile ? _this.wrapper.position().left : _this.wrapper.offset().left - scrollContainerOffset.left);
19631968
_this.wrapper.css('position', '');
19641969
toolbarHeight = _this.wrapper.outerHeight();
1965-
_this.editor.placeholderEl.css('top', toolbarHeight);
1970+
_this.editor.placeholderEl.css('top', scrollContainerOffset.top);
19661971
return true;
19671972
};
19681973
})(this);
19691974
floatInitialized = null;
1970-
$(window).on('resize.simditor-' + this.editor.id, function(e) {
1975+
$(this.opts.toolbarScrollContainer).on('resize.simditor-' + this.editor.id, function(e) {
19711976
return floatInitialized = initToolbarFloat();
19721977
});
1973-
$(window).on('scroll.simditor-' + this.editor.id, (function(_this) {
1978+
$(this.opts.toolbarScrollContainer).on('scroll.simditor-' + this.editor.id, (function(_this) {
19741979
return function(e) {
19751980
var bottomEdge, scrollTop, topEdge;
19761981
if (!_this.wrapper.is(':visible')) {
19771982
return;
19781983
}
1979-
topEdge = _this.editor.wrapper.offset().top;
1984+
topEdge = _this.opts.toolbarScrollContainer === window ? _this.editor.wrapper.get(0).getBoundingClientRect().top : _this.editor.wrapper.offset().top - scrollContainerOffset.top;
19801985
bottomEdge = topEdge + _this.editor.wrapper.outerHeight() - 80;
1981-
scrollTop = $(document).scrollTop() + _this.opts.toolbarFloatOffset;
1982-
if (scrollTop <= topEdge || scrollTop >= bottomEdge) {
1986+
scrollTop = $(_this.opts.toolbarScrollContainer).scrollTop() + _this.opts.toolbarFloatOffset;
1987+
if (topEdge > 0 || bottomEdge < 0) {
19831988
_this.editor.wrapper.removeClass('toolbar-floating').css('padding-top', '');
19841989
if (_this.editor.util.os.mobile) {
19851990
return _this.wrapper.css('top', _this.opts.toolbarFloatOffset);

‎src/toolbar.coffee

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ class Toolbar extends SimpleModule
88
toolbarFloat: true
99
toolbarHidden: false
1010
toolbarFloatOffset: 0
11+
toolbarScrollContainer: window
1112

1213
_tpl:
1314
wrapper: '<div class="simditor-toolbar"><ul></ul></div>'
@@ -34,7 +35,8 @@ class Toolbar extends SimpleModule
3435
@list.find('.menu-on').removeClass('.menu-on')
3536

3637
if not @opts.toolbarHidden and @opts.toolbarFloat
37-
@wrapper.css 'top', @opts.toolbarFloatOffset
38+
scrollContainerOffset = if @opts.toolbarScrollContainer == window then {top: 0, left: 0} else $(@opts.toolbarScrollContainer).offset()
39+
@wrapper.css 'top', scrollContainerOffset.top + @opts.toolbarFloatOffset
3840
toolbarHeight = 0
3941

4042
initToolbarFloat = =>
@@ -45,23 +47,30 @@ class Toolbar extends SimpleModule
4547
@wrapper.css 'left', if @editor.util.os.mobile
4648
@wrapper.position().left
4749
else
48-
@wrapper.offset().left
50+
@wrapper.offset().left - scrollContainerOffset.left
4951
@wrapper.css 'position', ''
5052
toolbarHeight = @wrapper.outerHeight()
51-
@editor.placeholderEl.css 'top', toolbarHeight
53+
@editor.placeholderEl.css 'top', scrollContainerOffset.top
5254
true
5355

5456
floatInitialized = null
5557
$(window).on 'resize.simditor-' + @editor.id, (e) ->
5658
floatInitialized = initToolbarFloat()
5759

58-
$(window).on 'scroll.simditor-' + @editor.id, (e) =>
60+
$(@opts.toolbarScrollContainer).on 'scroll.simditor-' + @editor.id, (e) =>
5961
return unless @wrapper.is(':visible')
60-
topEdge = @editor.wrapper.offset().top
62+
topEdge = if @opts.toolbarScrollContainer == window
63+
@editor.wrapper.get(0).getBoundingClientRect().top
64+
else
65+
@editor.wrapper.offset().top - scrollContainerOffset.top
66+
67+
6168
bottomEdge = topEdge + @editor.wrapper.outerHeight() - 80
62-
scrollTop = $(document).scrollTop() + @opts.toolbarFloatOffset
6369

64-
if scrollTop <= topEdge or scrollTop >= bottomEdge
70+
# scrollTop = $(document).scrollTop() + @opts.toolbarFloatOffset
71+
scrollTop = $(@opts.toolbarScrollContainer).scrollTop() + @opts.toolbarFloatOffset
72+
73+
if topEdge > 0 or bottomEdge < 0
6574
@editor.wrapper.removeClass('toolbar-floating')
6675
.css('padding-top', '')
6776
if @editor.util.os.mobile

‎styles/simditor.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
2-
* Simditor v2.3.25
2+
* Simditor v2.3.26
33
* http://simditor.tower.im/
4-
* 2019-05-01
4+
* 2019-07-22
55
*/
66
@font-face {
77
font-family: 'Simditor';

0 commit comments

Comments
 (0)