From 7cd6ad42bbe799a66124344a463b5a571a2e892a Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 20 Jun 2012 10:57:56 -0700 Subject: Binding View - Hover Scroll Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.css | 14 +++ .../binding-hud.reel/binding-hud.html | 7 +- .../binding-hud.reel/binding-hud.js | 114 ++++++++++++++++++++- js/stage/binding-view.reel/binding-view.js | 5 +- 4 files changed, 137 insertions(+), 3 deletions(-) (limited to 'js/stage/binding-view.reel') diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index f15f1e50..3cc4bb0a 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css @@ -66,6 +66,20 @@ box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/*inset 0px 0px 6px #AAA;*/ /*border-bottom-right-radius: 50%; border-top-right-radius: 50%;*/ +} + +.scrollArea { + background-color:#666; + height:12px; + text-align: center; + display: none; +} +.scrollArea.disabled { + opacity: 0.5; +} +.hudRepetition { + max-height:54px; + overflow: hidden; } \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index 82686c7f..56234557 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html @@ -15,7 +15,10 @@ "prototype": "js/stage/binding-view.reel/binding-hud.reel", "properties": { "element": {"#": "bindingHud"}, - "titleElement": {"#": "title"} + "titleElement": {"#": "title"}, + "scrollUp": {"#":"scrollUp"}, + "scrollDown": {"#":"scrollDown"}, + "optionsRepeater": {"@": "repeater"} } }, "repeater": { @@ -64,9 +67,11 @@

Down

diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index fddce11c..4b40d4da 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -12,6 +12,24 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.BindingHud = Montage.create(Component, { + scrollUp: { + value: null + }, + scrollable: { + value: false + }, + scrollInterval: { + value: null + }, + scrollDown: { + value: null + }, + scrollSpace: { + value: 3 + }, + currentScrollDirection: { + value: null + }, _bindingArgs: { value: null }, @@ -24,6 +42,10 @@ exports.BindingHud = Montage.create(Component, { value: [] }, + optionsRepeater: { + value: null + }, + _userComponent: { value: null }, userComponent: { get: function() { @@ -141,6 +163,86 @@ exports.BindingHud = Montage.create(Component, { // this.properties.push({"title":obj, "bound": objBound}); // }.bind(this)); //this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent)); + if(this.scrollSpace < this.properties.length) { + this.scrollUp.addEventListener("mouseover", this); + this.scrollDown.addEventListener("mouseover", this); + this.scrollUp.addEventListener("mouseout", this); + this.scrollDown.addEventListener("mouseout", this); + this.scrollUp.style.display = "block"; + this.scrollDown.style.display = "block"; + } + } + }, + + isOverScroller: { + value: function(mousePoint) { + if(this.scrollSpace < this.properties.length) { + if (this.scrollInterval === null) { + var newX = mousePoint.x - this.x; + var newY = mousePoint.y - this.y; + var scrollUpStartX = 5; + var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; + var scrollUpStartY = this.titleElement.offsetHeight; + var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; + + var scrollDownStartX = 5; + var scrollDownEndX = scrollUpStartX + this.titleElement.offsetWidth; + var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight; + //scrollDownEndy to small find out y; + var scrollDownEndY = scrollUpEndY + this.scrollDown.offsetHeight; + console.log(scrollDownStartX,scrollDownEndX, scrollDownStartY, scrollDownEndY, newX, newY ); + if(scrollDownStartX < newX && (scrollDownEndX) > newX) { + if(scrollDownStartY < newY && (scrollDownEndY) > newY) { + debugger; + } + } + } + } + } + }, + + handleScroll: { + value: function(direction) { + if(direction === "down") { + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop += 18; + }, 200); + } else { + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop -= 18; + }, 200); + } + } + }, + + handleMouseover: { + value: function(e) { + if(this.scrollSpace < this.properties.length) { + if (this.scrollInterval === null) { + if (e._event.target.classList.contains("scrollAreaBottom")) { + self = e._event.target.parentElement.controller; + //e._event.target.parentElement.controller.currentScrollDirection = "down"; + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop += 3; + }, 50); + } else { + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop -= 3; + }, 50); + } + } + } + this.needsDraw = true; + } + }, + + + + handleMouseout: { + value: function() { + clearInterval(this.scrollInterval); + this.scrollInterval = null; + this.currentScrollDirection = null; } }, @@ -149,11 +251,21 @@ exports.BindingHud = Montage.create(Component, { this.titleElement.innerHTML = this.title; this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; + +// if(this.currentScrollDirection !== null) { +// if(this.currentScrollDirection === "up") { +// this.optionsRepeater.element.scrollTop -= 18; +// } else { +// this.optionsRepeater.element.scrollTop += 18; +// } +// } } }, didDraw: { value: function() { - +// if (this.currentScrollDirection !== null) { +// this.needsDraw=true; +// } } } }); \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index a4aebd1b..9bd99176 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -280,12 +280,15 @@ exports.BindingView = Montage.create(Component, { if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) { if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) { overHud = true; + if(this._isDrawingConnection) { + obj.isOverScroller(mousePoint); + } } } }.bind(this)); if(typeof (this.objectsTray.element) !== "undefined") { if (this.objectsTray.element.offsetLeft < mousePoint.x && (this.objectsTray.element.offsetLeft + this.objectsTray.element.offsetWidth) > mousePoint.x ) { - //console.log(this.objectsTray.element.offsetTop, (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) ); + //console.log(this.objectsTray.element.offsetTop, (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight)); if(this.objectsTray.element.parentElement.offsetTop < mousePoint.y && (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) > mousePoint.y) { overHud = true; } -- cgit v1.2.3