Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
190
gaia/tv_apps/browser/js/tooltip.js
Executable file
190
gaia/tv_apps/browser/js/tooltip.js
Executable file
|
|
@ -0,0 +1,190 @@
|
|||
/* global _ */
|
||||
/* global Toolbar */
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Browser App Tooltip.
|
||||
* @namespace Tooltip
|
||||
*/
|
||||
var Tooltip = {
|
||||
tooltipBlock: null,
|
||||
showTimeoutID: null,
|
||||
hideTimeoutID: null,
|
||||
hideTimeoutData: 100,
|
||||
overObj: null,
|
||||
moveObj: null,
|
||||
showTarget: null,
|
||||
|
||||
/**
|
||||
* initialize
|
||||
*/
|
||||
init: function tooltip_init() {
|
||||
this.tooltipBlock = document.getElementById('tooltip-block');
|
||||
|
||||
var elements = [
|
||||
{target: Toolbar.sidebarButtonBlock},
|
||||
{target: Toolbar.backButtonBlock},
|
||||
{target: Toolbar.forwardButtonBlock},
|
||||
{target: Toolbar.addressButton},
|
||||
{target: Toolbar.searchInput},
|
||||
{target: Toolbar.bookmarkButtonBlock},
|
||||
{target: Toolbar.showBookmarksButtonBlock},
|
||||
{target: Toolbar.homeButtonBlock},
|
||||
{target: Toolbar.zoomButtonBlock},
|
||||
{target: Toolbar.tabsButtonBlock},
|
||||
{target: Toolbar.newTabButtonBlock},
|
||||
{target: Toolbar.menuButtonBlock},
|
||||
{target: Toolbar.modeButtonBlock},
|
||||
];
|
||||
|
||||
this.overObj = this.mouseoverEvent.bind(this);
|
||||
this.moveObj = this.mousemoveEvent.bind(this);
|
||||
// toolbar icon
|
||||
elements.forEach(function addEvent(elm) {
|
||||
var target = elm.target;
|
||||
// add event
|
||||
target.addEventListener('mouseover', this.overObj);
|
||||
target.addEventListener('mouseout', this.mouseoutEvent.bind(this));
|
||||
target.addEventListener('mousedown', this.clickEvent.bind(this));
|
||||
target.addEventListener('mouseup', this.clickEvent.bind(this));
|
||||
}, this);
|
||||
},
|
||||
|
||||
/**
|
||||
* mousemove event
|
||||
*/
|
||||
mousemoveEvent: function tooltip_mousemoveEvent(ev) {
|
||||
if(this.isShow()) {
|
||||
// hide the tooltip in mouse movement at tooltip display.
|
||||
this.stopMousemoveEvent(ev.target);
|
||||
this.hideTimeoutID = setTimeout(function(){
|
||||
Tooltip.hide();
|
||||
}, this.hideTimeoutData);
|
||||
return;
|
||||
}
|
||||
if(this.showTimeoutID) {
|
||||
clearTimeout(this.showTimeoutID);
|
||||
}
|
||||
|
||||
var bounds = ev.currentTarget.getBoundingClientRect();
|
||||
var posY = Math.ceil(bounds.bottom);
|
||||
var top = Math.ceil(bounds.top);
|
||||
var tips = null;
|
||||
if(ev.target.dataset.tips != null && ev.target.dataset.tips != undefined) {
|
||||
if(ev.target == Toolbar.searchInput) {
|
||||
tips = {raw: ev.target.dataset.tips};
|
||||
} else {
|
||||
tips = ev.target.dataset.tips;
|
||||
}
|
||||
}
|
||||
this.showTimeoutID = setTimeout(function(){
|
||||
Tooltip.showTarget = ev.target;
|
||||
var disp = {
|
||||
top: top,
|
||||
text: tips,
|
||||
x: ev.pageX,
|
||||
//y: ev.pageY
|
||||
y: posY,
|
||||
};
|
||||
Tooltip.displaySetting(disp);
|
||||
}, 150);
|
||||
},
|
||||
startMousemoveEvent: function tooltip_startMousemoveEvent(target) {
|
||||
target.addEventListener('mousemove', this.moveObj);
|
||||
},
|
||||
stopMousemoveEvent: function tooltip_stopMousemoveEvent(target) {
|
||||
target.removeEventListener('mousemove', this.moveObj);
|
||||
},
|
||||
|
||||
/**
|
||||
* mouseover event
|
||||
*/
|
||||
mouseoverEvent: function tooltip_mouseoverEvent(ev) {
|
||||
this.startMousemoveEvent(ev.target);
|
||||
},
|
||||
|
||||
/**
|
||||
* mouseout event
|
||||
*/
|
||||
mouseoutEvent: function tooltip_mouseoutEvent(ev) {
|
||||
this.hide();
|
||||
},
|
||||
|
||||
/**
|
||||
* click event
|
||||
*/
|
||||
clickEvent: function tooltip_clickEvent(ev) {
|
||||
this.hide();
|
||||
},
|
||||
|
||||
/**
|
||||
* show tooltip
|
||||
*/
|
||||
isShow: function tooltip_isShow(target) {
|
||||
if(!target){
|
||||
return this.tooltipBlock.classList.contains('visible');
|
||||
} else {
|
||||
if(target == this.showTarget){
|
||||
return this.tooltipBlock.classList.contains('visible');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* show tooltip
|
||||
*/
|
||||
show: function tooltip_show() {
|
||||
this.tooltipBlock.classList.add('visible');
|
||||
},
|
||||
|
||||
/**
|
||||
* hide tooltip
|
||||
*/
|
||||
hide: function tooltip_hide() {
|
||||
clearTimeout(this.showTimeoutID);
|
||||
clearTimeout(this.hideTimeoutID);
|
||||
this.tooltipBlock.classList.remove('visible');
|
||||
},
|
||||
|
||||
/**
|
||||
* display setting
|
||||
*/
|
||||
displaySetting: function tooltip_displaySetting(disp) {
|
||||
if(disp.text == null || disp.text == undefined) {
|
||||
return;
|
||||
}
|
||||
this.show();
|
||||
this.tooltipBlock.style.left = '0px';
|
||||
if (typeof disp.text === 'string') {
|
||||
this.tooltipBlock.setAttribute('data-l10n-id', disp.text);
|
||||
} else if (disp.text.hasOwnProperty('raw')) {
|
||||
this.tooltipBlock.innerHTML = disp.text.replace(/\\n/g, '<br>');
|
||||
}
|
||||
|
||||
// pos x adjustment
|
||||
// 25 = scrollbar margin
|
||||
var maxW = this.tooltipBlock.offsetWidth + disp.x + 25;
|
||||
var posX = disp.x;
|
||||
if(maxW >= Browser.SCREEN_WIDTH) {
|
||||
// 58 = margin
|
||||
posX = Browser.SCREEN_WIDTH - this.tooltipBlock.offsetWidth - 58;
|
||||
}
|
||||
|
||||
// pos y adjustment
|
||||
var bounds = this.tooltipBlock.getBoundingClientRect();
|
||||
var hg = Math.ceil(bounds.height);
|
||||
var posY = disp.y + 20;
|
||||
var maxH = posY + hg;
|
||||
if(maxH >= Browser.SCREEN_HEIGHT) {
|
||||
// hover item
|
||||
posY = disp.top - 20 - hg;
|
||||
}
|
||||
|
||||
this.tooltipBlock.style.top = (posY + 0) + 'px';
|
||||
this.tooltipBlock.style.left = (posX + 0) + 'px';
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in a new issue