fix loading, minify with rollup
This commit is contained in:
parent
9c3450947b
commit
dd5237e4ed
156 changed files with 794 additions and 971 deletions
603
source/UI/UI.js
603
source/UI/UI.js
|
|
@ -1,260 +1,376 @@
|
|||
'use strict';
|
||||
|
||||
Ox.load.UI = function(options, callback) {
|
||||
import Ox from './../Ox/js/Ox.Global.js';
|
||||
Ox.UI = Ox.UI || {};
|
||||
|
||||
options = Ox.extend({
|
||||
hideScreen: true,
|
||||
loadCSS: true,
|
||||
loadThemes: true,
|
||||
showScreen: false,
|
||||
theme: 'oxlight'
|
||||
}, options);
|
||||
import './js/Audio/AudioElement.js';
|
||||
import './js/Audio/AudioPlayer.js';
|
||||
import './js/Bar/Bar.js';
|
||||
import './js/Bar/Progressbar.js';
|
||||
import './js/Bar/Resizebar.js';
|
||||
import './js/Bar/Tabbar.js';
|
||||
import './js/Calendar/CalendarEditor.js';
|
||||
import './js/Calendar/Calendar.js';
|
||||
import './js/Code/DocPage.js';
|
||||
import './js/Code/DocPanel.js';
|
||||
import './js/Code/ExamplePage.js';
|
||||
import './js/Code/ExamplePanel.js';
|
||||
import './js/Code/SourceViewer.js';
|
||||
import './js/Code/SyntaxHighlighter.js';
|
||||
import './js/Core/API.js';
|
||||
import './js/Core/App.js';
|
||||
import './js/Core/Clipboard.js';
|
||||
import './js/Core/Container.js';
|
||||
import './js/Core/Cookies.js';
|
||||
import './js/Core/Element.js';
|
||||
import './js/Core/Event.js';
|
||||
import './js/Core/Focus.js';
|
||||
import './js/Core/Fullscreen.js';
|
||||
import './js/Core/GarbageCollection.js';
|
||||
import './js/Core/History.js';
|
||||
import './js/Core/LoadingIcon.js';
|
||||
import './js/Core/LoadingScreen.js';
|
||||
import './js/Core/Request.js';
|
||||
import './js/Core/Theme.js';
|
||||
import './js/Core/UI.js';
|
||||
import './js/Core/URL.js';
|
||||
import './js/Form/ArrayEditable.js';
|
||||
import './js/Form/ArrayInput.js';
|
||||
import './js/Form/ButtonGroup.js';
|
||||
import './js/Form/Button.js';
|
||||
import './js/Form/CheckboxGroup.js';
|
||||
import './js/Form/Checkbox.js';
|
||||
import './js/Form/ColorInput.js';
|
||||
import './js/Form/ColorPicker.js';
|
||||
import './js/Form/DateInput.js';
|
||||
import './js/Form/DateTimeInput.js';
|
||||
import './js/Form/EditableContent.js';
|
||||
import './js/Form/Editable.js';
|
||||
import './js/Form/FileButton.js';
|
||||
import './js/Form/FileInput.js';
|
||||
import './js/Form/Filter.js';
|
||||
import './js/Form/FormElementGroup.js';
|
||||
import './js/Form/FormItem.js';
|
||||
import './js/Form/Form.js';
|
||||
import './js/Form/FormPanel.js';
|
||||
import './js/Form/InputGroup.js';
|
||||
import './js/Form/Input.js';
|
||||
import './js/Form/InsertHTMLDialog.js';
|
||||
import './js/Form/Label.js';
|
||||
import './js/Form/ObjectArrayInput.js';
|
||||
import './js/Form/ObjectInput.js';
|
||||
import './js/Form/OptionGroup.js';
|
||||
import './js/Form/Picker.js';
|
||||
import './js/Form/PlaceInput.js';
|
||||
import './js/Form/PlacePicker.js';
|
||||
import './js/Form/Range.js';
|
||||
import './js/Form/SelectInput.js';
|
||||
import './js/Form/Select.js';
|
||||
import './js/Form/Spreadsheet.js';
|
||||
import './js/Form/TimeInput.js';
|
||||
import './js/Image/ImageElement.js';
|
||||
import './js/Image/ImageViewer.js';
|
||||
import './js/List/Chart.js';
|
||||
import './js/List/ColumnList.js';
|
||||
import './js/List/CustomList.js';
|
||||
import './js/List/IconItem.js';
|
||||
import './js/List/IconList.js';
|
||||
import './js/List/InfoList.js';
|
||||
import './js/List/ListItem.js';
|
||||
import './js/List/List.js';
|
||||
import './js/List/SortList.js';
|
||||
import './js/List/TableList.js';
|
||||
import './js/List/TreeList.js';
|
||||
import './js/Map/MapEditor.js';
|
||||
import './js/Map/MapImage.js';
|
||||
import './js/Map/Map.js';
|
||||
import './js/Map/MapMarkerImage.js';
|
||||
import './js/Map/MapMarker.js';
|
||||
import './js/Map/MapPlace.js';
|
||||
import './js/Map/MapRectangle.js';
|
||||
import './js/Map/MapRectangleMarker.js';
|
||||
import './js/Menu/MainMenu.js';
|
||||
import './js/Menu/MenuButton.js';
|
||||
import './js/Menu/MenuItem.js';
|
||||
import './js/Menu/Menu.js';
|
||||
import './js/Panel/CollapsePanel.js';
|
||||
import './js/Panel/SlidePanel.js';
|
||||
import './js/Panel/SplitPanel.js';
|
||||
import './js/Panel/TabPanel.js';
|
||||
import './js/Video/AnnotationFolder.js';
|
||||
import './js/Video/AnnotationPanel.js';
|
||||
import './js/Video/BlockVideoTimeline.js';
|
||||
import './js/Video/ClipPanel.js';
|
||||
import './js/Video/LargeVideoTimeline.js';
|
||||
import './js/Video/SmallVideoTimelineImage.js';
|
||||
import './js/Video/SmallVideoTimeline.js';
|
||||
import './js/Video/VideoAnnotationPanel.js';
|
||||
import './js/Video/VideoEditPanel.js';
|
||||
import './js/Video/VideoElement.js';
|
||||
import './js/Video/VideoPlayer.js';
|
||||
import './js/Video/VideoPlayerMenu.js';
|
||||
import './js/Video/VideoPlayerPanel.js';
|
||||
import './js/Video/VideoPreview.js';
|
||||
import './js/Video/VideoTimelinePanel.js';
|
||||
import './js/Video/VideoTimelinePlayer.js';
|
||||
import './js/Video/YouTubeElement.js';
|
||||
import './js/Window/Dialog.js';
|
||||
import './js/Window/Layer.js';
|
||||
import './js/Window/SortDialog.js';
|
||||
import './js/Window/Tooltip.js';
|
||||
|
||||
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
|
||||
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;
|
||||
}
|
||||
],
|
||||
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() {
|
||||
|
||||
console.log("this happens?")
|
||||
|
||||
Ox.UI = Ox.UI || {};
|
||||
|
||||
Ox.UI.LoadingScreen = (function() {
|
||||
|
||||
var $body = Ox.$('body'),
|
||||
$screen = Ox.$('<div>')
|
||||
.addClass('OxLoadingScreen')
|
||||
.css({
|
||||
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,
|
||||
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;
|
||||
margin: 'auto',
|
||||
MozUserSelect: 'none',
|
||||
WebkitUserSelect: 'none'
|
||||
},
|
||||
loadingInterval,
|
||||
$icon,
|
||||
deg = 0;
|
||||
|
||||
browserSupported ? showIcon() : showWarning();
|
||||
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>')
|
||||
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({
|
||||
href: browser.url,
|
||||
title: (
|
||||
browser.name == 'Chrome Frame'
|
||||
? Ox._('Install') : Ox._('Download')
|
||||
) + ' ' + browser.name
|
||||
src: src
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: (i * 72) + 'px',
|
||||
width: '72px',
|
||||
height: '72px'
|
||||
.css(Ox.extend({
|
||||
width: '32px',
|
||||
height: '32px'
|
||||
}, css))
|
||||
.on({
|
||||
mousedown: function(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
})
|
||||
.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);
|
||||
.appendTo(div);
|
||||
});
|
||||
*/
|
||||
//var src = Ox.PATH + 'UI/themes/' + options.theme + '/svg/symbolLoading.svg'
|
||||
var src = Ox.PATH + '../dev/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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
function showWarning() {
|
||||
var counter = 0;
|
||||
browsers = browsers.filter(function(browser) {
|
||||
return browser.url;
|
||||
});
|
||||
},
|
||||
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)'
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 83);
|
||||
});
|
||||
},
|
||||
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);
|
||||
}
|
||||
$screen.appendTo($body);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
}());
|
||||
}());
|
||||
|
||||
Ox.documentReady(function() {
|
||||
Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(options.theme));
|
||||
options.showScreen && Ox.UI.LoadingScreen.show();
|
||||
});
|
||||
Ox.documentReady(function() {
|
||||
Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(options.theme));
|
||||
options.showScreen && Ox.UI.LoadingScreen.show();
|
||||
});
|
||||
|
||||
loadUI();
|
||||
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;
|
||||
function loadUI() {
|
||||
let path = Ox.PATH + 'UI/json/UI.json?' + Ox.VERSION;
|
||||
Ox.getJSON(path, function(data) {
|
||||
var counter = 0, length;
|
||||
if (!options.loadCSS) {
|
||||
|
|
@ -285,23 +401,22 @@ Ox.load.UI = function(options, callback) {
|
|||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
function initUI() {
|
||||
|
||||
function initUI() {
|
||||
|
||||
Ox.documentReady(function() {
|
||||
// fixme: is this the right place to do this?
|
||||
$.browser.mozilla && Ox.$document.on('dragstart', function() {
|
||||
return false;
|
||||
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);
|
||||
});
|
||||
if (options.showScreen && options.hideScreen) {
|
||||
Ox.UI.LoadingScreen.hide();
|
||||
}
|
||||
callback(browserSupported);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue