mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update tabs

Browse source
This commit is contained in:
Luke Pulverenti 2016-08-14 15:58:13 -04:00
parent ce30e1391e
commit 93ebd18a5c
24 changed files with 602 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/scripts/channels.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'cardBuilder', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
define(['libraryBrowser', 'cardBuilder', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, cardBuilder) {
// The base query options
var query = {

8
dashboard-ui/scripts/indexpage.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser'], function (libraryBrowser) {
define(['libraryBrowser', 'emby-tabs', 'emby-button'], function (libraryBrowser) {
var defaultFirstSection = 'smalllibrarytiles';
@ -343,11 +343,7 @@
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
mdlTabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(mdlTabs)
}
}));
mdlTabs.triggerTabChange();
}
}

202
dashboard-ui/scripts/librarybrowser.js
View file

@ -1,8 +1,8 @@
define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'imageLoader', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom) {
define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'browser', 'imageLoader', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom, browser) {
function fadeInRight(elem) {
var pct = browserInfo.mobile ? '4%' : '0.5%';
var pct = browser.mobile ? '4%' : '0.5%';
var keyframes = [
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
@ -15,28 +15,6 @@
});
}
function animateSelectionBar(button) {
var elem = button.querySelector('.pageTabButtonSelectionBar');
if (!elem) {
return;
}
var keyframes = [
{ transform: 'translate3d(-100%, 0, 0)', offset: 0 },
{ transform: 'none', offset: 1 }];
if (!elem.animate) {
return;
}
elem.animate(keyframes, {
duration: 120,
iterations: 1,
easing: 'ease-out'
});
}
var libraryBrowser = (function (window, document, screen) {
var pageSizeKey = 'pagesize_v4';
@ -135,35 +113,9 @@
return true;
},
selectedTab: function (tabs, selected) {
if (selected == null) {
return tabs.selectedTabIndex || 0;
}
var current = LibraryBrowser.selectedTab(tabs);
tabs.selectedTabIndex = selected;
if (current == selected) {
tabs.dispatchEvent(new CustomEvent("beforetabchange", {
detail: {
selectedTabIndex: selected
}
}));
tabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: selected
}
}));
} else {
var tabButtons = tabs.querySelectorAll('.pageTabButton');
tabButtons[selected].click();
}
},
configureSwipeTabs: function (ownerpage, tabs) {
if (!browserInfo.touch) {
if (!browser.touch) {
return;
}
@ -176,18 +128,18 @@
hammertime.on('swipeleft', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(LibraryBrowser.selectedTab(tabs) || '0');
var selected = parseInt(tabs.selectedIndex() || '0');
if (selected < (pageCount - 1)) {
LibraryBrowser.selectedTab(tabs, selected + 1);
tabs.selectedIndex(selected + 1);
}
}
});
hammertime.on('swiperight', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(LibraryBrowser.selectedTab(tabs) || '0');
var selected = parseInt(tabs.selectedIndex() || '0');
if (selected > 0) {
LibraryBrowser.selectedTab(tabs, selected - 1);
tabs.selectedIndex(selected - 1);
}
}
});
@ -196,150 +148,62 @@
configurePaperLibraryTabs: function (ownerpage, tabs, panels, animateTabs) {
if (!browserInfo.safari) {
if (!browser.safari) {
LibraryBrowser.configureSwipeTabs(ownerpage, tabs);
}
if (!browserInfo.safari || !AppInfo.isNativeApp) {
var buttons = tabs.querySelectorAll('.pageTabButton');
for (var i = 0, length = buttons.length; i < length; i++) {
var div = document.createElement('div');
div.classList.add('pageTabButtonSelectionBar');
buttons[i].appendChild(div);
}
}
ownerpage.addEventListener('viewshow', LibraryBrowser.onTabbedpagebeforeshow);
tabs.addEventListener('click', function (e) {
var current = tabs.querySelector('.is-active');
var link = dom.parentWithClass(e.target, 'pageTabButton');
if (link && link != current) {
if (current) {
current.classList.remove('is-active');
panels[parseInt(current.getAttribute('data-index'))].classList.remove('is-active');
}
link.classList.add('is-active');
animateSelectionBar(link);
var index = parseInt(link.getAttribute('data-index'));
var newPanel = panels[index];
tabs.dispatchEvent(new CustomEvent("beforetabchange", {
detail: {
selectedTabIndex: index
}
}));
// If toCenter is called syncronously within the click event, it sometimes ends up canceling it
setTimeout(function () {
if (animateTabs && animateTabs.indexOf(index) != -1 && /*browserInfo.animate &&*/ newPanel.animate) {
fadeInRight(newPanel);
}
tabs.selectedTabIndex = index;
tabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: index
}
}));
newPanel.classList.add('is-active');
}, 120);
if (tabs.scroller) {
tabs.scroller.toCenter(link, false);
}
tabs.addEventListener('beforetabchange', function(e) {
if (e.detail.previousIndex != null) {
panels[e.detail.previousIndex].classList.remove('is-active');
}
});
ownerpage.addEventListener('viewbeforeshow', LibraryBrowser.onTabbedpagebeforeshow);
tabs.addEventListener('beforetabchange', function (e) {
var contentScrollSlider = tabs.querySelector('.contentScrollSlider');
if (contentScrollSlider) {
tabs.scroller = new scroller(tabs, {
horizontal: 1,
itemNav: 0,
mouseDragging: 1,
touchDragging: 1,
slidee: tabs.querySelector('.contentScrollSlider'),
smart: true,
releaseSwing: true,
scrollBy: 200,
speed: 120,
elasticBounds: 1,
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
//centerOffset: window.innerWidth * .05,
hiddenScroll: true,
var newPanel = panels[e.detail.selectedTabIndex];
// In safari the transform is causing the headers to occasionally disappear or flicker
requireAnimation: !browserInfo.safari
});
tabs.scroller.init();
} else {
tabs.classList.add('hiddenScrollX');
}
if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) {
fadeInRight(newPanel);
}
}
newPanel.classList.add('is-active');
});
},
onTabbedpagebeforeshow: function (e) {
var page = e.target;
var delay = 0;
var isFirstLoad = false;
if (!page.getAttribute('data-firstload')) {
var pageTabsContainer = page.querySelector('.libraryViewNav');
if (!pageTabsContainer || !pageTabsContainer.triggerTabChange) {
delay = 300;
isFirstLoad = true;
page.setAttribute('data-firstload', '1');
}
if (delay) {
setTimeout(function () {
LibraryBrowser.onTabbedpagebeforeshowInternal(page, e, isFirstLoad);
LibraryBrowser.onTabbedpagebeforeshowInternal(page, e);
}, delay);
} else {
LibraryBrowser.onTabbedpagebeforeshowInternal(page, e, isFirstLoad);
LibraryBrowser.onTabbedpagebeforeshowInternal(page, e);
}
},
onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
onTabbedpagebeforeshowInternal: function (page, e) {
var pageTabsContainer = page.querySelector('.libraryViewNav');
if (isFirstLoad) {
console.log('selected tab is null, checking query string');
var selected = page.firstTabIndex != null ? page.firstTabIndex : parseInt(getParameterByName('tab') || '0');
console.log('selected tab will be ' + selected);
LibraryBrowser.selectedTab(pageTabsContainer, selected);
} else {
// Go back to the first tab
if (!e.detail.isRestored) {
LibraryBrowser.selectedTab(pageTabsContainer, 0);
return;
}
pageTabsContainer.dispatchEvent(new CustomEvent("beforetabchange", {
detail: {
selectedTabIndex: LibraryBrowser.selectedTab(pageTabsContainer)
}
}));
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: LibraryBrowser.selectedTab(pageTabsContainer)
}
}));
// Go back to the first tab
if (!e.detail.isRestored) {
pageTabsContainer.selectedIndex(0);
return;
}
pageTabsContainer.triggerTabChange();
},
showTab: function (url, index) {
@ -814,7 +678,7 @@
document.body.appendChild(dlg);
// Seeing an issue in Firefox and IE where it's initially visible in the bottom right, then moves to the center
var delay = browserInfo.animate ? 0 : 100;
var delay = browser.animate ? 0 : 100;
setTimeout(function () {
dialogHelper.open(dlg);
}, delay);

36
dashboard-ui/scripts/librarymenu.js
View file

@ -645,32 +645,30 @@
viewMenuBarTabs.classList.remove('hide');
}
if (LibraryMenu.tabType != type) {
require(['emby-tabs', 'emby-button'], function () {
if (LibraryMenu.tabType != type) {
var index = 0;
var index = 0;
viewMenuBarTabs.innerHTML = '<div class="libraryViewNav hiddenScrollX">' + builder().map(function (t) {
viewMenuBarTabs.innerHTML = '<div is="emby-tabs"><div class="emby-tabs-slider">' + builder().map(function (t) {
var tabClass = selectedIndex == index ? 'pageTabButton is-active' : 'pageTabButton';
var tabClass = selectedIndex == index ? 'emby-tab-button emby-tab-button-active' : 'emby-tab-button';
var tabHtml = '<a class="' + tabClass + '" href="' + t.href + '" data-index="' + index + '">' + t.name + '<div class="pageTabButtonSelectionBar"></div></a>';
index++;
return tabHtml;
var tabHtml = '<button onclick="Dashboard.navigate(this.getAttribute(\'data-href\'));" data-href="' + t.href + '" is="emby-button" class="' + tabClass + '" data-index="' + index + '"><div class="emby-button-foreground">' + t.name + '</div></button>';
index++;
return tabHtml;
}).join('') + '</div>';
}).join('') + '</div></div>';
document.body.classList.add('withTallToolbar');
document.body.classList.add('withTallToolbar');
LibraryMenu.tabType = type;
return;
}
viewMenuBarTabs.querySelector('is=["emby-tabs"]').selectedIndex(selectedIndex);
LibraryMenu.tabType = type;
return;
}
var activeTab = viewMenuBarTabs.querySelector('.is-active');
var newTab = viewMenuBarTabs.querySelector('.pageTabButton[data-index="' + selectedIndex + '"]');
newTab.classList.add('is-active');
if (newTab != activeTab && activeTab) {
activeTab.classList.remove('is-active');
}
LibraryMenu.tabType = type;
});
},
setTitle: function (title) {

2
dashboard-ui/scripts/livetvsuggested.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, cardBuilder) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;

8
dashboard-ui/scripts/moviesrecommended.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
@ -323,11 +323,7 @@
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
renderedTabs = [];
mdlTabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(mdlTabs)
}
}));
mdlTabs.triggerTabChange();
}
}

2
dashboard-ui/scripts/musicrecommended.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, cardBuilder) {
function itemsPerRow() {

2
dashboard-ui/scripts/nowplayingpage.js
View file

@ -1,4 +1,4 @@
define(['components/remotecontrol'], function (remotecontrolFactory) {
define(['components/remotecontrol', 'emby-tabs', 'emby-button'], function (remotecontrolFactory) {
return function (view, params) {

1
dashboard-ui/scripts/site.js
View file

@ -1268,6 +1268,7 @@ var AppInfo = {};
define("emby-collapse", [embyWebComponentsBowerPath + "/emby-collapse/emby-collapse"], returnFirstDependency);
define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency);
define("emby-itemscontainer", [embyWebComponentsBowerPath + "/emby-itemscontainer/emby-itemscontainer"], returnFirstDependency);
define("emby-tabs", [embyWebComponentsBowerPath + "/emby-tabs/emby-tabs"], returnFirstDependency);
define("itemHoverMenu", [embyWebComponentsBowerPath + "/itemhovermenu/itemhovermenu"], returnFirstDependency);
define("multiSelect", [embyWebComponentsBowerPath + "/multiselect/multiselect"], returnFirstDependency);
define("alphaPicker", [embyWebComponentsBowerPath + "/alphapicker/alphapicker"], returnFirstDependency);

8
dashboard-ui/scripts/tvrecommended.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
return function (view, params) {
@ -209,11 +209,7 @@
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
renderedTabs = [];
mdlTabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(mdlTabs)
}
}));
mdlTabs.triggerTabChange();
}
}