diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 8edeb405..19615c04 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -2691,6 +2691,17 @@ Miscellaneous padding: 0; } +.OxLoadingScreen { + position: absolute; +} +.OxLoadingScreen > div { + position: absolute; + text-align: center; +} +.OxLoadingScreen > div > div { + margin-top: 4px; +} + .OxSpecialLink { padding: 0 2px 0 2px; border-radius: 2px; diff --git a/source/Ox.UI/css/theme.css b/source/Ox.UI/css/theme.css index 50fc9c0e..5ea25e56 100644 --- a/source/Ox.UI/css/theme.css +++ b/source/Ox.UI/css/theme.css @@ -1155,6 +1155,12 @@ Miscellaneous ================================================================================ */ +.$themeClass .OxImageElement > .OxLoadingScreen { + background-image: -moz-linear-gradient(top, $imageLoadingGradient); + background-image: -o-linear-gradient(top, $imageLoadingGradient); + background-image: -webkit-linear-gradient(top, $imageLoadingGradient); +} + .$themeClass .OxSelectableElement { background-image: -moz-linear-gradient(top, $listItemGradient); background-image: -o-linear-gradient(top, $listItemGradient); diff --git a/source/Ox.UI/js/Core/ImageElement.js b/source/Ox.UI/js/Core/ImageElement.js new file mode 100644 index 00000000..541cf8c1 --- /dev/null +++ b/source/Ox.UI/js/Core/ImageElement.js @@ -0,0 +1,54 @@ +'use strict'; + +Ox.ImageElement = function(options, self) { + + self = self || {}; + var that = Ox.Element({}, self) + .defaults({ + height: 0, + src: '', + width: 0 + }) + .options(options || {}) + .update({ + height: setSizes, + src: loadImage, + width: setSizes + }) + .addClass('OxImageElement'); + + self.$screen = Ox.LoadingScreen({size: 16}).appendTo(that); + + loadImage(); + setSizes(); + + function loadImage() { + if (self.$image) { + self.$image.off({load: showImage}).remove(); + } + self.$image = $('') + .one({load: showImage}) + .attr({src: self.options.src}); + } + + function setSizes() { + var css = { + width: self.options.width, + height: self.options.height + }; + self.$screen && self.$screen.options(css); + css = Ox.map(css, function(value) { + return value + 'px'; + }); + that.css(css); + self.$image.css(css); + } + + function showImage() { + self.$screen.remove(); + self.$image.appendTo(that); + } + + return that; + +}; \ No newline at end of file diff --git a/source/Ox.UI/js/Core/LoadingScreen.js b/source/Ox.UI/js/Core/LoadingScreen.js new file mode 100644 index 00000000..21d6244b --- /dev/null +++ b/source/Ox.UI/js/Core/LoadingScreen.js @@ -0,0 +1,60 @@ +'use strict'; + +Ox.LoadingScreen = function(options, self) { + + self = self || {}; + var that = Ox.Element({}, self) + .defaults({ + height: 256, + size: 32, + text: '', + width: 256 + }) + .options(options || {}) + .update({ + height: setSizes, + text: function() { + self.$text && self.$text.html(self.options.text); + }, + width: setSizes + }) + .addClass('OxLoadingScreen'); + + self.$box = $('
').appendTo(that); + + setSizes(); + + $('') + .attr({src: Ox.UI.getImageURL('symbolLoadingAnimated')}) + .css({ + width: self.options.size + 'px', + height: self.options.size + 'px' + }) + .appendTo(self.$box); + + if (self.options.text) { + self.$text = $('
') + .html(self.options.text) + .appendTo(self.$box); + } + + function setSizes() { + var css = { + width: (self.options.text ? 256 : self.options.size), + height: self.options.size + (self.options.text ? 24 : 0) + }; + css.left = Math.floor((self.options.width - css.width) / 2); + css.top = Math.floor((self.options.height - css.height) / 2); + css = Ox.map(css, function(value) { + return value + 'px'; + }); + that.css({ + width: self.options.width + 'px', + height: self.options.height + 'px' + }); + self.$box.css(css); + } + + return that; + +}; \ No newline at end of file diff --git a/source/Ox.UI/themes/aqua/json/theme.jsonc b/source/Ox.UI/themes/aqua/json/theme.jsonc index 7961c7bc..f34675b6 100644 --- a/source/Ox.UI/themes/aqua/json/theme.jsonc +++ b/source/Ox.UI/themes/aqua/json/theme.jsonc @@ -77,6 +77,8 @@ "gridGradient": [[248, 248, 248], [232, 232, 232]], + "imageLoadingGradient": [[255, 255, 255], [224, 224, 224]], + "inputGradient": [[224, 224, 224], [255, 255, 255]], "inputActiveGradient": [[208, 208, 208], [240, 240, 240]], "inputDisabledGradient": [[224, 224, 224], [224, 224, 224]], diff --git a/source/Ox.UI/themes/oxdark/json/theme.jsonc b/source/Ox.UI/themes/oxdark/json/theme.jsonc index 7bf1c6c6..b522c459 100644 --- a/source/Ox.UI/themes/oxdark/json/theme.jsonc +++ b/source/Ox.UI/themes/oxdark/json/theme.jsonc @@ -77,6 +77,8 @@ "gridGradient": [[8, 8, 8], [24, 24, 24]], + "imageLoadingGradient": [[32, 32, 32], [0, 0, 0]], + "inputGradient": [[0, 0, 0], [32, 32, 32]], "inputActiveGradient": [[16, 16, 16], [48, 48, 48]], "inputDisabledGradient": [[16, 16, 16], [16, 16, 16]], diff --git a/source/Ox.UI/themes/oxlight/json/theme.jsonc b/source/Ox.UI/themes/oxlight/json/theme.jsonc index f323d54d..2c45bbf2 100644 --- a/source/Ox.UI/themes/oxlight/json/theme.jsonc +++ b/source/Ox.UI/themes/oxlight/json/theme.jsonc @@ -77,6 +77,8 @@ "gridGradient": [[248, 248, 248], [232, 232, 232]], + "imageLoadingGradient": [[255, 255, 255], [224, 224, 224]], + "inputGradient": [[208, 208, 208], [255, 255, 255]], "inputActiveGradient": [[192, 192, 192], [240, 240, 240]], "inputDisabledGradient": [[224, 224, 224], [224, 224, 224]], diff --git a/source/Ox.UI/themes/oxmedium/json/theme.jsonc b/source/Ox.UI/themes/oxmedium/json/theme.jsonc index 101e69e5..cef03fe4 100644 --- a/source/Ox.UI/themes/oxmedium/json/theme.jsonc +++ b/source/Ox.UI/themes/oxmedium/json/theme.jsonc @@ -77,6 +77,8 @@ "gridGradient": [[248, 248, 248], [232, 232, 232]], + "imageLoadingGradient": [[160, 160, 160], [128, 128, 128]], + "inputGradient": [[144, 144, 144], [176, 176, 176]], "inputActiveGradient": [[160, 160, 160], [192, 192, 192]], "inputDisabledGradient": [[144, 144, 144], [144, 144, 144]],