WIP: try to convert to ES modules
This commit is contained in:
parent
ec5b050496
commit
299a08b6a3
29 changed files with 3003 additions and 2014 deletions
548
source/UI/index.js
Normal file
548
source/UI/index.js
Normal file
|
|
@ -0,0 +1,548 @@
|
|||
'use strict';
|
||||
|
||||
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';
|
||||
|
||||
|
||||
const UI = {}
|
||||
|
||||
Object.assign(UI,
|
||||
AudioAudioElement,
|
||||
AudioAudioPlayer,
|
||||
BarBar,
|
||||
BarProgressbar,
|
||||
BarResizebar,
|
||||
BarTabbar,
|
||||
CalendarCalendarEditor,
|
||||
CalendarCalendar,
|
||||
CodeDocPage,
|
||||
CodeDocPanel,
|
||||
CodeExamplePage,
|
||||
CodeExamplePanel,
|
||||
CodeSourceViewer,
|
||||
CodeSyntaxHighlighter,
|
||||
CoreAPI,
|
||||
CoreApp,
|
||||
CoreClipboard,
|
||||
CoreContainer,
|
||||
CoreCookies,
|
||||
CoreElement,
|
||||
CoreEvent,
|
||||
CoreFocus,
|
||||
CoreFullscreen,
|
||||
CoreGarbageCollection,
|
||||
CoreHistory,
|
||||
CoreLoadingIcon,
|
||||
CoreLoadingScreen,
|
||||
CoreRequest,
|
||||
CoreTheme,
|
||||
CoreUI,
|
||||
CoreURL,
|
||||
FormArrayEditable,
|
||||
FormArrayInput,
|
||||
FormButtonGroup,
|
||||
FormButton,
|
||||
FormCheckboxGroup,
|
||||
FormCheckbox,
|
||||
FormColorInput,
|
||||
FormColorPicker,
|
||||
FormDateInput,
|
||||
FormDateTimeInput,
|
||||
FormEditableContent,
|
||||
FormEditable,
|
||||
FormFileButton,
|
||||
FormFileInput,
|
||||
FormFilter,
|
||||
FormFormElementGroup,
|
||||
FormFormItem,
|
||||
FormForm,
|
||||
FormFormPanel,
|
||||
FormInputGroup,
|
||||
FormInput,
|
||||
FormInsertHTMLDialog,
|
||||
FormLabel,
|
||||
FormObjectArrayInput,
|
||||
FormObjectInput,
|
||||
FormOptionGroup,
|
||||
FormPicker,
|
||||
FormPlaceInput,
|
||||
FormPlacePicker,
|
||||
FormRange,
|
||||
FormSelectInput,
|
||||
FormSelect,
|
||||
FormSpreadsheet,
|
||||
FormTimeInput,
|
||||
ImageImageElement,
|
||||
ImageImageViewer,
|
||||
ListChart,
|
||||
ListColumnList,
|
||||
ListCustomList,
|
||||
ListIconItem,
|
||||
ListIconList,
|
||||
ListInfoList,
|
||||
ListListItem,
|
||||
ListList,
|
||||
ListSortList,
|
||||
ListTableList,
|
||||
ListTreeList,
|
||||
MapMapEditor,
|
||||
MapMapImage,
|
||||
MapMap,
|
||||
MapMapMarkerImage,
|
||||
MapMapMarker,
|
||||
MapMapPlace,
|
||||
MapMapRectangle,
|
||||
MapMapRectangleMarker,
|
||||
MenuMainMenu,
|
||||
MenuMenuButton,
|
||||
MenuMenuItem,
|
||||
MenuMenu,
|
||||
PanelCollapsePanel,
|
||||
PanelSlidePanel,
|
||||
PanelSplitPanel,
|
||||
PanelTabPanel,
|
||||
VideoAnnotationFolder,
|
||||
VideoAnnotationPanel,
|
||||
VideoBlockVideoTimeline,
|
||||
VideoClipPanel,
|
||||
VideoLargeVideoTimeline,
|
||||
VideoSmallVideoTimelineImage,
|
||||
VideoSmallVideoTimeline,
|
||||
VideoVideoAnnotationPanel,
|
||||
VideoVideoEditPanel,
|
||||
VideoVideoElement,
|
||||
VideoVideoPlayer,
|
||||
VideoVideoPlayerMenu,
|
||||
VideoVideoPlayerPanel,
|
||||
VideoVideoPreview,
|
||||
VideoVideoTimelinePanel,
|
||||
VideoVideoTimelinePlayer,
|
||||
VideoYouTubeElement,
|
||||
WindowDialog,
|
||||
WindowLayer,
|
||||
WindowSortDialog,
|
||||
WindowTooltip,
|
||||
);
|
||||
|
||||
export default UI;
|
||||
export { UI };
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Ox.UI = UI
|
||||
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 = {};
|
||||
|
||||
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() {
|
||||
|
||||
var path = Ox.PATH + 'UI/jquery/jquery.js?' + Ox.VERSION;
|
||||
Ox.getFile(path, function() {
|
||||
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);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue