0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add auto variant of loading screen and image element

Browse source
This commit is contained in:
rolux 2013-03-08 08:48:49 +00:00
parent b63adeeb01
commit 43d5bee70a
3 changed files with 57 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
source/Ox.UI/css/Ox.UI.css
View file

@ -2701,6 +2701,19 @@ Miscellaneous
.OxLoadingScreen > div > div { .OxLoadingScreen > div > div {
margin-top: 4px; margin-top: 4px;
} }
.OxLoadingScreen.OxAuto {
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.OxLoadingScreen.OxAuto > div {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.OxSpecialLink { .OxSpecialLink {
padding: 0 2px 0 2px; padding: 0 2px 0 2px;

25
source/Ox.UI/js/Core/ImageElement.js
View file

@ -1,5 +1,9 @@
'use strict'; 'use strict';
/*@
Ox.ImageElement <f> Simple image element with loading indication
@*/
Ox.ImageElement = function(options, self) { Ox.ImageElement = function(options, self) {
self = self || {}; self = self || {};
@ -11,16 +15,29 @@ Ox.ImageElement = function(options, self) {
}) })
.options(options || {}) .options(options || {})
.update({ .update({
height: setSizes, height: function() {
!self.isAuto && setSizes();
},
src: loadImage, src: loadImage,
width: setSizes width: function() {
!self.isAuto && setSizes();
}
}) })
.addClass('OxImageElement'); .addClass('OxImageElement');
self.$screen = Ox.LoadingScreen({size: 16}).appendTo(that); self.isAuto = !self.options.width && !self.options.height;
Ox.print('IMAGE OPTS', self.options, self.isAuto)
self.$screen = Ox.LoadingScreen({
size: 16,
width: self.options.width,
height: self.options.height
})
.appendTo(that);
loadImage(); loadImage();
setSizes(); !self.isAuto && setSizes();
function loadImage() { function loadImage() {
if (self.$image) { if (self.$image) {

27
source/Ox.UI/js/Core/LoadingScreen.js
View file

@ -1,25 +1,36 @@
'use strict'; 'use strict';
/*@
Ox.LoadingScreen <f> Simple loading screen
@*/
Ox.LoadingScreen = function(options, self) { Ox.LoadingScreen = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
height: 256, height: 0,
size: 32, size: 32,
text: '', text: '',
width: 256 width: 0
}) })
.options(options || {}) .options(options || {})
.update({ .update({
height: setSizes, height: function() {
!self.isAuto && setSizes();
},
text: function() { text: function() {
self.$text && self.$text.html(self.options.text); self.$text && self.$text.html(self.options.text);
}, },
width: setSizes width: function() {
!self.isAuto && setSizes();
}
}) })
.addClass('OxLoadingScreen'); .addClass('OxLoadingScreen');
self.isAuto = !self.options.width && !self.options.height;
self.isAuto && that.addClass('OxAuto')
self.$box = $('<div>').appendTo(that); self.$box = $('<div>').appendTo(that);
setSizes(); setSizes();
@ -43,15 +54,17 @@ Ox.LoadingScreen = function(options, self) {
width: (self.options.text ? 256 : self.options.size), width: (self.options.text ? 256 : self.options.size),
height: self.options.size + (self.options.text ? 24 : 0) height: self.options.size + (self.options.text ? 24 : 0)
}; };
if (!self.isAuto) {
css.left = Math.floor((self.options.width - css.width) / 2); css.left = Math.floor((self.options.width - css.width) / 2);
css.top = Math.floor((self.options.height - css.height) / 2); css.top = Math.floor((self.options.height - css.height) / 2);
css = Ox.map(css, function(value) {
return value + 'px';
});
that.css({ that.css({
width: self.options.width + 'px', width: self.options.width + 'px',
height: self.options.height + 'px' height: self.options.height + 'px'
}); });
}
css = Ox.map(css, function(value) {
return value + 'px';
});
self.$box.css(css); self.$box.css(css);
} }