423 lines
18 KiB
JavaScript
423 lines
18 KiB
JavaScript
'use strict';
|
|
|
|
import Ox from './../Ox/js/Namespace.js';
|
|
Ox.UI = Ox.UI || {};
|
|
|
|
import * as AudioAudioElement from './js/Audio/AudioElement.js';
|
|
import * as AudioAudioPlayer from './js/Audio/AudioPlayer.js';
|
|
import * as BarBar from './js/Bar/Bar.js';
|
|
import * as BarProgressbar from './js/Bar/Progressbar.js';
|
|
import * as BarResizebar from './js/Bar/Resizebar.js';
|
|
import * as BarTabbar from './js/Bar/Tabbar.js';
|
|
import * as CalendarCalendarEditor from './js/Calendar/CalendarEditor.js';
|
|
import * as CalendarCalendar from './js/Calendar/Calendar.js';
|
|
import * as CodeDocPage from './js/Code/DocPage.js';
|
|
import * as CodeDocPanel from './js/Code/DocPanel.js';
|
|
import * as CodeExamplePage from './js/Code/ExamplePage.js';
|
|
import * as CodeExamplePanel from './js/Code/ExamplePanel.js';
|
|
import * as CodeSourceViewer from './js/Code/SourceViewer.js';
|
|
import * as CodeSyntaxHighlighter from './js/Code/SyntaxHighlighter.js';
|
|
import * as CoreAPI from './js/Core/API.js';
|
|
import * as CoreApp from './js/Core/App.js';
|
|
import * as CoreClipboard from './js/Core/Clipboard.js';
|
|
import * as CoreContainer from './js/Core/Container.js';
|
|
import * as CoreCookies from './js/Core/Cookies.js';
|
|
import * as CoreElement from './js/Core/Element.js';
|
|
import * as CoreEvent from './js/Core/Event.js';
|
|
import * as CoreFocus from './js/Core/Focus.js';
|
|
import * as CoreFullscreen from './js/Core/Fullscreen.js';
|
|
import * as CoreGarbageCollection from './js/Core/GarbageCollection.js';
|
|
import * as CoreHistory from './js/Core/History.js';
|
|
import * as CoreLoadingIcon from './js/Core/LoadingIcon.js';
|
|
import * as CoreLoadingScreen from './js/Core/LoadingScreen.js';
|
|
import * as CoreRequest from './js/Core/Request.js';
|
|
import * as CoreTheme from './js/Core/Theme.js';
|
|
import * as CoreUI from './js/Core/UI.js';
|
|
import * as CoreURL from './js/Core/URL.js';
|
|
import * as FormArrayEditable from './js/Form/ArrayEditable.js';
|
|
import * as FormArrayInput from './js/Form/ArrayInput.js';
|
|
import * as FormButtonGroup from './js/Form/ButtonGroup.js';
|
|
import * as FormButton from './js/Form/Button.js';
|
|
import * as FormCheckboxGroup from './js/Form/CheckboxGroup.js';
|
|
import * as FormCheckbox from './js/Form/Checkbox.js';
|
|
import * as FormColorInput from './js/Form/ColorInput.js';
|
|
import * as FormColorPicker from './js/Form/ColorPicker.js';
|
|
import * as FormDateInput from './js/Form/DateInput.js';
|
|
import * as FormDateTimeInput from './js/Form/DateTimeInput.js';
|
|
import * as FormEditableContent from './js/Form/EditableContent.js';
|
|
import * as FormEditable from './js/Form/Editable.js';
|
|
import * as FormFileButton from './js/Form/FileButton.js';
|
|
import * as FormFileInput from './js/Form/FileInput.js';
|
|
import * as FormFilter from './js/Form/Filter.js';
|
|
import * as FormFormElementGroup from './js/Form/FormElementGroup.js';
|
|
import * as FormFormItem from './js/Form/FormItem.js';
|
|
import * as FormForm from './js/Form/Form.js';
|
|
import * as FormFormPanel from './js/Form/FormPanel.js';
|
|
import * as FormInputGroup from './js/Form/InputGroup.js';
|
|
import * as FormInput from './js/Form/Input.js';
|
|
import * as FormInsertHTMLDialog from './js/Form/InsertHTMLDialog.js';
|
|
import * as FormLabel from './js/Form/Label.js';
|
|
import * as FormObjectArrayInput from './js/Form/ObjectArrayInput.js';
|
|
import * as FormObjectInput from './js/Form/ObjectInput.js';
|
|
import * as FormOptionGroup from './js/Form/OptionGroup.js';
|
|
import * as FormPicker from './js/Form/Picker.js';
|
|
import * as FormPlaceInput from './js/Form/PlaceInput.js';
|
|
import * as FormPlacePicker from './js/Form/PlacePicker.js';
|
|
import * as FormRange from './js/Form/Range.js';
|
|
import * as FormSelectInput from './js/Form/SelectInput.js';
|
|
import * as FormSelect from './js/Form/Select.js';
|
|
import * as FormSpreadsheet from './js/Form/Spreadsheet.js';
|
|
import * as FormTimeInput from './js/Form/TimeInput.js';
|
|
import * as ImageImageElement from './js/Image/ImageElement.js';
|
|
import * as ImageImageViewer from './js/Image/ImageViewer.js';
|
|
import * as ListChart from './js/List/Chart.js';
|
|
import * as ListColumnList from './js/List/ColumnList.js';
|
|
import * as ListCustomList from './js/List/CustomList.js';
|
|
import * as ListIconItem from './js/List/IconItem.js';
|
|
import * as ListIconList from './js/List/IconList.js';
|
|
import * as ListInfoList from './js/List/InfoList.js';
|
|
import * as ListListItem from './js/List/ListItem.js';
|
|
import * as ListList from './js/List/List.js';
|
|
import * as ListSortList from './js/List/SortList.js';
|
|
import * as ListTableList from './js/List/TableList.js';
|
|
import * as ListTreeList from './js/List/TreeList.js';
|
|
import * as MapMapEditor from './js/Map/MapEditor.js';
|
|
import * as MapMapImage from './js/Map/MapImage.js';
|
|
import * as MapMap from './js/Map/Map.js';
|
|
import * as MapMapMarkerImage from './js/Map/MapMarkerImage.js';
|
|
import * as MapMapMarker from './js/Map/MapMarker.js';
|
|
import * as MapMapPlace from './js/Map/MapPlace.js';
|
|
import * as MapMapRectangle from './js/Map/MapRectangle.js';
|
|
import * as MapMapRectangleMarker from './js/Map/MapRectangleMarker.js';
|
|
import * as MenuMainMenu from './js/Menu/MainMenu.js';
|
|
import * as MenuMenuButton from './js/Menu/MenuButton.js';
|
|
import * as MenuMenuItem from './js/Menu/MenuItem.js';
|
|
import * as MenuMenu from './js/Menu/Menu.js';
|
|
import * as PanelCollapsePanel from './js/Panel/CollapsePanel.js';
|
|
import * as PanelSlidePanel from './js/Panel/SlidePanel.js';
|
|
import * as PanelSplitPanel from './js/Panel/SplitPanel.js';
|
|
import * as PanelTabPanel from './js/Panel/TabPanel.js';
|
|
import * as VideoAnnotationFolder from './js/Video/AnnotationFolder.js';
|
|
import * as VideoAnnotationPanel from './js/Video/AnnotationPanel.js';
|
|
import * as VideoBlockVideoTimeline from './js/Video/BlockVideoTimeline.js';
|
|
import * as VideoClipPanel from './js/Video/ClipPanel.js';
|
|
import * as VideoLargeVideoTimeline from './js/Video/LargeVideoTimeline.js';
|
|
import * as VideoSmallVideoTimelineImage from './js/Video/SmallVideoTimelineImage.js';
|
|
import * as VideoSmallVideoTimeline from './js/Video/SmallVideoTimeline.js';
|
|
import * as VideoVideoAnnotationPanel from './js/Video/VideoAnnotationPanel.js';
|
|
import * as VideoVideoEditPanel from './js/Video/VideoEditPanel.js';
|
|
import * as VideoVideoElement from './js/Video/VideoElement.js';
|
|
import * as VideoVideoPlayer from './js/Video/VideoPlayer.js';
|
|
import * as VideoVideoPlayerMenu from './js/Video/VideoPlayerMenu.js';
|
|
import * as VideoVideoPlayerPanel from './js/Video/VideoPlayerPanel.js';
|
|
import * as VideoVideoPreview from './js/Video/VideoPreview.js';
|
|
import * as VideoVideoTimelinePanel from './js/Video/VideoTimelinePanel.js';
|
|
import * as VideoVideoTimelinePlayer from './js/Video/VideoTimelinePlayer.js';
|
|
import * as VideoYouTubeElement from './js/Video/YouTubeElement.js';
|
|
import * as WindowDialog from './js/Window/Dialog.js';
|
|
import * as WindowLayer from './js/Window/Layer.js';
|
|
import * as WindowSortDialog from './js/Window/SortDialog.js';
|
|
import * as WindowTooltip from './js/Window/Tooltip.js';
|
|
|
|
|
|
|
|
export const UI = Ox.UI;
|
|
export default UI;
|
|
|
|
if (typeof globalThis !== 'undefined') {
|
|
Ox.load.UI = function(options, callback) {
|
|
options = Ox.extend({
|
|
hideScreen: true,
|
|
loadCSS: true,
|
|
loadThemes: true,
|
|
showScreen: false,
|
|
theme: 'oxlight'
|
|
}, options);
|
|
|
|
var browsers = [
|
|
{
|
|
name: 'Chrome Frame',
|
|
url: 'http://www.google.com/chromeframe/'
|
|
},
|
|
{
|
|
name: 'Chrome',
|
|
regexp: /Chrome\/(\d+)\./,
|
|
url: 'http://www.google.com/chrome/',
|
|
version: 10
|
|
},
|
|
{
|
|
name: 'Firefox',
|
|
regexp: /Firefox\/(\d+)\./,
|
|
url: 'http://www.mozilla.org/firefox/',
|
|
version: 4
|
|
},
|
|
{
|
|
name: 'Safari',
|
|
regexp: /Version\/(\d+).*? Safari/,
|
|
url: 'http://www.apple.com/safari/',
|
|
version: 5
|
|
},
|
|
{
|
|
name: 'WebKit',
|
|
regexp: /AppleWebKit\/(\d+)\./,
|
|
version: 534
|
|
},
|
|
{
|
|
name: 'Googlebot',
|
|
regexp: /Googlebot\/(\d+)\./,
|
|
version: 2
|
|
},
|
|
{
|
|
name: 'YandexBot',
|
|
regexp: /YandexBot\/(\d+)\./,
|
|
version: 3
|
|
},
|
|
{
|
|
name: 'YandexMobileBot',
|
|
regexp: /YandexMobileBot\/(\d+)\./,
|
|
version: 3
|
|
},
|
|
{
|
|
name: 'Internet Explorer',
|
|
url: 'http://windows.microsoft.com/en-US/internet-explorer/products/ie/home',
|
|
version: 9
|
|
}
|
|
],
|
|
browserSupported = false,
|
|
isInternetExplorer = /MSIE/.test(navigator.userAgent);
|
|
|
|
browsers.forEach(function(browser) {
|
|
var match = browser.regexp && browser.regexp.exec(navigator.userAgent);
|
|
if (match && match[1] >= browser.version) {
|
|
browserSupported = true;
|
|
}
|
|
});
|
|
|
|
Ox.UI.LoadingScreen = (function() {
|
|
|
|
var $body = Ox.$('body'),
|
|
$screen = Ox.$('<div>')
|
|
.addClass('OxLoadingScreen')
|
|
.css({
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
padding: '4px',
|
|
background: 'rgb(' + (
|
|
options.theme == 'oxlight' ? '240, 240, 240'
|
|
: options.theme == 'oxmedium' ? '144, 144, 144'
|
|
: '16, 16, 16'
|
|
) + ')',
|
|
opacity: 1,
|
|
zIndex: 1000
|
|
}),
|
|
css = {
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
margin: 'auto',
|
|
MozUserSelect: 'none',
|
|
WebkitUserSelect: 'none'
|
|
},
|
|
loadingInterval,
|
|
$icon,
|
|
deg = 0;
|
|
|
|
browserSupported ? showIcon() : showWarning();
|
|
|
|
function showIcon() {
|
|
/*
|
|
// SVG transform performs worse than CSS transform
|
|
var src = Ox.PATH + 'UI/themes/' + options.theme + '/svg/symbolLoadingAnimated.svg'
|
|
Ox.getFile(src, function() {
|
|
Ox.$('<img>')
|
|
.attr({
|
|
src: src
|
|
})
|
|
.css(Ox.extend({
|
|
width: '32px',
|
|
height: '32px'
|
|
}, css))
|
|
.on({
|
|
mousedown: function(e) {
|
|
e.preventDefault();
|
|
}
|
|
})
|
|
.appendTo(div);
|
|
});
|
|
*/
|
|
var src = Ox.PATH + 'UI/themes/' + options.theme + '/svg/symbolLoading.svg'
|
|
Ox.getFile(src, function() {
|
|
$icon = Ox.$('<img>')
|
|
.attr({
|
|
src: src
|
|
})
|
|
.css(Ox.extend({
|
|
width: '32px',
|
|
height: '32px'
|
|
}, css))
|
|
.on({
|
|
mousedown: function(e) {
|
|
e.preventDefault()
|
|
}
|
|
})
|
|
.appendTo($screen);
|
|
});
|
|
}
|
|
|
|
function showWarning() {
|
|
var counter = 0;
|
|
browsers = browsers.filter(function(browser) {
|
|
return browser.url;
|
|
});
|
|
isInternetExplorer ? browsers.pop() : browsers.shift();
|
|
browsers.forEach(function(browser) {
|
|
browser.src = Ox.PATH + 'UI/png/browser' + browser.name.replace(' ', '') + '128.png';
|
|
Ox.getFile(browser.src, function() {
|
|
++counter == browsers.length && showIcons();
|
|
});
|
|
});
|
|
function showIcons() {
|
|
var $box = Ox.$('<div>')
|
|
.css(Ox.extend({
|
|
width: (browsers.length * 72) + 'px',
|
|
height: '72px'
|
|
}, css))
|
|
.appendTo($screen);
|
|
browsers.forEach(function(browser, i) {
|
|
Ox.$('<a>')
|
|
.attr({
|
|
href: browser.url,
|
|
title: (
|
|
browser.name == 'Chrome Frame'
|
|
? Ox._('Install') : Ox._('Download')
|
|
) + ' ' + browser.name
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
left: (i * 72) + 'px',
|
|
width: '72px',
|
|
height: '72px'
|
|
})
|
|
.append(
|
|
Ox.$('<img>')
|
|
.attr({
|
|
src: browser.src
|
|
})
|
|
.css(Ox.extend({
|
|
width: '64px',
|
|
height: '64px',
|
|
border: 0,
|
|
cursor: 'pointer'
|
|
}, css))
|
|
.on({
|
|
mousedown: function(e) {
|
|
e.preventDefault();
|
|
}
|
|
})
|
|
)
|
|
.appendTo($box);
|
|
});
|
|
}
|
|
}
|
|
|
|
return {
|
|
hide: function() {
|
|
$('.OxLoadingScreen').animate({
|
|
opacity: browserSupported ? 0 : 0.9
|
|
}, 1000, function() {
|
|
if (browserSupported) {
|
|
clearInterval(loadingInterval);
|
|
loadingInterval = null;
|
|
$screen.remove();
|
|
} else {
|
|
$screen.on({
|
|
click: function() {
|
|
$screen.remove();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
show: function() {
|
|
if (!loadingInterval) {
|
|
loadingInterval = setInterval(function() {
|
|
if ($icon) {
|
|
deg = (deg + 30) % 360;
|
|
$icon.css({
|
|
MozTransform: 'rotate(' + deg + 'deg)',
|
|
OTransform: 'rotate(' + deg + 'deg)',
|
|
WebkitTransform: 'rotate(' + deg + 'deg)',
|
|
transform: 'rotate(' + deg + 'deg)'
|
|
});
|
|
}
|
|
}, 83);
|
|
}
|
|
$screen.appendTo($body);
|
|
}
|
|
};
|
|
|
|
}());
|
|
|
|
Ox.documentReady(function() {
|
|
Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(options.theme));
|
|
options.showScreen && Ox.UI.LoadingScreen.show();
|
|
});
|
|
|
|
loadUI();
|
|
|
|
function loadUI() {
|
|
let path = Ox.PATH + 'UI/json/UI.json?' + Ox.VERSION;
|
|
Ox.getJSON(path, function(data) {
|
|
var counter = 0, length;
|
|
if (!options.loadCSS) {
|
|
data.files = data.files.filter(function(file) {
|
|
return !Ox.endsWith(file, '.css');
|
|
});
|
|
}
|
|
if (!options.loadThemes) {
|
|
data.files = data.files.filter(function(file) {
|
|
return !Ox.contains(file, '/themes/');
|
|
});
|
|
}
|
|
length = data.files.length;
|
|
Ox.UI.IMAGES = data.images;
|
|
Ox.UI.THEMES = {};
|
|
data.files.forEach(function(file) {
|
|
path = Ox.PATH + file + '?' + Ox.VERSION;
|
|
if (/\.jsonc$/.test(file)) {
|
|
Ox.getJSONC(path, function(data) {
|
|
var theme = /\/themes\/(\w+)\/json\//.exec(file)[1];
|
|
Ox.UI.THEMES[theme] = data;
|
|
++counter == length && initUI();
|
|
});
|
|
} else {
|
|
Ox.getFile(path, function() {
|
|
++counter == length && initUI();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function initUI() {
|
|
|
|
Ox.documentReady(function() {
|
|
// fixme: is this the right place to do this?
|
|
$.browser.mozilla && Ox.$document.on('dragstart', function() {
|
|
return false;
|
|
});
|
|
if (options.showScreen && options.hideScreen) {
|
|
Ox.UI.LoadingScreen.hide();
|
|
}
|
|
callback(browserSupported);
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
}
|