b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
941 lines
27 KiB
JavaScript
Executable file
941 lines
27 KiB
JavaScript
Executable file
/* globals KeyEvent */
|
|
|
|
'use strict';
|
|
|
|
(function(exports){
|
|
|
|
/**
|
|
* Max number of list item visible when scroll.
|
|
* @type {Number}
|
|
*/
|
|
const MAX_VISIBLE_ITEM = 7;
|
|
|
|
/**
|
|
* Initial list element query number when first render list view
|
|
* @type {Number}
|
|
*/
|
|
const INIT_LIST_ELEMENT_QUERY_NUMBER = 14;
|
|
|
|
/**
|
|
* Max number of list html element can be render.
|
|
* @type {Number}
|
|
*/
|
|
const MAX_LIST_ELEMENT = 21;
|
|
|
|
/**
|
|
* Height of list item element, unit is rem.
|
|
* @type {Number}
|
|
*/
|
|
const LIST_ITEM_HEIGHT = 12;
|
|
|
|
/**
|
|
* 1rem equals to 10px
|
|
* @type {Number}
|
|
*/
|
|
const PER_REM = 10;
|
|
|
|
/**
|
|
* SmartList constructor
|
|
* @param {Node} el - Target HTML element of SmartList.
|
|
* @param {String} l10nTitle - Smart list title string.
|
|
*/
|
|
function SmartList(el, l10nTitle){
|
|
this.el = el;
|
|
|
|
this.listEl = null;
|
|
|
|
this.listPointerEl = null;
|
|
|
|
this.l10nTitle = l10nTitle;
|
|
|
|
/**
|
|
* Number of list item rendered.
|
|
* @type {Number}
|
|
*/
|
|
this.listItemRenderNum = 0;
|
|
|
|
/**
|
|
* Index of focus element in list.
|
|
* @type {Number}
|
|
*/
|
|
this.focusIndex = 0;
|
|
|
|
/**
|
|
* Index of list item start at.
|
|
* @type {Number}
|
|
*/
|
|
this.listIndexStartAt = 0;
|
|
|
|
/**
|
|
* Index of list item end at.
|
|
* @type {Number}
|
|
*/
|
|
this.listIndexEndAt = 0;
|
|
|
|
/**
|
|
* Index of visible list item start at.
|
|
* @type {Number}
|
|
*/
|
|
this.listVisibleStartAt = 0;
|
|
|
|
/**
|
|
* Current navigation folder.
|
|
* @type {String}
|
|
*/
|
|
this.navState = null;
|
|
|
|
/**
|
|
* Save user browser history.
|
|
* @type {Array}
|
|
*/
|
|
this.navHistory = [];
|
|
|
|
/**
|
|
* list items which in dom tree and been initialized but render with data
|
|
* @type {Array}
|
|
*/
|
|
this.initializedItems = [];
|
|
|
|
/**
|
|
* List item element map
|
|
* @type {Object}
|
|
*/
|
|
this.listItemMap = {};
|
|
|
|
this.init();
|
|
}
|
|
|
|
SmartList.prototype = {
|
|
constructor: SmartList,
|
|
|
|
/**
|
|
* Create smart list dom tree architecture
|
|
*/
|
|
|
|
/**
|
|
* <div class="smart-list-container">
|
|
* <h2 class="smart-list-title" data-l10n-id={this.l10nTitle}></h2>
|
|
* <div class="smart-list-wrap">
|
|
* <ul class="smart-list-view"></ul>
|
|
* <div class="smart-list-mask"></div>
|
|
* <div class="smart-list-pointer"></div>
|
|
* </div>
|
|
* </div>
|
|
*/
|
|
init: function() {
|
|
var container = document.createElement('div'),
|
|
title = document.createElement('h2'),
|
|
listWrap = document.createElement('div'),
|
|
listView = document.createElement('ul'),
|
|
listMask = document.createElement('div'),
|
|
listPointer = document.createElement('div');
|
|
|
|
container.classList.add('smart-list-container');
|
|
title.classList.add('smart-list-title');
|
|
title.setAttribute('data-l10n-id', this.l10nTitle);
|
|
listWrap.classList.add('smart-list-wrap');
|
|
listView.classList.add('smart-list-view');
|
|
listMask.classList.add('smart-list-mask');
|
|
listPointer.classList.add('smart-list-pointer');
|
|
|
|
container.appendChild(title);
|
|
container.appendChild(listWrap);
|
|
listWrap.appendChild(listView);
|
|
listWrap.appendChild(listMask);
|
|
listWrap.appendChild(listPointer);
|
|
|
|
this.el.classList.add('smart-list');
|
|
this.el.addEventListener('keyup', this.handleListKeyUp.bind(this));
|
|
this.el.appendChild(container);
|
|
this.listEl = listView;
|
|
this.listPointerEl = listPointer;
|
|
},
|
|
|
|
/**
|
|
* Open smart list.
|
|
*/
|
|
open: function() {
|
|
this.reset();
|
|
this.dispatchLoadDataByRange(0, INIT_LIST_ELEMENT_QUERY_NUMBER, null,
|
|
(listData) => {
|
|
this.el.classList.add('show');
|
|
|
|
if (listData.length > 0) {
|
|
this.render(listData);
|
|
var focusEl = this.listItemMap[0];
|
|
this.pointerItem(focusEl);
|
|
this.focusItem(focusEl);
|
|
} else {
|
|
this.focusItem(this.el);
|
|
}
|
|
|
|
var event = new Event('open');
|
|
this.el.dispatchEvent(event);
|
|
}
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Close smart list.
|
|
*/
|
|
close: function() {
|
|
var event = new Event('close');
|
|
this.navState = null;
|
|
this.navHistory = [];
|
|
this.el.classList.remove('show');
|
|
this.el.dispatchEvent(event);
|
|
if(this.isPointerDisplay()) {
|
|
this.hideListPointer();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reset smart list
|
|
*/
|
|
reset: function(){
|
|
var key = 0;
|
|
|
|
this.listEl.style.transform = 'translateY(0rem)';
|
|
|
|
this.focusIndex = 0;
|
|
this.listVisibleStartAt = 0;
|
|
this.listIndexStartAt = 0;
|
|
this.listIndexEndAt = 0;
|
|
|
|
for (key in this.listItemMap) {
|
|
if (this.listItemMap.hasOwnProperty(key)) {
|
|
this.resetItem(this.listItemMap[key]);
|
|
this.initializedItems.push(this.listItemMap[key]);
|
|
delete this.listItemMap[key];
|
|
}
|
|
}
|
|
|
|
this.hideListPointer();
|
|
},
|
|
|
|
/**
|
|
* Go back to previous folder. If there is no previous folder, close list.
|
|
*/
|
|
goBack: function() {
|
|
if (!this.navState) {
|
|
this.close();
|
|
} else {
|
|
this.navHistory.pop();
|
|
this.navState = this.getCurNavHistory();
|
|
var folderId = this.navState ? this.navState.folderId : null;
|
|
this.reset();
|
|
this.switchListView(folderId);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Render smart list
|
|
* @param {Array} listData - Array of listData.
|
|
*/
|
|
render: function(listData){
|
|
var itemEl = null,
|
|
i = 0,
|
|
length = listData.length;
|
|
|
|
for (; i < length; i++) {
|
|
/*
|
|
* if there are reseted list item, use these to render data,
|
|
* else create new html element to render data
|
|
*/
|
|
if (this.initializedItems.length > 0) {
|
|
itemEl = this.initializedItems.pop();
|
|
this.updateItem(itemEl, listData[i]);
|
|
} else {
|
|
itemEl = this.createItem(listData[i]);
|
|
this.listEl.appendChild(itemEl);
|
|
this.listItemRenderNum++;
|
|
}
|
|
|
|
itemEl.setAttribute('data-index', i);
|
|
itemEl.style.transform =
|
|
'translateY(' + (LIST_ITEM_HEIGHT * i) + 'rem)';
|
|
this.listItemMap[i] = itemEl;
|
|
}
|
|
this.listIndexEndAt = length - 1;
|
|
},
|
|
|
|
/**
|
|
* Is smart list opened.
|
|
* @return {Boolean} - true when smart list opened.
|
|
*/
|
|
isDisplay: function() {
|
|
return this.el.classList.contains('show');
|
|
},
|
|
|
|
/**
|
|
* Add new list item.
|
|
* @param {Number} index - Index of new list item.
|
|
* @param {Object} data - The list item data.
|
|
*/
|
|
addItem: function(index, data) {
|
|
if (!data) {
|
|
return;
|
|
}
|
|
var itemEl = null,
|
|
transform = 0;
|
|
if (index < this.listIndexStartAt) {
|
|
// add item to the beginning of the list
|
|
if (this.initializedItems.length > 0) {
|
|
itemEl = this.initializedItems.pop();
|
|
this.updateItem(itemEl, data);
|
|
} else if (this.listItemRenderNum === MAX_LIST_ELEMENT){
|
|
itemEl = this.listItemMap[this.listIndexEndAt];
|
|
this.updateItem(itemEl, data);
|
|
delete this.listItemMap[this.listIndexEndAt];
|
|
this.listIndexEndAt--;
|
|
} else {
|
|
itemEl = this.createItem(data);
|
|
this.listEl.appendChild(itemEl);
|
|
this.listItemRenderNum++;
|
|
}
|
|
this.listItemMap[index] = itemEl;
|
|
itemEl.setAttribute('data-index', index);
|
|
transform = (index) * LIST_ITEM_HEIGHT;
|
|
itemEl.style.transform =
|
|
'translateY(' + transform + 'rem)';
|
|
this.listIndexStartAt = index;
|
|
} else if (index > this.listIndexEndAt) {
|
|
// add item to the end of the list
|
|
if (this.initializedItems.length > 0) {
|
|
itemEl = this.initializedItems.pop();
|
|
this.updateItem(itemEl, data);
|
|
} else if (this.listItemRenderNum === MAX_LIST_ELEMENT){
|
|
itemEl = this.listItemMap[this.listIndexStartAt];
|
|
this.updateItem(itemEl, data);
|
|
delete this.listItemMap[this.listIndexStartAt];
|
|
this.listIndexStartAt++;
|
|
} else {
|
|
itemEl = this.createItem(data);
|
|
this.listEl.appendChild(itemEl);
|
|
this.listItemRenderNum++;
|
|
}
|
|
this.listItemMap[index] = itemEl;
|
|
itemEl.setAttribute('data-index', index);
|
|
transform = (index) * LIST_ITEM_HEIGHT;
|
|
itemEl.style.transform =
|
|
'translateY(' + transform + 'rem)';
|
|
this.listIndexEndAt = index;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Create List Item.
|
|
* @param {Object} data - list item data object
|
|
*/
|
|
|
|
/**
|
|
* <li class="list-item">
|
|
* <div class="icon-box icon-box-left">
|
|
* <div class="icon"></div>
|
|
* </div>
|
|
* <div class="text-box">
|
|
* <span class="title"></span>
|
|
* <span class="uri"></span>
|
|
* </div>
|
|
* <div class="icon-box icon-box-right">
|
|
* <div class="icon" data-icon="arrow-right"></div>
|
|
* </div>
|
|
* </li>
|
|
*/
|
|
createItem: function(data) {
|
|
var itemEl = document.createElement('li'),
|
|
iconLeftEl = document.createElement('div'),
|
|
iconImgLeftEl = document.createElement('div'),
|
|
textEl = document.createElement('div'),
|
|
titleEl = document.createElement('span'),
|
|
uriEl = document.createElement('span'),
|
|
iconRightEl = document.createElement('div'),
|
|
iconImgRightEl = document.createElement('div');
|
|
|
|
itemEl.classList.add('list-item');
|
|
itemEl.setAttribute('tabindex', '0');
|
|
itemEl.setAttribute('data-type', data.type);
|
|
iconLeftEl.classList.add('icon-box', 'icon-box-left');
|
|
iconImgLeftEl.classList.add('icon');
|
|
iconLeftEl.appendChild(iconImgLeftEl);
|
|
|
|
textEl.classList.add('text-box');
|
|
titleEl.classList.add('title');
|
|
uriEl.classList.add('uri');
|
|
textEl.appendChild(titleEl);
|
|
textEl.appendChild(uriEl);
|
|
|
|
iconRightEl.classList.add('icon-box', 'icon-box-right');
|
|
iconImgRightEl.classList.add('icon');
|
|
iconRightEl.appendChild(iconImgRightEl);
|
|
|
|
itemEl.appendChild(iconLeftEl);
|
|
itemEl.appendChild(textEl);
|
|
itemEl.appendChild(iconRightEl);
|
|
|
|
this.updateItemContent({
|
|
item: itemEl,
|
|
iconImgLeft: iconImgLeftEl,
|
|
iconImgRight: iconImgRightEl,
|
|
title: titleEl,
|
|
uri: uriEl
|
|
}, data);
|
|
|
|
// XXX: delegate these events later
|
|
itemEl.
|
|
addEventListener('keydown', this.handleItemKeyDown.bind(this));
|
|
itemEl.
|
|
addEventListener('keyup', this.handleItemKeyUp.bind(this));
|
|
itemEl.
|
|
addEventListener('mouseup', this.handleItemMouseUp.bind(this));
|
|
itemEl.
|
|
addEventListener('mouseover', this.handleItemMouseOver.bind(this));
|
|
itemEl.
|
|
addEventListener('mouseout', this.handleItemMouseOut.bind(this));
|
|
|
|
return itemEl;
|
|
},
|
|
|
|
/**
|
|
* Update list item element content.
|
|
* @param {Node} el - HTML list item to update.
|
|
* @param {Object} data - list item data object.
|
|
*/
|
|
updateItem: function(el, data) {
|
|
var iconImgLeftEl = el.querySelector('.icon-box-left .icon'),
|
|
titleEl = el.querySelector('.title'),
|
|
uriEl = el.querySelector('.uri'),
|
|
iconImgRightEl = el.querySelector('.icon-box-right .icon');
|
|
|
|
this.updateItemContent({
|
|
item: el,
|
|
iconImgLeft: iconImgLeftEl,
|
|
iconImgRight: iconImgRightEl,
|
|
title: titleEl,
|
|
uri: uriEl
|
|
}, data);
|
|
},
|
|
|
|
/**
|
|
* Update the content of the elements in an given item.
|
|
* @param {Object} elems - all elements have to be updated.
|
|
* @param {Object} data - list item data object.
|
|
*/
|
|
updateItemContent: function(elems, data) {
|
|
var itemEl = elems.item,
|
|
iconImgLeftEl = elems.iconImgLeft,
|
|
iconImgRightEl = elems.iconImgRight,
|
|
titleEl = elems.title,
|
|
uriEl = elems.uri;
|
|
|
|
if (data.readOnly) {
|
|
itemEl.setAttribute('readOnly', data.readOnly);
|
|
} else {
|
|
itemEl.setAttribute('readOnly', false);
|
|
}
|
|
|
|
if (data.type) {
|
|
itemEl.setAttribute('data-type', data.type);
|
|
switch (data.type) {
|
|
case 'folder':
|
|
itemEl.setAttribute('data-folder', data.id);
|
|
iconImgLeftEl.style.backgroundImage = '';
|
|
iconImgLeftEl.setAttribute('data-icon', 'folder');
|
|
titleEl.textContent = data.title;
|
|
uriEl.textContent = '';
|
|
iconImgRightEl.setAttribute('data-icon', 'arrow-right');
|
|
break;
|
|
case 'bookmark':
|
|
itemEl.setAttribute('data-folder', '');
|
|
if (data.iconUri) {
|
|
iconImgLeftEl.style.backgroundImage = 'url(' + data.iconUri +')';
|
|
iconImgLeftEl.setAttribute('data-icon', '');
|
|
} else {
|
|
iconImgLeftEl.style.backgroundImage = '';
|
|
iconImgLeftEl.setAttribute('data-icon', 'default-fav');
|
|
}
|
|
titleEl.textContent = data.title ? data.title : data.uri;
|
|
uriEl.textContent = data.uri;
|
|
iconImgRightEl.setAttribute('data-icon', '');
|
|
break;
|
|
case 'button':
|
|
itemEl.setAttribute('data-folder', '');
|
|
iconImgLeftEl.style.backgroundImage = '';
|
|
iconImgLeftEl.setAttribute('data-icon', 'arrow-left');
|
|
titleEl.textContent = data.title;
|
|
uriEl.textContent = '';
|
|
iconImgRightEl.setAttribute('data-icon', '');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
} else {
|
|
// The records without "type" will be recognized as history records.
|
|
itemEl.setAttribute('data-type', 'bookmark');
|
|
itemEl.setAttribute('data-folder', '');
|
|
if (data.iconUri) {
|
|
iconImgLeftEl.setAttribute('data-icon', '');
|
|
iconImgLeftEl.style.backgroundImage = 'url(' + data.iconUri +')';
|
|
} else {
|
|
iconImgLeftEl.setAttribute('data-icon', 'default-fav');
|
|
iconImgLeftEl.style.backgroundImage = '';
|
|
}
|
|
titleEl.textContent = data.title ? data.title : data.uri;
|
|
uriEl.textContent = data.uri;
|
|
iconImgRightEl.setAttribute('data-icon', '');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Remove the focus list item.
|
|
*/
|
|
removeFocusItem: function() {
|
|
var targetEl = null,
|
|
i = 0;
|
|
|
|
targetEl = this.listItemMap[this.focusIndex];
|
|
if (targetEl) {
|
|
this.resetItem(targetEl);
|
|
this.initializedItems.push(targetEl);
|
|
|
|
//reindex and update transform of the element behind the focus index
|
|
for (i = this.focusIndex; i < this.listIndexEndAt; i++) {
|
|
this.listItemMap[i] = this.listItemMap[i+1];
|
|
targetEl = this.listItemMap[i];
|
|
targetEl.setAttribute('data-index', i);
|
|
this.shiftElement(targetEl, (-1 * LIST_ITEM_HEIGHT));
|
|
}
|
|
|
|
delete this.listItemMap[this.listIndexEndAt];
|
|
this.listIndexEndAt--;
|
|
|
|
// if the removed item is the last item of index,
|
|
// focus the new last element
|
|
if (this.listItemMap[this.focusIndex]) {
|
|
this.focusItem(this.listItemMap[this.focusIndex]);
|
|
} else if (this.listIndexEndAt !== -1) {
|
|
this.focusIndex = this.listIndexEndAt;
|
|
this.focusItem(this.listItemMap[this.focusIndex]);
|
|
}
|
|
|
|
var event = new Event('itemRemoved');
|
|
this.el.dispatchEvent(event);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Focus list item.
|
|
* @param {Node} el - HTML list item to focus.
|
|
*/
|
|
focusItem: function(el) {
|
|
el.focus();
|
|
},
|
|
|
|
pointerItem: function(el) {
|
|
var pos = el.getBoundingClientRect(),
|
|
transposX = (Math.ceil(pos.right) - 120 ) / PER_REM,
|
|
transposY = (Math.ceil(pos.bottom) - 40 ) / PER_REM;
|
|
|
|
this.listPointerEl.style.transform =
|
|
'translate(' + transposX + 'rem,' + transposY + 'rem)';
|
|
this.showListPointer();
|
|
},
|
|
|
|
/**
|
|
* Focus the First visible list item.
|
|
*/
|
|
focusFirstVisibleItem: function() {
|
|
var targetEl = null;
|
|
|
|
// if there is list item rendered and the current active element not in
|
|
// smart list, focus the first visible list item.
|
|
if (this.listIndexEndAt !== -1 &&
|
|
Array.prototype.indexOf.call(
|
|
this.listEl.children,
|
|
document.activeElement) === -1) {
|
|
this.focusIndex = this.listVisibleStartAt;
|
|
targetEl = this.listItemMap[this.focusIndex];
|
|
if (targetEl) {
|
|
this.pointerItem(targetEl);
|
|
this.focusItem(targetEl);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reset list item.
|
|
* @param {Node} el - HTML list item to focus.
|
|
*/
|
|
resetItem: function(el) {
|
|
var iconImgEl = el.querySelector('.icon-box-left .icon'),
|
|
titleEl = el.querySelector('.title'),
|
|
uriEl = el.querySelector('.uri');
|
|
|
|
el.setAttribute('data-index', -1);
|
|
el.setAttribute('data-type', '');
|
|
el.setAttribute('data-folder', '');
|
|
el.setAttribute('readOnly', false);
|
|
el.style.transform = '';
|
|
iconImgEl.style.backgroundImage = '';
|
|
iconImgEl.setAttribute('data-icon', '');
|
|
titleEl.textContent = '';
|
|
uriEl.textContent = '';
|
|
},
|
|
|
|
/**
|
|
* Preload the item out of visible view.
|
|
* @param {Number} listIndex - preload list index.
|
|
*/
|
|
preloadItem: function(listIndex) {
|
|
var dataIndex = 0;
|
|
|
|
if (this.navState) {
|
|
if (listIndex === 0) {
|
|
var data = this.generateBackButtonData(this.navState.folderTitle);
|
|
this.addItem(0, data);
|
|
} else {
|
|
dataIndex = listIndex - 1;
|
|
this.dispatchLoadDataByIndex(
|
|
listIndex,
|
|
dataIndex,
|
|
this.navState.folderId
|
|
);
|
|
}
|
|
} else {
|
|
dataIndex = listIndex;
|
|
this.dispatchLoadDataByIndex(
|
|
listIndex,
|
|
dataIndex,
|
|
null
|
|
);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shift list item transform
|
|
* @param {Node} el - list item element to transform
|
|
* @param {Nunber} shift - shift transform, unit is rem
|
|
*/
|
|
shiftElement: function(el, shift) {
|
|
var style = el.style.transform.split('('),
|
|
transform = parseInt(style[1], 10);
|
|
transform += shift;
|
|
el.style.transform =
|
|
'translateY(' + transform + 'rem) translateZ(0.01px)';
|
|
},
|
|
|
|
/**
|
|
* Get Focus list element's index
|
|
*/
|
|
getFocusItemIndex: function() {
|
|
return this.focusIndex;
|
|
},
|
|
|
|
/**
|
|
* Get Focus list element's uri content
|
|
*/
|
|
getFocusItemUri: function() {
|
|
var targetEl = this.listItemMap[this.focusIndex];
|
|
return targetEl ? targetEl.querySelector('.uri').textContent : null;
|
|
},
|
|
|
|
/**
|
|
* Get Focus list element's title content
|
|
*/
|
|
getFocusItemTitle: function() {
|
|
var targetEl = this.listItemMap[this.focusIndex];
|
|
return targetEl ? targetEl.querySelector('.title').textContent : null;
|
|
},
|
|
|
|
/**
|
|
* Update focus list element's title content
|
|
* @param {String} title - title to update
|
|
*/
|
|
updateFocusItemTitle: function(title) {
|
|
var targetEl = this.listItemMap[this.focusIndex];
|
|
|
|
if (targetEl) {
|
|
targetEl.querySelector('.title').textContent = title;
|
|
this.focusItem(targetEl);
|
|
var event = new Event('itemUpdated');
|
|
this.el.dispatchEvent(event);
|
|
}
|
|
},
|
|
|
|
isPointerDisplay: function() {
|
|
return this.listPointerEl.classList.contains('show');
|
|
},
|
|
|
|
showListPointer: function() {
|
|
this.listPointerEl.classList.add('show');
|
|
},
|
|
|
|
hideListPointer: function() {
|
|
this.listPointerEl.classList.remove('show');
|
|
},
|
|
|
|
/**
|
|
* Add folder id and folder title
|
|
* @param {[type]} folderId [description]
|
|
* @param {[type]} folderTitle [description]
|
|
*/
|
|
addNavHistory: function(folderId, folderTitle) {
|
|
this.navHistory.push({
|
|
folderId: folderId,
|
|
folderTitle: folderTitle
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Get current user browse state.
|
|
* @return {String} current user browse folder.
|
|
*/
|
|
getCurNavHistory: function() {
|
|
var len = this.navHistory.length;
|
|
if (len > 0) {
|
|
return this.navHistory[len - 1];
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Generate back button data.
|
|
* @return {Object} - back button data
|
|
*/
|
|
generateBackButtonData: function(title) {
|
|
return {
|
|
type: 'button',
|
|
title: 'Back to ' + title
|
|
};
|
|
},
|
|
|
|
switchListView: function(folderId) {
|
|
this.dispatchLoadDataByRange(0, INIT_LIST_ELEMENT_QUERY_NUMBER, folderId,
|
|
(listData) => {
|
|
// if user is browser list data in a folder,
|
|
// add back button data at the first place of listData
|
|
if (this.navState) {
|
|
listData.unshift(
|
|
this.generateBackButtonData(this.navState.folderTitle)
|
|
);
|
|
}
|
|
|
|
if (listData.length === 0) {
|
|
return;
|
|
}
|
|
|
|
this.render(listData);
|
|
|
|
// focus the first item in list. if the first item is button and list
|
|
// item length is bigger than 1, focus the second item
|
|
this.focusIndex = 0;
|
|
if (this.navState && this.listIndexEndAt > 0) {
|
|
this.focusIndex = 1;
|
|
}
|
|
var focusEl = this.listItemMap[this.focusIndex];
|
|
this.pointerItem(focusEl);
|
|
this.focusItem(focusEl);
|
|
}
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Move focus to the previous element
|
|
*/
|
|
moveFocusIndexUp: function() {
|
|
this.focusIndex -= 1;
|
|
var preloadItemIndex = this.focusIndex - MAX_VISIBLE_ITEM;
|
|
if (preloadItemIndex >= 0 && preloadItemIndex < this.listIndexStartAt) {
|
|
this.preloadItem(preloadItemIndex);
|
|
}
|
|
|
|
// if the new focus element is before this.listVisibleStartAt,
|
|
// update list item's transform to shift down
|
|
var targetEl = this.listItemMap[this.focusIndex];
|
|
if (this.focusIndex < this.listVisibleStartAt) {
|
|
this.listVisibleStartAt--;
|
|
this.shiftElement(this.listEl, LIST_ITEM_HEIGHT);
|
|
this.focusItem(targetEl);
|
|
} else {
|
|
this.pointerItem(targetEl);
|
|
this.focusItem(targetEl);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Move focus to the next element
|
|
*/
|
|
moveFocusIndexDown: function() {
|
|
this.focusIndex += 1;
|
|
|
|
// pre-load list item later then listIndexEndAt
|
|
var preloadItemIndex = this.focusIndex + MAX_VISIBLE_ITEM;
|
|
if (preloadItemIndex > this.listIndexEndAt) {
|
|
this.preloadItem(preloadItemIndex);
|
|
}
|
|
|
|
// if the new focus element is after this.listIndexEndAt,
|
|
// update list item's transform to shift up
|
|
var targetEl = this.listItemMap[this.focusIndex];
|
|
if ((this.focusIndex - this.listVisibleStartAt) ===
|
|
MAX_VISIBLE_ITEM ) {
|
|
this.listVisibleStartAt++;
|
|
this.shiftElement(this.listEl, (-1 * LIST_ITEM_HEIGHT));
|
|
this.focusItem(targetEl);
|
|
} else {
|
|
this.pointerItem(targetEl);
|
|
this.focusItem(targetEl);
|
|
}
|
|
},
|
|
|
|
handleListKeyUp: function(e) {
|
|
switch(e.keyCode){
|
|
case KeyEvent.DOM_VK_ESCAPE:
|
|
case KeyEvent.DOM_VK_BACK_SPACE:
|
|
this.goBack();
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
},
|
|
|
|
handleItemKeyDown: function(e) {
|
|
switch(e.keyCode){
|
|
case KeyEvent.DOM_VK_UP:
|
|
if(this.focusIndex > this.listIndexStartAt) {
|
|
this.moveFocusIndexUp();
|
|
}
|
|
break;
|
|
case KeyEvent.DOM_VK_DOWN:
|
|
if(this.focusIndex < this.listIndexEndAt) {
|
|
this.moveFocusIndexDown();
|
|
}
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
},
|
|
|
|
handleItemKeyUp: function(e) {
|
|
switch(e.keyCode){
|
|
case KeyEvent.DOM_VK_SUBMENU:
|
|
this.handleKeySubmenu(e);
|
|
break;
|
|
case KeyEvent.DOM_VK_RETURN:
|
|
this.handleKeyReturn(e);
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
},
|
|
|
|
handleItemMouseUp: function(e) {
|
|
switch(e.button){
|
|
case 0 :
|
|
// left click
|
|
this.handleKeyReturn(e);
|
|
break;
|
|
case 2:
|
|
//right click
|
|
this.handleKeySubmenu(e);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
|
|
handleItemMouseOver: function(e) {
|
|
var targetEl = e.currentTarget;
|
|
if (targetEl) {
|
|
var dataIndex = targetEl.getAttribute('data-index');
|
|
var event = new CustomEvent('mouseOverItem', {detail: targetEl});
|
|
targetEl.focus();
|
|
this.focusIndex = parseInt(dataIndex, 10);
|
|
this.el.dispatchEvent(event);
|
|
}
|
|
},
|
|
|
|
handleItemMouseOut: function(e) {
|
|
var targetEl = e.currentTarget;
|
|
if (targetEl) {
|
|
this.hideListPointer();
|
|
targetEl.blur();
|
|
}
|
|
},
|
|
|
|
handleKeyReturn: function(e) {
|
|
var targetEl = e.currentTarget,
|
|
type = targetEl.getAttribute('data-type'),
|
|
folderId = null;
|
|
|
|
switch(type) {
|
|
case 'folder':
|
|
var folderTitle = targetEl.querySelector('.title').textContent;
|
|
|
|
folderId = targetEl.getAttribute('data-folder');
|
|
this.addNavHistory(folderId, folderTitle);
|
|
this.navState = this.getCurNavHistory();
|
|
this.reset();
|
|
this.switchListView(folderId);
|
|
break;
|
|
case 'bookmark':
|
|
var uriEL = targetEl.querySelector('.uri');
|
|
if (uriEL) {
|
|
this.dispatchDisplayWebsite(uriEL.textContent);
|
|
this.close();
|
|
}
|
|
break;
|
|
case 'button':
|
|
this.navHistory.pop();
|
|
this.navState = this.getCurNavHistory();
|
|
folderId = this.navState ? this.navState.folderId : null;
|
|
this.reset();
|
|
this.switchListView(folderId);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
|
|
handleKeySubmenu: function(e) {
|
|
var targetEl = e.currentTarget;
|
|
if (targetEl.getAttribute('data-type') === 'bookmark') {
|
|
var event = new CustomEvent('showSubMenu', {
|
|
detail: {
|
|
readOnly: targetEl.getAttribute('readOnly')
|
|
}
|
|
});
|
|
this.el.dispatchEvent(event);
|
|
}
|
|
},
|
|
|
|
dispatchDisplayWebsite: function(uri) {
|
|
var event = new CustomEvent('displayWebsite', {detail: uri});
|
|
this.el.dispatchEvent(event);
|
|
},
|
|
|
|
dispatchLoadDataByRange: function(start, number, folderId, cb) {
|
|
var eventDetail = {
|
|
startAt: start,
|
|
number: number,
|
|
folderId: folderId,
|
|
callback: cb
|
|
};
|
|
var event = new CustomEvent('loadDataByRange', {detail: eventDetail});
|
|
this.el.dispatchEvent(event);
|
|
},
|
|
|
|
dispatchLoadDataByIndex: function(listIndex, dataIndex, navState) {
|
|
var event = new CustomEvent('loadDataByIndex', {
|
|
detail: {
|
|
listIndex: listIndex,
|
|
dataIndex: dataIndex,
|
|
folderId: navState
|
|
}});
|
|
this.el.dispatchEvent(event);
|
|
}
|
|
};
|
|
|
|
exports.SmartList = SmartList;
|
|
})(window);
|