Open Media Library
This commit is contained in:
commit
2ee2bc178a
228 changed files with 85988 additions and 0 deletions
349
static/js/URL.js
Normal file
349
static/js/URL.js
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
'use strict';
|
||||
|
||||
oml.URL = (function() {
|
||||
|
||||
var self = {}, that = {};
|
||||
|
||||
function getHash(state, callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
function getItem(state, string, callback) {
|
||||
oml.api.get({id: string, keys: ['id']}, function(result) {
|
||||
if (result.status.code == 200) {
|
||||
state.item = result.data.id;
|
||||
}
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
function getPart(state, string, callback) {
|
||||
var parts = Ox.getObjectById(oml.config.pages, state.page).parts || [];
|
||||
if (Ox.contains(parts, string)) {
|
||||
state.part = string;
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
function getSort(state, value, callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
function getSpan(state, value, callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
// translates UI settings to URL state
|
||||
function getState() {
|
||||
|
||||
var state = {},
|
||||
ui = oml.user.ui;
|
||||
|
||||
if (ui.page) {
|
||||
state.page = ui.page;
|
||||
if (Ox.contains(Object.keys(oml.config.user.ui.part), state.page)) {
|
||||
state.part = ui.part[state.page];
|
||||
}
|
||||
} else {
|
||||
|
||||
state.type = ui.section;
|
||||
state.item = ui.item;
|
||||
|
||||
if (ui.section == 'books') {
|
||||
if (!ui.item) {
|
||||
state.view = ui.listView;
|
||||
state.sort = [ui.listSort[0]];
|
||||
state.find = ui.find;
|
||||
} else {
|
||||
state.view = ui.itemView;
|
||||
if (ui.itemView == 'book') {
|
||||
state.span = ui.mediaState[state.item] || [0, 1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return state;
|
||||
|
||||
}
|
||||
|
||||
function getURLOptions() {
|
||||
|
||||
var sortKeys = {},
|
||||
ui = oml.user.ui,
|
||||
views = {};
|
||||
|
||||
views['books'] = {
|
||||
// ui.listView is the default view
|
||||
list: [ui.listView].concat(
|
||||
oml.config.listViews.filter(function(view) {
|
||||
return view.id != ui.listView;
|
||||
}).map(function(view) {
|
||||
return view.id;
|
||||
})
|
||||
),
|
||||
// ui.itemView is the default view,
|
||||
item: [ui.itemView].concat(
|
||||
oml.config.itemViews.filter(function(view) {
|
||||
return view.id != ui.itemView;
|
||||
}).map(function(view) {
|
||||
return view.id;
|
||||
})
|
||||
)
|
||||
};
|
||||
|
||||
sortKeys['books'] = {list: {}, item: {}};
|
||||
views['books'].list.forEach(function(view) {
|
||||
sortKeys['books'].list[view] = [].concat(
|
||||
// ui.listSort[0].key is the default sort key
|
||||
Ox.getObjectById(oml.config.sortKeys, ui.listSort[0].key),
|
||||
oml.config.sortKeys.filter(function(key) {
|
||||
return key.id != ui.listSort[0].key;
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
findKeys: [{id: 'list', type: 'string'}].concat(
|
||||
oml.config.itemKeys
|
||||
),
|
||||
pages: oml.config.pages.map(function(page) {
|
||||
return page.id;
|
||||
}),
|
||||
spanType: {
|
||||
books: {
|
||||
list: {},
|
||||
item: {
|
||||
book: 'FIXME, no idea'
|
||||
}
|
||||
}
|
||||
},
|
||||
sortKeys: sortKeys,
|
||||
types: ['books'],
|
||||
views: views
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// translates URL state to UI settings
|
||||
function setState(state, callback) {
|
||||
|
||||
var set = {},
|
||||
ui = oml.user.ui;
|
||||
|
||||
ui._list = oml.getListState(ui.find);
|
||||
ui._filterState = oml.getFilterState(ui.find);
|
||||
ui._findState = oml.getFindState(ui.find);
|
||||
|
||||
if (Ox.isEmpty(state)) {
|
||||
|
||||
callback && callback();
|
||||
|
||||
} else {
|
||||
|
||||
if (state.page) {
|
||||
|
||||
set.page = state.page;
|
||||
if (
|
||||
Ox.contains(Object.keys(oml.config.user.ui.part), state.page)
|
||||
&& state.part
|
||||
) {
|
||||
set['part.' + state.page] = state.part;
|
||||
}
|
||||
oml.UI.set(set);
|
||||
callback && callback();
|
||||
|
||||
} else {
|
||||
|
||||
set.page = '';
|
||||
|
||||
if (state.type) {
|
||||
set.section = state.type;
|
||||
set.item = state.item;
|
||||
}
|
||||
|
||||
if (set.section == 'books') {
|
||||
|
||||
if (state.view) {
|
||||
set[!state.item ? 'listView' : 'itemView'] = state.view;
|
||||
}
|
||||
|
||||
if (state.sort) {
|
||||
set[!state.item ? 'listSort' : 'itemSort'] = state.sort;
|
||||
}
|
||||
|
||||
if (state.span) {
|
||||
if (state.view == 'book') {
|
||||
set['mediaState.' + state.item] = {
|
||||
position: state.span[0],
|
||||
zoom: state.span[1]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (!state.item) {
|
||||
if (state.find) {
|
||||
set.find = state.find;
|
||||
} else if (!oml.$ui.appPanel) {
|
||||
// when loading results without find, clear find, so that
|
||||
// removing a query and reloading works as expected
|
||||
set.find = oml.config.user.ui.find;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Ox.Request.cancel();
|
||||
|
||||
if (!oml.$ui.appPanel && state.item && ui.find) {
|
||||
// on page load, if item is set and there was a query,
|
||||
// we have to check if the item actually matches the query,
|
||||
// and otherwise reset find
|
||||
oml.api.find({
|
||||
query: ui.find,
|
||||
positions: [state.item],
|
||||
sort: [{key: 'id', operator: ''}]
|
||||
}, function(result) {
|
||||
if (Ox.isUndefined(result.data.positions[state.item])) {
|
||||
set.find = oml.config.user.ui.find
|
||||
}
|
||||
oml.UI.set(set);
|
||||
callback && callback();
|
||||
});
|
||||
} else {
|
||||
oml.UI.set(set);
|
||||
callback && callback();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
that.init = function() {
|
||||
|
||||
self.URL = Ox.URL(Ox.extend({
|
||||
getHash: getHash,
|
||||
getItem: getItem,
|
||||
getPart: getPart,
|
||||
getSort: getSort,
|
||||
getSpan: getSpan,
|
||||
}, getURLOptions()));
|
||||
|
||||
window.addEventListener('hashchange', function() {
|
||||
Ox.Request.cancel();
|
||||
that.parse();
|
||||
});
|
||||
|
||||
window.addEventListener('popstate', function(e) {
|
||||
Ox.Request.cancel();
|
||||
self.isPopState = true;
|
||||
$('.OxDialog:visible').each(function() {
|
||||
Ox.UI.elements[$(this).data('oxid')].close();
|
||||
});
|
||||
if (e.state && !Ox.isEmpty(e.state)) {
|
||||
document.title = Ox.decodeHTMLEntities(e.state.title);
|
||||
setState(e.state);
|
||||
} else {
|
||||
that.parse();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
// on page load, this sets the state from the URL
|
||||
// can also be used to parse a URL
|
||||
that.parse = function(url, callback) {
|
||||
if (arguments.length == 2) {
|
||||
self.URL.parse(url, callback);
|
||||
} else {
|
||||
callback = arguments[0];
|
||||
url = null;
|
||||
if (document.location.pathname.slice(0, 4) == 'url=') {
|
||||
document.location.href = Ox.decodeURI(document.location.pathname.slice(4));
|
||||
} else {
|
||||
self.URL.parse(function(state) {
|
||||
// setState -> UI.set -> URL.update
|
||||
setState(state, callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
// sets the URL to the previous URL
|
||||
that.pop = function() {
|
||||
self.URL.pop() || that.update();
|
||||
return that;
|
||||
};
|
||||
|
||||
// pushes a new URL (as string or from state)
|
||||
that.push = function(stateOrURL, expandURL) {
|
||||
var state,
|
||||
title = oml.getPageTitle(stateOrURL)
|
||||
url;
|
||||
oml.replaceURL = expandURL;
|
||||
if (Ox.isObject(stateOrURL)) {
|
||||
state = stateOrURL;
|
||||
} else {
|
||||
url = stateOrURL;
|
||||
}
|
||||
self.URL.push(state, title, url, setState);
|
||||
return that;
|
||||
};
|
||||
|
||||
// replaces the current URL (as string or from state)
|
||||
that.replace = function(stateOrURL, title) {
|
||||
var state,
|
||||
title = oml.getPageTitle(stateOrURL)
|
||||
url;
|
||||
if (Ox.isObject(stateOrURL)) {
|
||||
state = stateOrURL;
|
||||
} else {
|
||||
url = stateOrURL;
|
||||
}
|
||||
self.URL.push(state, title, url, setState);
|
||||
return that;
|
||||
};
|
||||
|
||||
// this gets called from oml.UI
|
||||
that.update = function(keys) {
|
||||
var action, state;
|
||||
if (keys.some(function(key) {
|
||||
return Ox.contains(['itemView', 'listSort', 'listView'], key);
|
||||
})) {
|
||||
self.URL.options(getURLOptions());
|
||||
}
|
||||
if (self.isPopState) {
|
||||
self.isPopState = false;
|
||||
} else {
|
||||
if (
|
||||
!oml.$ui.appPanel
|
||||
|| oml.replaceURL
|
||||
|| keys.every(function(key) {
|
||||
return Ox.contains([
|
||||
'listColumnWidth', 'listColumns', 'listSelection'
|
||||
], key) || /^mediaState/.test(key);
|
||||
})
|
||||
) {
|
||||
action = 'replace';
|
||||
} else {
|
||||
action = 'push';
|
||||
}
|
||||
state = getState();
|
||||
self.URL[action](
|
||||
state,
|
||||
oml.getPageTitle(state)
|
||||
);
|
||||
oml.replaceURL = false;
|
||||
}
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
}());
|
||||
Loading…
Add table
Add a link
Reference in a new issue