Skip to content
This repository has been archived by the owner on Jan 20, 2022. It is now read-only.

Commit

Permalink
Merge pull request #24 from workco/master
Browse files Browse the repository at this point in the history 
Fix Bug 1133095, Vitals page inconsistency
  • Loading branch information
Schalk Neethling committed Apr 1, 2015
2 parents f468748 + 8dacb71 commit e45d8ba
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 153 deletions.
190 changes: 86 additions & 104 deletions src/scripts/experience/topic.js
View file
Expand Up @@ -46,37 +46,40 @@ define([
Topic.SELECTED_TOPIC = null;

Topic.prototype.setup = function () {
// topic mouse out area
var aMargin = 20;
this._linearArea = new PIXI.Graphics();
this._linearArea.i = this._index;
this._linearArea.x = - 100 - aMargin / 2;
this._linearArea.y = 60;
this._linearArea.interactive = true;
this._linearArea.buttonMode = true;
this._linearArea.hitArea = new PIXI.Rectangle(
-this._linearWidth / 2,
-(this._linearDist * this._issues.length / 2) - aMargin,
this._linearWidth + 100 + aMargin,
(this._linearDist * this._issues.length) + aMargin);
// this._linearArea.beginFill(0xFF0000, 0.8);
// this._linearArea.drawRect(this._linearArea.hitArea.x, this._linearArea.hitArea.y, this._linearArea.hitArea.width, this._linearArea.hitArea.height);
this._linearArea.mouseout = this._mouseOut.bind(this);

// topic mouse over area
this._topicArea = new PIXI.Graphics();
this._topicArea.i = this._index;
this._topicArea.hitArea = new PIXI.Rectangle(

// initial topic area
var topicArea = new PIXI.Rectangle(
-this._radius,
-this._radius,
this._radius * 2,
this._radius * 2);
// this._topicArea.beginFill(0x0000FF, 0.8);
// this._topicArea.drawRect(this._topicArea.hitArea.x, this._topicArea.hitArea.y, this._topicArea.hitArea.width, this._topicArea.hitArea.height);
this._topicArea.interactive = true;
this._topicArea.buttonMode = true;
this.elm.addChild(this._topicArea);
this._topicArea.mouseover = this._topicArea.tap = this._mouseOver.bind(this);

// area when user enters topic
this._linearPos = new PIXI.Point(- 100 - (aMargin / 2), 60);
var linearArea = new PIXI.Rectangle(
-(this._linearWidth / 2) + this._linearPos.x,
-(this._linearDist * this._issues.length / 2) - aMargin + this._linearPos.y,
this._linearWidth + 100 + aMargin,
(this._linearDist * this._issues.length) + aMargin);

// top left and bottom right limits from topic and linear areas
var x1 = Math.min(linearArea.x, topicArea.x);
var y1 = Math.min(linearArea.y, topicArea.y);
var x2 = Math.max(linearArea.x + linearArea.width, topicArea.x + topicArea.width);
var y2 = Math.max(linearArea.y + linearArea.height, topicArea.y + topicArea.height);

// union area from topicArea and linearArea
this._area = new PIXI.Graphics();
this._area.i = this._index;
this._area.hitArea = new PIXI.Rectangle(x1, y1, x2 - x1, y2 - y1);
this._area.interactive = true;
this._area.buttonMode = true;
this.elm.addChild(this._area);
this._area.mouseover = this._area.tap = this._mouseOver.bind(this);
// DEBUG show areas
// this._area.beginFill(0x00FF00, 0.8);
// this._area.drawRect(this._area.hitArea.x, this._area.hitArea.y, this._area.hitArea.width, this._area.hitArea.height);

// title
this._topicTitle = new PIXI.Text(this._data.getName().toUpperCase(),
Expand Down Expand Up @@ -177,10 +180,6 @@ define([
issue.pressS.remove(issue.topicPress);
issue.tapS.remove(issue.topicTap);
}

for(i = 0; i < this._fakes.length; i ++) {
this._fakes[i].explode();
}
};

Topic.prototype.setCurrent = function (isCurrent) {
Expand Down Expand Up @@ -223,55 +222,51 @@ define([
* When hovering a topic. If force is true, ignore the check to see if this is
* a valid mouseOver.
*/
Topic.prototype._mouseOver = function (force) {
Topic.prototype._mouseOver = function () {
Topic.SELECTED_TOPIC = this;

var i;
var issue;

// move issues to a linear position
var posX;
var posY;

// move issues to a linear position
for(i = 0; i < this._issues.length; i ++) {
issue = this._issues[i];
issue.setTextAlwaysVisible(true);
issue.stopMoving();
issue.stopPulsing();
posX = this.elm.x + this._linearArea.x;
posY = this.elm.y + this._linearArea.y;
posX = this.elm.x + this._linearPos.x;
posY = this.elm.y + this._linearPos.y;
posY += (((this._linearDist * i) - this._linearDist * this._issues.length / 2));
issue.moveTo(Math.round(posX), Math.round(posY), null, {alpha: 1});
}

// hide fakes
for(i = 0; i < this._fakes.length; i ++) {
issue = this._fakes[i];
issue.implodeAlpha = issue.elm.alpha;
gs.TweenMax.to(issue.elm, 0.3, {alpha: 0, overwrite: true});
}

// move selected title and desc
posY = -this._linearDist * this._issues.length / 2;
posY -= (this._topicTitle.height / Responsive.RATIO) + 50 - this._linearArea.y;
posY -= (this._topicTitle.height / Responsive.RATIO) + 50 - this._linearPos.y;
gs.TweenMax.to(this._topicTitle, 0.3, {y: posY, alpha: 0, overwrite: true});
gs.TweenMax.to(this._topicDesc, 0.3, {alpha: 0, overwrite: true});
// this._linearArea.mouseout = this._linearArea.touchend = this._mouseOut.bind(this);

setTimeout(function () {
this.isOver = true;
}.bind(this), 300);

this.elm.removeChild(this._topicArea);
this.elm.addChild(this._linearArea);
// hide fakes
for(i = 0; i < this._fakes.length; i ++) {
issue = this._fakes[i];
gs.TweenMax.to(issue.elm, 0.3, {alpha: 0, overwrite: true});
}

// make sure mouse is over
if (!force) {
setTimeout(function () {
if (!this._isMouseOver()) {
this._mouseOut();
}
}.bind(this), 100);
if (this._mouseTimeout) {
clearTimeout(this._mouseTimeout);
}
// update state when the issues stop moving
this._mouseTimeout = setTimeout(function () {
if (!this._isMouseOver()) {
this._mouseOut();
} else {
this.isOver = true;
this._area.mouseover = this._area.tap = null;
this._area.mouseout = this._area.touchend = this._mouseOut.bind(this);
}
}.bind(this), 500);

this.mouseOverS.dispatch(this);
};
Expand All @@ -290,6 +285,24 @@ define([
var i;
var issue;

// move issues to default position
for(i = 0; i < this._issues.length; i ++) {
issue = this._issues[i];
issue.mouseOut();
issue.setTextAlwaysVisible(false);
issue.moveTo(
this.elm.x + issue.topicX,
this.elm.y + issue.topicY,
issue._resumeStaticAnimation.bind(issue),
{alpha: 1});
}

// show fakes
for(i = 0; i < this._fakes.length; i ++) {
issue = this._fakes[i];
gs.TweenMax.to(issue.elm, 0.3, {alpha: 0.4, overwrite: true});
}

// move selected title and desc
gs.TweenMax.to(
this._topicTitle,
Expand All @@ -303,59 +316,28 @@ define([
);
gs.TweenMax.to(this._topicDesc, 0.3, {alpha: 1, overwrite: true});

// show fakes
for(i = 0; i < this._fakes.length; i ++) {
issue = this._fakes[i];
gs.TweenMax.to(issue.elm, 0.3, {alpha: issue.implodeAlpha, overwrite: true});
if (this._mouseTimeout) {
clearTimeout(this._mouseTimeout);
}

for(i = 0; i < this._issues.length; i ++) {
issue = this._issues[i];
issue.mouseOut();
issue.setTextAlwaysVisible(false);
issue.moveTo(
this.elm.x + issue.topicX,
this.elm.y + issue.topicY,
issue._resumeStaticAnimation.bind(issue),
{alpha: 1});
}

this.isOver = false;

setTimeout(function () {
// if (Topic.SELECTED_TOPIC === this) {
this.elm.addChild(this._topicArea);
this.elm.removeChild(this._linearArea);
Topic.SELECTED_TOPIC = null;
// }
}.bind(this), 300);
// update state when the issues stop moving
this._mouseTimeout = setTimeout(function () {
if (this._isMouseOver()) {
this._mouseOver();
} else {
this.isOver = false;
this._area.mouseout = this._area.touchend = null;
this._area.mouseover = this._area.tap = this._mouseOver.bind(this);
}
}.bind(this), 500);

this.mouseOutS.dispatch(this);
};

Topic.prototype.toneDown = function () {
gs.TweenMax.to(this._topicTitle, 0.3, {alpha: 0.5});
gs.TweenMax.to(this._topicDesc, 0.3, {alpha: 0.5});

for(var i = 0; i < this._issues.length; i ++) {
gs.TweenMax.to(this._issues[i].elm, 0.3, {alpha: 0.5});
}
};

Topic.prototype.endToneDown = function () {
gs.TweenMax.to(this._topicTitle, 0.3, {alpha: 1});
gs.TweenMax.to(this._topicDesc, 0.3, {alpha: 1});

for(var i = 0; i < this._issues.length; i ++) {
gs.TweenMax.to(this._issues[i].elm, 1, {alpha: 1});
}
};

Topic.prototype.moveTo = function (position) {
var i;
var issue;

this._topicArea.mouseover = this._topicArea.touchstart = null;
this._area.mouseover = this._area.touchstart = this._area.mouseOut = null;

gs.TweenMax.to(
this.elm,
Expand Down Expand Up @@ -383,12 +365,12 @@ define([
}

setTimeout(function resumeEvents () {
this._topicArea.mouseover = this._topicArea.touchstart = this._mouseOver.bind(this);
}.bind(this), 5000);
this._area.mouseover = this._area.touchstart = this._mouseOver.bind(this);
}.bind(this), 100);
};

Topic.prototype._isMouseOver = function () {
var element = this._linearArea;
var element = this._area;
var x0 = this.elm.x + element.x + element.hitArea.x;
var x1 = x0 + element.hitArea.width;
var y0 = this.elm.y + element.y + element.hitArea.y;
Expand Down
85 changes: 36 additions & 49 deletions src/scripts/experience/topics-mode.js
View file
Expand Up @@ -153,31 +153,15 @@ define([
};

TopicsMode.prototype._onMouseOver = function (selectedTopic) {
this.selectedTopic = selectedTopic;
var i;
var topic;

// tone down other topics
for(i = 0; i < Topic.TOPICS.length; i ++) {
topic = Topic.TOPICS[i];
if (topic._index !== selectedTopic._index) {
topic.toneDown();
}
// there can be only one
if (this.selectedTopic && this.selectedTopic._index !== selectedTopic._index) {
this.selectedTopic._mouseOut();
}

this.selectedTopic = selectedTopic;
};

TopicsMode.prototype._onMouseOut = function (selectedTopic) {
var i;
var topic;

// set other issues alpha back to 1
for(i = 0; i < Topic.TOPICS.length; i ++) {
topic = Topic.TOPICS[i];
if (topic._index !== selectedTopic._index) {
topic.endToneDown();
}
}

this.selectedTopic = null;
};

Expand Down Expand Up @@ -233,7 +217,6 @@ define([
this._canvas.swipeRightS.add(this._swipeToPrevTopicBind);
}

this._onResize();
setTimeout(this._onShow.bind(this), 500);
};

Expand Down Expand Up @@ -269,37 +252,41 @@ define([
};

TopicsMode.prototype._swipeToNextTopic = function () {
var position = new PIXI.Point();
this._currentTopic = Math.min(this._currentTopic + 1, 3);
this._topics[this._currentTopic].setCurrent();

var mouseOutTopic = function (topic) {
topic._mouseOut(true);
};

for(var i = 0; i < this._topics.length; i ++) {
position.x = TopicsMode.DISTANCE_BETWEEN_TOPICS * (i - this._currentTopic);
position.y = -40;
this._topics[i].moveTo(position.clone());
setTimeout(mouseOutTopic, 300, this._topics[i]);
this._topics[i].setCurrent(i === this._currentTopic);
if (Responsive.IS_SMALL()) {
var position = new PIXI.Point();
this._currentTopic = Math.min(this._currentTopic + 1, 3);
this._topics[this._currentTopic].setCurrent();

var mouseOutTopic = function (topic) {
topic._mouseOut(true);
};

for(var i = 0; i < this._topics.length; i ++) {
position.x = TopicsMode.DISTANCE_BETWEEN_TOPICS * (i - this._currentTopic);
position.y = -40;
this._topics[i].moveTo(position.clone());
setTimeout(mouseOutTopic, 300, this._topics[i]);
this._topics[i].setCurrent(i === this._currentTopic);
}
}
};

TopicsMode.prototype._swipeToPrevTopic = function () {
var position = new PIXI.Point();
this._currentTopic = Math.max(this._currentTopic - 1, 0);

var mouseOutTopic = function (topic) {
topic._mouseOut(true);
};

for(var i = 0; i < this._topics.length; i ++) {
position.x = TopicsMode.DISTANCE_BETWEEN_TOPICS * (i - this._currentTopic);
position.y = -40;
this._topics[i].moveTo(position.clone());
setTimeout(mouseOutTopic, 300, this._topics[i]);
this._topics[i].setCurrent(i === this._currentTopic);
if (Responsive.IS_SMALL()) {
var position = new PIXI.Point();
this._currentTopic = Math.max(this._currentTopic - 1, 0);

var mouseOutTopic = function (topic) {
topic._mouseOut(true);
};

for(var i = 0; i < this._topics.length; i ++) {
position.x = TopicsMode.DISTANCE_BETWEEN_TOPICS * (i - this._currentTopic);
position.y = -40;
this._topics[i].moveTo(position.clone());
setTimeout(mouseOutTopic, 300, this._topics[i]);
this._topics[i].setCurrent(i === this._currentTopic);
}
}
};

Expand Down

0 comments on commit e45d8ba

Please sign in to comment.