Skip to content

Commit

Permalink
updated window scroll eventlistener so that the component select box …
Browse files Browse the repository at this point in the history 
…& text editor toolbar doesn't jitter any more
  • Loading branch information
@markentingh
markentingh committed May 21, 2017
1 parent 7f5ddb2 commit 1114cee
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 109 deletions.
2 changes: 1 addition & 1 deletion App/Components/Textbox/texteditor.js
View file
Expand Up @@ -99,7 +99,7 @@
pos.left = 13;
}
pos.height = e.height();
if (pos.top + win.scrolly <= 50) {
if (pos.top + win.scrolly <= 50 && (win.scrolly - pos.top) + pos.height < win.h) {
//show toolbar below component
self.toolbar.css({ left: pos.left - 13, top: pos.top + pos.height + 13 });
} else {
Expand Down
177 changes: 98 additions & 79 deletions App/Scripts/editor/components.js
View file
Expand Up @@ -131,9 +131,15 @@ S.editor.components = {
this.visible = true;

//add event to window scroll event listener
S.events.doc.scroll.callback.add('component-select', null,
S.events.doc.scroll.callback.add('component-select',
function () {
S.editor.components.select.refresh.call(S.editor.components.select);
S.editor.components.select.redraw.start.call(S.editor.components.select);
},
function () {
S.editor.components.select.redraw.calculate.call(S.editor.components.select);
},
function () {
S.editor.components.select.redraw.paint.call(S.editor.components.select);
},
function () {
S.editor.components.select.refresh.call(S.editor.components.select);
Expand Down Expand Up @@ -353,88 +359,101 @@ S.editor.components = {
},
},

refresh: function () {
//reposition all resize bars & menu system for the component select box
redraw: {
box: null, menutop: null, win: null,

var components = $('.component');
if (!S.editor.components.select.jitterbugs || S.editor.components.select.jitterbugs.length != components.length)
{
//create jitterbugs
S.editor.components.select.jitterbugs = [];
$('.component').each(function (c) {
S.editor.components.select.jitterbugs.push({ elem: c, active: false });
});
}
start: function () {
//update any references while starting a redraw
this.elem.menuwin = $('.component-select .menu .menu-window');
},

if (S.editor.components.selected == null) { return;}
var c = S.editor.components.selected;
var pos = c.offset();
var w = c.width();
var h = c.height();
var r = this.elem.resize;
var m = this.elem.menu;
var maxw = w + (this.pad * 2);
var maxh = h + (this.pad * 2);
var win = S.window.pos();
var rightspace = (win.w + win.scrollx) - (pos.left - this.pad + maxw);
var bottomspace = (win.h + win.scrolly) - (pos.top - this.pad + maxh);
var topspace = pos.top - this.pad;
var toolh = S.editor.toolbar.height;
var scrollbarv = S.window.verticalScrollbarWidth();

//set up select box dimensions (with window-bound constraints)
var box = {
x: pos.left - this.pad < 0 ? 0 : pos.left - this.pad,
y: topspace < toolh ? toolh : topspace,
w: rightspace < 0 ? maxw + rightspace : maxw,
h: (bottomspace < 0 ? maxh + bottomspace : maxh) + (topspace < toolh ? topspace - toolh : 0)
};
calculate: function () {
//makes calculations to change the position of the resize bars
if (S.editor.components.selected == null) { return; }
var c = S.editor.components.selected;
var pos = c.offset();
var w = c.width();
var h = c.height();
var maxw = w + (this.pad * 2);
var maxh = h + (this.pad * 2);
var win = S.window.pos();
var rightspace = (win.w + win.scrollx) - (pos.left - this.pad + maxw);
var bottomspace = (win.h + win.scrolly) - (pos.top - this.pad + maxh);
var topspace = pos.top - this.pad;
var toolh = S.editor.toolbar.height;
var scrollbarv = S.window.verticalScrollbarWidth();

//set up select box dimensions (with window-bound constraints)
var box = {
x: pos.left - this.pad < 0 ? 0 : pos.left - this.pad,
y: topspace < toolh ? toolh : topspace,
w: rightspace < 0 ? maxw + rightspace : maxw,
h: (bottomspace < 0 ? maxh + bottomspace : maxh) + (topspace < toolh ? topspace - toolh : 0)
};

//set component shield before resizing box within boundaries
this.elem.compShield.css({ top: box.y, left: box.x, width: box.w, height: box.h });

if (box.x < 0) { box.x = 5; }
if (box.y - win.scrolly - toolh < 0) { box.y = win.scrolly + toolh; }
if (box.w > win.w - scrollbarv) { box.w = win.w - scrollbarv - (box.x * 2); }
if (box.h > win.h - toolh) { box.h = win.h - toolh; }

//reposition component select box container
this.elem.compSel.css({ top: box.y, left: box.x });

//reposition all resize bars
r.top.css({ left: this.corners, width: box.w - (this.corners * 2) });
r.topRight.css({ left: box.w - this.corners, width: this.corners });
r.rightTop.css({ left: box.w - this.bar, height: this.corners });
r.right.css({ top: this.corners, left: box.w - this.bar, height: box.h - (this.corners * 2) });
r.rightBottom.css({ top: box.h - this.corners, left: box.w - this.bar, height: this.corners });
r.bottomRight.css({ top: box.h - this.bar, left: box.w - this.corners, width: this.corners });
r.bottom.css({ top: box.h - this.bar, left: this.corners, width: box.w - (this.corners * 2) });
r.bottomLeft.css({ top: box.h - this.bar, width: this.corners });
r.leftBottom.css({ top: box.h - this.corners, height: this.corners });
r.left.css({ top: this.corners, height: box.h - (this.corners * 2) });

//reposition menu system
var menutop = 0;
if (win.scrolly > box.y) {
menutop = win.scrolly - box.y;
}
if (win.w - (box.x + box.w) < 50) {
//inner menu
m.addClass('inner').css({ left: box.w - 36, top: menutop + 4 });
} else {
//outer menu
m.removeClass('inner').css({ left: box.w, top: menutop });
}
if (win.w - (box.x + box.w) < 250) {
//inner menu window
m.find('.menu-window').addClass('inner');
} else {
//outer menu window
m.find('.menu-window').removeClass('inner');
if (box.x < 0) { box.x = 5; }
if (box.y - win.scrolly - toolh < 0) { box.y = win.scrolly + toolh; }
if (box.w > win.w - scrollbarv) { box.w = win.w - scrollbarv - (box.x * 2); }
if (box.h > win.h - toolh) { box.h = win.h - toolh; }

this.redraw.box = box;
this.redraw.win = win;
this.redraw.menutop = win.scrolly > box.y ? win.scrolly - box.y : 0;
},

paint: function () {
//repositions the resize bars based on calculations
if (S.editor.components.selected == null) { return; }
var r = this.elem.resize;
var m = this.elem.menu;
var box = this.redraw.box;
var win = this.redraw.win;
var menutop = this.redraw.menutop;

//set component shield before resizing box within boundaries
this.elem.compShield.css({ top: box.y, left: box.x, width: box.w, height: box.h });

//reposition component select box container
this.elem.compSel.css({ top: box.y, left: box.x });

//reposition all resize bars
r.top.css({ left: this.corners, width: box.w - (this.corners * 2) });
r.topRight.css({ left: box.w - this.corners, width: this.corners });
r.rightTop.css({ left: box.w - this.bar, height: this.corners });
r.right.css({ top: this.corners, left: box.w - this.bar, height: box.h - (this.corners * 2) });
r.rightBottom.css({ top: box.h - this.corners, left: box.w - this.bar, height: this.corners });
r.bottomRight.css({ top: box.h - this.bar, left: box.w - this.corners, width: this.corners });
r.bottom.css({ top: box.h - this.bar, left: this.corners, width: box.w - (this.corners * 2) });
r.bottomLeft.css({ top: box.h - this.bar, width: this.corners });
r.leftBottom.css({ top: box.h - this.corners, height: this.corners });
r.left.css({ top: this.corners, height: box.h - (this.corners * 2) });

//reposition menu system
if (win.w - (box.x + box.w) < 50) {
//inner menu
m.addClass('inner').css({ left: box.w - 36, top: menutop + 4 });
} else {
//outer menu
m.removeClass('inner').css({ left: box.w, top: menutop });
}
if (win.w - (box.x + box.w) < 250) {
//inner menu window
m.find('.menu-window').addClass('inner');
} else {
//outer menu window
m.find('.menu-window').removeClass('inner');
}

//execute all registered events
this.events.refresh.execute();
}
},

//execute all registered events
this.events.refresh.execute();
refresh: function () {
//reposition all resize bars & menu system for the component select box
this.redraw.start.call(this);
this.redraw.calculate.call(this);
this.redraw.paint.call(this);
},

events: {
Expand Down
60 changes: 31 additions & 29 deletions App/Scripts/platform/events.js
View file
Expand Up @@ -65,53 +65,46 @@
},

scroll: {
timer: { started: false, fps: 60, timeout: 250, date: new Date(), callback: null },
ticking: false,
last: { scrollx: 0, scrolly: 0 },

trigger: function () {
this.timer.date = new Date();
if (this.timer.started == false) { this.start(); }
if (!S.events.doc.scroll.ticking) {
S.events.doc.scroll.last.scrollx = window.scrollX;
S.events.doc.scroll.last.scrolly = window.scrollY;
S.window.scrollx = S.events.doc.scroll.last.scrollx;
S.window.scrolly = S.events.doc.scroll.last.scrolly;
S.events.doc.scroll.callback.execute('onGo');
S.events.doc.scroll.ticking = true;
requestAnimationFrame(S.events.doc.scroll.animate);
}
},

start: function () {
if (this.timer.started == true) { return; }
this.timer.started = true;
this.timer.date = new Date();
this.ticking = false;
this.callback.execute('onStart');
this.go();
},

go: function () {
if (this.timer.started == false) { return; }
this.last.scrollx = window.scrollX;
this.last.scrolly = window.scrollY;
S.window.scrollx = this.last.scrollx;
S.window.scrolly = this.last.scrolly;
this.callback.execute('onGo');

if (new Date() - this.timer.date > this.timer.timeout) {
this.stop();
} else {
this.timer.callback = setTimeout(function () { S.events.doc.scroll.go(); }, 1000 / this.timer.fps)
}
animate: function () {
var self = S.events.doc.scroll;
S.events.doc.scroll.ticking = false;
self.callback.execute('onAnimate');
},

stop: function () {
if (this.timer.started == false) { return; }
this.timer.started = false;
this.last.scrollx = window.scrollX;
this.last.scrolly = window.scrollY;
S.window.scrollx = this.last.scrollx;
S.window.scrolly = this.last.scrolly;
this.callback.execute('onStop');
S.events.doc.scroll.last.scrollx = window.scrollX;
S.events.doc.scroll.last.scrolly = window.scrollY;
S.window.scrollx = S.events.doc.scroll.last.scrollx;
S.window.scrolly = S.events.doc.scroll.last.scrolly;
S.events.doc.scroll.callback.execute('onStop');
},

callback: {
//register & execute callbacks when the window resizes
items: [],

add: function (elem, onStart, onGo, onStop) {
this.items.push({ elem: elem, onStart: onStart, onGo: onGo, onStop: onStop });
add: function (elem, onStart, onGo, onAnimate, onStop) {
this.items.push({ elem: elem, onStart: onStart, onGo: onGo, onAnimate: onAnimate, onStop: onStop });
},

remove: function (elem) {
Expand All @@ -131,10 +124,19 @@
} break;

case 'onGo':
//first, go (calculate stuff)
for (var x = 0; x < this.items.length; x++) {
if (typeof this.items[x].onGo == 'function') {
this.items[x].onGo();
}
}
break;

case 'onAnimate':
for (var x = 0; x < this.items.length; x++) {
if (typeof this.items[x].onAnimate == 'function') {
this.items[x].onAnimate();
}
} break;

case 'onStop':
Expand Down

0 comments on commit 1114cee

Please sign in to comment.