Ox.Dialog rewrite
This commit is contained in:
rolux
parent
6e5b515e5f
commit
e063626bdc
10 changed files with 762 additions and 513 deletions
|
|
@ -296,6 +296,130 @@ Dialog
|
||||||
cursor: se-resize;
|
cursor: se-resize;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.OxWindow {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OxWindow > .OxTitlebar {
|
||||||
|
position: absolute;
|
||||||
|
height: 24px;
|
||||||
|
text-align: center;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OxWindow > .OxTitlebar > .OxButton {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OxWindow > .OxTitlebar > .OxTitle {
|
||||||
|
margin-top: 3px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OxWindow > .OxContent {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 24px;
|
||||||
|
right: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OxWindow > .OxButtonsbar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
height: 24px;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxButtonsbar > .OxButtonsLeft {
|
||||||
|
margin-left: 4px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxButtonsbar > .OxButtonsRight {
|
||||||
|
margin-right: 4px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxButtonsbar .OxButton {
|
||||||
|
margin: 4px 2px 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OxWindow > .OxResize {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeTopLeft {
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
cursor: nwse-resize;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeTop {
|
||||||
|
left: 8px;
|
||||||
|
top: -2px;
|
||||||
|
right: 8px;
|
||||||
|
height: 5px;
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeTopRight {
|
||||||
|
right: -2px;
|
||||||
|
top: -2px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
cursor: nesw-resize;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeLeft {
|
||||||
|
left: -2px;
|
||||||
|
top: 8px;
|
||||||
|
width: 5px;
|
||||||
|
bottom: 8px;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeRight {
|
||||||
|
right: -2px;
|
||||||
|
top: 8px;
|
||||||
|
width: 5px;
|
||||||
|
bottom: 8px;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeBottomLeft {
|
||||||
|
left: -2px;
|
||||||
|
bottom: -2px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
cursor: nesw-resize;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeBottom {
|
||||||
|
left: 8px;
|
||||||
|
bottom: -2px;
|
||||||
|
right: 8px;
|
||||||
|
height: 5px;
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
.OxWindow > .OxResizeBottomRight {
|
||||||
|
right: -2px;
|
||||||
|
bottom: -2px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
cursor: nwse-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OxDialogBox {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Document
|
Document
|
||||||
|
|
|
||||||
|
|
@ -318,6 +318,7 @@ Ox.Element = function(options, self) {
|
||||||
that.loseFocus();
|
that.loseFocus();
|
||||||
delete self.$eventHandler;
|
delete self.$eventHandler;
|
||||||
that.remove();
|
that.remove();
|
||||||
|
// fixme: ok to comment out the following line?
|
||||||
delete Ox.UI.elements[that.id];
|
delete Ox.UI.elements[that.id];
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -38,8 +38,8 @@ Ox.Focus = function() {
|
||||||
index > -1 && stack.splice(index, 1);
|
index > -1 && stack.splice(index, 1);
|
||||||
stack.push(id);
|
stack.push(id);
|
||||||
$('.OxFocus').removeClass('OxFocus'); // fixme: see above
|
$('.OxFocus').removeClass('OxFocus'); // fixme: see above
|
||||||
Ox.UI.elements[id].addClass('OxFocus');
|
|
||||||
Ox.print('focus', id, stack);
|
Ox.print('focus', id, stack);
|
||||||
|
Ox.UI.elements[id].addClass('OxFocus');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/*@
|
/*@
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ Ox.VideoPlayer <f> Generic Video Player
|
||||||
in <n> In point (sec)
|
in <n> In point (sec)
|
||||||
out <n> Out point (sec)
|
out <n> Out point (sec)
|
||||||
text <s> Text
|
text <s> Text
|
||||||
|
# fixme: documentation is wrong
|
||||||
controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
|
controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
|
||||||
Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
|
Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
|
||||||
'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
|
'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
|
||||||
|
|
|
||||||
|
|
@ -1,401 +1,678 @@
|
||||||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.Dialog <f:Ox.Element> Dialog Object
|
Ox.Dialog <f:Ox.Element> Window object
|
||||||
() -> <f> Dialog Object
|
() -> <f> Window object
|
||||||
(options) -> <f> Dialog Object
|
(options) -> <f> Window object
|
||||||
(options, self) -> <f> Dialog Object
|
(options, self) -> <f> Window object
|
||||||
options <o> Options object
|
options <o> Options object
|
||||||
self <o> shared private variable
|
draggable <b|true> is window draggable
|
||||||
|
fullscreenable <b|true> fixme: silly name
|
||||||
|
height <n|225> height
|
||||||
|
resizeable <b|true> resizeable
|
||||||
|
scaleable <b|true> sccaleable
|
||||||
|
width <n|400> width
|
||||||
|
self <o> Shared private variable
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.Dialog = function(options, self) {
|
Ox.Dialog = function(options, self) {
|
||||||
|
|
||||||
// fixme: dialog should be derived from a generic draggable
|
// fixme: use controlsTop/controlsBottom options, like in VideoPlayer (????)
|
||||||
// fixme: buttons should have a close attribute, or the dialog a close id
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
title: '',
|
|
||||||
buttons: [],
|
buttons: [],
|
||||||
|
controlsBottom: [],
|
||||||
|
controlsTop: [],
|
||||||
|
closeButton: false,
|
||||||
content: null,
|
content: null,
|
||||||
|
fixedCenter: false,
|
||||||
|
fixedSize: false,
|
||||||
|
fixedRatio: false,
|
||||||
focus: true,
|
focus: true,
|
||||||
height: 216,
|
height: 200,
|
||||||
keys: {},
|
maxHeight: Infinity,
|
||||||
minHeight: 144,
|
maximizeButton: false,
|
||||||
minWidth: 256,
|
maxWidth: Infinity,
|
||||||
movable: true,
|
minHeight: 64,
|
||||||
padding: 16,
|
minWidth: 128,
|
||||||
resizable: true,
|
title: '',
|
||||||
width: 384
|
width: 400
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass('OxDialog')
|
.addClass('OxWindow')
|
||||||
.bindEvent({
|
.hide()
|
||||||
key_enter: function() {
|
.appendTo(Ox.UI.$body);
|
||||||
keypress('enter');
|
|
||||||
},
|
|
||||||
key_escape: function() {
|
|
||||||
//Ox.print('KEY ESCAPE')
|
|
||||||
keypress('escape');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$.extend(self, {
|
self.hasButtons = !!self.options.buttons.length;
|
||||||
initialWidth: self.options.width,
|
self.barsHeight = 24 + 24 * self.hasButtons;
|
||||||
initialHeight: self.options.height
|
self.initialHeight = self.options.height;
|
||||||
|
self.initialWidth = self.options.width;
|
||||||
|
self.initialMaxHeight = self.options.maxHeight;
|
||||||
|
self.initialMaxWidth = self.options.maxWidth;
|
||||||
|
self.titleMargin = 8 + (self.options.closeButton ? 20 : 0)
|
||||||
|
+ (self.options.maximizeButton ? 20 : 0);
|
||||||
|
|
||||||
|
if (self.options.focus) {
|
||||||
|
self.$layer = Ox.Element() // fixme: Layer widget that would handle click?
|
||||||
|
.addClass('OxLayer')
|
||||||
|
.mousedown(mousedownLayer)
|
||||||
|
.mouseup(mouseupLayer)
|
||||||
|
.hide()
|
||||||
|
.appendTo(Ox.UI.$body);
|
||||||
|
}
|
||||||
|
|
||||||
|
self.$box = $('<div>')
|
||||||
|
.addClass('OxDialogBox')
|
||||||
|
.css({zIndex: 11});
|
||||||
|
|
||||||
|
self.$titlebar = Ox.Bar({
|
||||||
|
size: 24
|
||||||
|
})
|
||||||
|
.addClass('OxTitlebar')
|
||||||
|
.appendTo(that);
|
||||||
|
|
||||||
|
if (self.options.closeButton) {
|
||||||
|
self.$closeButton = Ox.Button({
|
||||||
|
title: 'close',
|
||||||
|
type: 'image'
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
top: '4px',
|
||||||
|
left: '4px'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
click: function() {
|
||||||
|
that.close();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.appendTo(self.$titlebar);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (self.options.maximizeButton) {
|
||||||
|
self.$maximizeButton = Ox.Button({
|
||||||
|
title: [
|
||||||
|
{id: 'add', title: 'add'},
|
||||||
|
{id: 'remove', title: 'remove'}
|
||||||
|
],
|
||||||
|
type: 'image'
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
top: '4px',
|
||||||
|
left: '24px'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
click: maximize
|
||||||
|
})
|
||||||
|
.appendTo(self.$titlebar);
|
||||||
|
}
|
||||||
|
|
||||||
|
self.$title = Ox.Element()
|
||||||
|
.addClass('OxTitle')
|
||||||
|
.css({
|
||||||
|
marginLeft: self.titleMargin + 'px',
|
||||||
|
marginRight: self.titleMargin + 'px'
|
||||||
|
})
|
||||||
|
.html(self.options.title)
|
||||||
|
.appendTo(self.$titlebar);
|
||||||
|
|
||||||
|
setContent();
|
||||||
|
|
||||||
|
if (self.hasButtons) {
|
||||||
|
self.$buttonsbar = Ox.Bar({
|
||||||
|
size: 24
|
||||||
|
})
|
||||||
|
.addClass('OxButtonsbar')
|
||||||
|
.appendTo(that);
|
||||||
|
self.$buttonsLeft = $('<div>')
|
||||||
|
.addClass('OxButtonsLeft')
|
||||||
|
.appendTo(self.$buttonsbar.$element);
|
||||||
|
self.$buttonsRight = $('<div>')
|
||||||
|
.addClass('OxButtonsRight')
|
||||||
|
.appendTo(self.$buttonsbar.$element);
|
||||||
|
var buttonsLeft,
|
||||||
|
buttonsRight,
|
||||||
|
index = Ox.map(self.options.buttons, function(v, i) {
|
||||||
|
return Ox.isEmpty(v) ? i : null;
|
||||||
|
})[0];
|
||||||
|
if (index) {
|
||||||
|
buttonsLeft = Ox.sub(self.options.buttons, 0, index);
|
||||||
|
buttonsRight = Ox.sub(self.options.buttons, index + 1);
|
||||||
|
} else {
|
||||||
|
buttonsLeft = [];
|
||||||
|
buttonsRight = self.options.buttons;
|
||||||
|
}
|
||||||
|
buttonsLeft.forEach(function($button) {
|
||||||
|
$button.addClass('OxLeft').appendTo(self.$buttonsLeft);
|
||||||
|
});
|
||||||
|
buttonsRight.forEach(function($button) {
|
||||||
|
$button.addClass('OxRight').appendTo(self.$buttonsRight);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!self.options.fixedCenter) {
|
||||||
|
self.$titlebar.css({
|
||||||
|
cursor: 'move'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
doubleclick: function() {
|
||||||
|
!self.centered && center(true);
|
||||||
|
},
|
||||||
|
dragstart: dragstart,
|
||||||
|
drag: drag,
|
||||||
|
dragend: dragend,
|
||||||
|
});
|
||||||
|
self.hasButtons && self.$buttonsbar.css({
|
||||||
|
cursor: 'move'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
doubleclick: function() {
|
||||||
|
!self.centered && center(true);
|
||||||
|
},
|
||||||
|
dragstart: dragstart,
|
||||||
|
drag: drag,
|
||||||
|
dragend: dragend
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
!self.options.fixedSize && [
|
||||||
|
'TopLeft', 'Top', 'TopRight', 'Left', 'Right', 'BottomLeft', 'Bottom', 'BottomRight'
|
||||||
|
].forEach(function(edge) {
|
||||||
|
Ox.Element()
|
||||||
|
.addClass('OxResize OxResize' + edge)
|
||||||
|
.bindEvent({
|
||||||
|
doubleclick: function() {
|
||||||
|
reset(true);
|
||||||
|
},
|
||||||
|
dragstart: resizestart,
|
||||||
|
drag: resize,
|
||||||
|
dragend: resizeend
|
||||||
|
})
|
||||||
|
.appendTo(that);
|
||||||
});
|
});
|
||||||
|
|
||||||
that.$titlebar = Ox.Bar({
|
function center(animate) {
|
||||||
size: 'medium'
|
var ms = animate ? 100 : 0;
|
||||||
})
|
self.centered && decenter();
|
||||||
.addClass('OxTitleBar')
|
that.animate({
|
||||||
.appendTo(that);
|
left: Math.round(
|
||||||
self.options.movable && that.$titlebar
|
(window.innerWidth - self.options.width) / 2
|
||||||
.dblclick(center)
|
) + 'px',
|
||||||
.bindEvent({
|
top: Math.round(
|
||||||
dragstart: dragstart,
|
(window.innerHeight - self.options.height - self.barsHeight) * 0.4
|
||||||
drag: drag
|
) + 'px',
|
||||||
});
|
width: self.options.width + 'px',
|
||||||
|
height: self.options.height + self.barsHeight + 'px'
|
||||||
that.$title = Ox.Element()
|
}, ms, function() {
|
||||||
.addClass('OxTitle')
|
that.css({
|
||||||
.html(self.options.title)
|
left: 0,
|
||||||
.appendTo(that.$titlebar);
|
top: 0,
|
||||||
|
right: 0,
|
||||||
that.$content = Ox.Element()
|
bottom: Math.round(
|
||||||
.addClass('OxContent')
|
(window.innerHeight - self.options.height - self.barsHeight) * 0.2
|
||||||
.css({
|
) + 'px',
|
||||||
padding: self.options.padding + 'px',
|
margin: 'auto'
|
||||||
overflow: 'auto'
|
});
|
||||||
})
|
self.centered = true;
|
||||||
.append(self.options.content)
|
Ox.isFunction(animate) && animate();
|
||||||
.appendTo(that);
|
|
||||||
|
|
||||||
that.$buttonsbar = Ox.Bar({})
|
|
||||||
.addClass('OxButtonsBar')
|
|
||||||
.appendTo(that);
|
|
||||||
loadButtons();
|
|
||||||
|
|
||||||
//that.$buttons[0].focus();
|
|
||||||
|
|
||||||
that.$layer = Ox.Element() // fixme: Layer widget that would handle click?
|
|
||||||
.addClass('OxLayer')
|
|
||||||
.mousedown(mousedownLayer)
|
|
||||||
.mouseup(mouseupLayer);
|
|
||||||
|
|
||||||
function center() {
|
|
||||||
var documentHeight = Ox.UI.$document.height();
|
|
||||||
that.css({
|
|
||||||
left: 0,
|
|
||||||
top: Math.max(parseInt(-documentHeight / 10), self.options.height - documentHeight + 40) + 'px',
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
margin: 'auto'
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragstart(event, e) {
|
function decenter() {
|
||||||
self.drag = {
|
var offset = that.offset();
|
||||||
bodyWidth: Ox.UI.$body.width(),
|
if (self.centered) {
|
||||||
bodyHeight: Ox.UI.$document.height(),
|
that.css({
|
||||||
elementWidth: that.width(),
|
left: offset.left + 'px',
|
||||||
offset: that.offset(),
|
top: offset.top + 'px',
|
||||||
x: e.clientX,
|
margin: 0
|
||||||
y: e.clientY
|
});
|
||||||
};
|
self.centered = false;
|
||||||
that.css({
|
}
|
||||||
margin: 0
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function drag(event, e) {
|
function dragstart(event) {
|
||||||
|
var offset;
|
||||||
|
if (!$(event.target).is('.OxButton')) {
|
||||||
|
offset = that.offset();
|
||||||
|
self.drag = {
|
||||||
|
left: offset.left,
|
||||||
|
top: offset.top,
|
||||||
|
x: event.clientX,
|
||||||
|
y: event.clientY
|
||||||
|
};
|
||||||
|
decenter();
|
||||||
|
that.wrap(self.$box);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drag(event) {
|
||||||
|
Ox.print(document.body.scrollTop, '...')
|
||||||
var left = Ox.limit(
|
var left = Ox.limit(
|
||||||
self.drag.offset.left - self.drag.x + e.clientX,
|
self.drag.left - self.drag.x + event.clientX,
|
||||||
24 - self.drag.elementWidth, self.drag.bodyWidth - 24
|
self.minLeft, self.maxLeft
|
||||||
//0, self.drag.documentWidth - self.drag.elementWidth
|
|
||||||
),
|
),
|
||||||
top = Ox.limit(
|
top = Ox.limit(
|
||||||
self.drag.offset.top - self.drag.y + e.clientY,
|
self.drag.top - self.drag.y + event.clientY,
|
||||||
24, self.drag.bodyHeight - 24
|
self.minTop, self.maxTop
|
||||||
//24, self.drag.documentHeight - self.drag.elementHeight
|
|
||||||
);
|
);
|
||||||
that.css({
|
setCSS({
|
||||||
left: left + 'px',
|
left: left,
|
||||||
top: top + 'px'
|
top: top
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragstartResize(event, e) {
|
function dragend() {
|
||||||
self.drag = {
|
that.unwrap();
|
||||||
documentWidth: Ox.UI.$document.width(),
|
|
||||||
documentHeight: Ox.UI.$document.height(),
|
|
||||||
elementWidth: that.width(),
|
|
||||||
elementHeight: that.height(),
|
|
||||||
offset: that.offset(),
|
|
||||||
x: e.clientX,
|
|
||||||
y: e.clientY
|
|
||||||
};
|
|
||||||
$.extend(self.drag, {
|
|
||||||
ratio: self.drag.elementWidth / self.drag.elementHeight
|
|
||||||
});
|
|
||||||
that.css({
|
|
||||||
left: self.drag.offset.left,
|
|
||||||
top: self.drag.offset.top,
|
|
||||||
margin: 0
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragResize(event, e) {
|
function maximize() {
|
||||||
if (!e.shiftKey) {
|
var offset = that.offset();
|
||||||
self.drag.ratio = self.options.width / self.options.height;
|
decenter();
|
||||||
|
if (!self.maximized) {
|
||||||
|
self.originalLeft = offset.left;
|
||||||
|
self.originalTop = offset.top;
|
||||||
|
self.originalWidth = self.options.width;
|
||||||
|
self.originalHeight = self.options.height;
|
||||||
}
|
}
|
||||||
self.options.width = Ox.limit(
|
setCSS(self.maximized ? {
|
||||||
self.drag.elementWidth - self.drag.x + e.clientX,
|
left: self.originalLeft,
|
||||||
self.options.minWidth,
|
top: self.originalTop,
|
||||||
Math.min(
|
width: self.originalWidth,
|
||||||
self.drag.documentWidth,
|
height: self.originalHeight
|
||||||
self.drag.documentWidth - self.drag.offset.left
|
} : {
|
||||||
)
|
left: Math.round((window.innerWidth - self.options.maxWidth) / 2),
|
||||||
);
|
top: Math.round((window.innerHeight - self.options.maxHeight - self.barsHeight) / 2),
|
||||||
self.options.height = Ox.limit(
|
width: self.options.maxWidth,
|
||||||
self.drag.elementHeight - self.drag.y + e.clientY,
|
height: self.options.maxHeight
|
||||||
self.options.minHeight,
|
}, true);
|
||||||
Math.min(
|
self.maximized = !self.maximized;
|
||||||
self.drag.documentHeight,
|
|
||||||
self.drag.documentHeight - self.drag.offset.top
|
|
||||||
)
|
|
||||||
);
|
|
||||||
if (e.shiftKey) {
|
|
||||||
self.options.height = Ox.limit(
|
|
||||||
self.options.width / self.drag.ratio,
|
|
||||||
self.options.minHeight,
|
|
||||||
Math.min(
|
|
||||||
self.drag.documentHeight,
|
|
||||||
self.drag.documentHeight - self.drag.offset.top
|
|
||||||
)
|
|
||||||
);
|
|
||||||
self.options.width = self.options.height * self.drag.ratio;
|
|
||||||
}
|
|
||||||
that.width(self.options.width);
|
|
||||||
that.height(self.options.height);
|
|
||||||
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
|
||||||
}
|
|
||||||
|
|
||||||
function dragendResize(event, e) {
|
|
||||||
triggerResizeEvent();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getButtonById(id) {
|
|
||||||
var ret = null;
|
|
||||||
//Ox.print('that.$buttons', that.$buttons, id)
|
|
||||||
Ox.forEach(that.$buttons, function(button) {
|
|
||||||
if (button.options('id') == id) {
|
|
||||||
ret = button;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
function keypress(key) {
|
|
||||||
var id = self.options.keys[key];
|
|
||||||
//Ox.print('X', key, self.options.keys)
|
|
||||||
id && getButtonById(id).$element.trigger('click');
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadButtons() {
|
|
||||||
/*Ox.print('loadButtons', $.map(self.options.buttons, function(v) {
|
|
||||||
return v;
|
|
||||||
}));*/
|
|
||||||
if (that.$buttons) {
|
|
||||||
that.$buttons.forEach(function($button) {
|
|
||||||
$button.removeElement();
|
|
||||||
});
|
|
||||||
that.$resize.removeElement();
|
|
||||||
// that.$buttonsbar.empty();
|
|
||||||
}
|
|
||||||
that.$buttons = [];
|
|
||||||
if (!Ox.isArray(self.options.buttons[0])) {
|
|
||||||
self.options.buttons = [[], self.options.buttons];
|
|
||||||
}
|
|
||||||
self.options.buttons[0].forEach(function(button, i) {
|
|
||||||
that.$buttons[i] = button
|
|
||||||
.addClass('OxLeft')
|
|
||||||
.appendTo(that.$buttonsbar);
|
|
||||||
});
|
|
||||||
if (self.options.resizable) {
|
|
||||||
that.$resize = Ox.Element()
|
|
||||||
.addClass('OxResize')
|
|
||||||
.dblclick(reset)
|
|
||||||
.bindEvent({
|
|
||||||
dragstart: dragstartResize,
|
|
||||||
drag: dragResize,
|
|
||||||
dragend: dragendResize
|
|
||||||
})
|
|
||||||
.appendTo(that.$buttonsbar);
|
|
||||||
}
|
|
||||||
self.options.buttons[1].reverse().forEach(function(button) {
|
|
||||||
that.$buttons[that.$buttons.length] = button
|
|
||||||
.addClass('OxRight')
|
|
||||||
.appendTo(that.$buttonsbar);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function mousedownLayer() {
|
function mousedownLayer() {
|
||||||
that.$layer.stop().animate({
|
self.$layer.stop().animate({
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseupLayer() {
|
function mouseupLayer() {
|
||||||
that.$layer.stop().animate({
|
self.$layer.stop().animate({
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset(animate) {
|
||||||
$.extend(self.options, {
|
var offset, left, top;
|
||||||
height: self.initialHeight,
|
if (!self.centered) {
|
||||||
width: self.initialWidth
|
offset = that.offset();
|
||||||
});
|
left = Ox.limit(
|
||||||
that/*.css({
|
offset.left + Math.round((self.options.width - self.initialWidth) / 2),
|
||||||
left: Math.max(that.offset().left, 24 - that.width())
|
self.minLeft, self.maxLeft
|
||||||
})*/
|
);
|
||||||
.width(self.options.width)
|
top = Ox.limit(
|
||||||
.height(self.options.height);
|
offset.top + Math.round((self.options.height - self.initialHeight) / 2),
|
||||||
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
self.minTop, self.maxTop
|
||||||
triggerResizeEvent();
|
);
|
||||||
|
}
|
||||||
|
setCSS(Ox.extend({
|
||||||
|
width: self.initialWidth,
|
||||||
|
height: self.initialHeight
|
||||||
|
}, self.centered ? {} : {
|
||||||
|
left: left,
|
||||||
|
top: top
|
||||||
|
}), animate);
|
||||||
}
|
}
|
||||||
|
|
||||||
function triggerResizeEvent() {
|
function resizestart(event) {
|
||||||
|
var edge = event.target.className.substr(17).toLowerCase(),
|
||||||
|
offset = that.offset();
|
||||||
|
self.drag = {
|
||||||
|
edge: edge,
|
||||||
|
height: self.options.height,
|
||||||
|
isLeft: edge.indexOf('left') > -1,
|
||||||
|
isTop: edge.indexOf('top') > -1,
|
||||||
|
isRight: edge.indexOf('right') > -1,
|
||||||
|
isBottom: edge.indexOf('bottom') > -1,
|
||||||
|
left: offset.left,
|
||||||
|
top: offset.top,
|
||||||
|
width: self.options.width
|
||||||
|
};
|
||||||
|
decenter();
|
||||||
|
if (self.maximized) {
|
||||||
|
self.$maximizeButton.toggleTitle();
|
||||||
|
self.maximized = false;
|
||||||
|
}
|
||||||
|
that.wrap(self.$box);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize(event) {
|
||||||
|
var ratio = self.drag.width / self.drag.height, horizontal, vertical;
|
||||||
|
if (!self.drag.fixedRatio && event.shiftKey) {
|
||||||
|
self.drag.centerX = Math.round(self.drag.left + self.drag.width / 2);
|
||||||
|
self.drag.centerY = Math.round(self.drag.top + self.drag.height / 2);
|
||||||
|
}
|
||||||
|
self.drag.fixedCenter = self.options.fixedCenter || event.altKey;
|
||||||
|
self.drag.fixedRatio = self.options.fixedRatio || event.shiftKey;
|
||||||
|
horizontal = self.drag.edge == 'left' || self.drag.edge == 'right'
|
||||||
|
|| ratio >= 1 || !self.drag.fixedRatio;
|
||||||
|
vertical = self.drag.edge == 'top' || self.drag.edge == 'bottom'
|
||||||
|
|| ratio < 1 || !self.drag.fixedRatio;
|
||||||
|
if (self.drag.isLeft && horizontal) {
|
||||||
|
self.options.width = Ox.limit(
|
||||||
|
self.options.width + (
|
||||||
|
self.drag.left - Math.min(event.clientX, self.maxLeft)
|
||||||
|
) * (self.drag.fixedCenter ? 2 : 1),
|
||||||
|
self.options.minWidth,
|
||||||
|
self.options.maxWidth
|
||||||
|
);
|
||||||
|
if (self.drag.fixedRatio) {
|
||||||
|
self.options.height = Ox.limit(
|
||||||
|
Math.round(self.options.width / ratio),
|
||||||
|
self.options.minHeight,
|
||||||
|
self.options.maxHeight
|
||||||
|
);
|
||||||
|
self.options.width = Math.round(self.options.height * ratio);
|
||||||
|
}
|
||||||
|
setCSS(Ox.extend({
|
||||||
|
left: self.drag.left + (
|
||||||
|
self.drag.width - self.options.width
|
||||||
|
) / (self.drag.fixedCenter ? 2 : 1),
|
||||||
|
width: self.options.width,
|
||||||
|
}, self.drag.fixedRatio ? {
|
||||||
|
top: Math.max(Math.round(
|
||||||
|
self.drag.edge == 'topleft'
|
||||||
|
? self.drag.top + self.drag.height - self.options.height
|
||||||
|
: self.drag.edge == 'bottomleft'
|
||||||
|
? self.drag.top
|
||||||
|
: self.drag.centerY - self.options.height / 2
|
||||||
|
), self.minTop),
|
||||||
|
height: self.options.height
|
||||||
|
} : {}));
|
||||||
|
}
|
||||||
|
if (self.drag.isTop && vertical) {
|
||||||
|
self.options.height = Ox.limit(
|
||||||
|
self.options.height + (
|
||||||
|
self.drag.top - Ox.limit(event.clientY, self.minTop, self.maxTop)
|
||||||
|
) * (self.drag.fixedCenter ? 2 : 1),
|
||||||
|
self.options.minHeight,
|
||||||
|
self.options.maxHeight
|
||||||
|
);
|
||||||
|
if (self.drag.fixedRatio) {
|
||||||
|
self.options.width = Ox.limit(
|
||||||
|
Math.round(self.options.height * ratio),
|
||||||
|
self.options.minWidth,
|
||||||
|
self.options.maxWidth
|
||||||
|
);
|
||||||
|
self.options.height = Math.round(self.options.width / ratio);
|
||||||
|
}
|
||||||
|
setCSS(Ox.extend({
|
||||||
|
top: Math.max(self.drag.top + (
|
||||||
|
self.drag.height - self.options.height
|
||||||
|
) / (self.drag.fixedCenter ? 2 : 1), self.minTop),
|
||||||
|
height: self.options.height,
|
||||||
|
}, (self.drag.fixedRatio) ? {
|
||||||
|
left: Math.round(
|
||||||
|
self.drag.edge == 'topleft'
|
||||||
|
? self.drag.left + self.drag.width - self.options.width
|
||||||
|
: self.drag.edge == 'topright'
|
||||||
|
? self.drag.left
|
||||||
|
: self.drag.centerX - self.options.width / 2
|
||||||
|
),
|
||||||
|
width: self.options.width
|
||||||
|
} : {}));
|
||||||
|
}
|
||||||
|
if (self.drag.isRight && horizontal) {
|
||||||
|
self.options.width = Ox.limit(
|
||||||
|
self.options.width + (
|
||||||
|
Math.max(event.clientX, 24) - self.drag.left - self.drag.width
|
||||||
|
) * (self.drag.fixedCenter ? 2 : 1),
|
||||||
|
self.options.minWidth,
|
||||||
|
self.options.maxWidth
|
||||||
|
);
|
||||||
|
if (self.drag.fixedRatio) {
|
||||||
|
self.options.height = Ox.limit(
|
||||||
|
Math.round(self.options.width / ratio),
|
||||||
|
self.options.minHeight,
|
||||||
|
self.options.maxHeight
|
||||||
|
);
|
||||||
|
self.options.width = Math.round(self.options.height * ratio);
|
||||||
|
}
|
||||||
|
setCSS(Ox.extend({
|
||||||
|
width: self.options.width,
|
||||||
|
}, self.drag.fixedCenter ? {
|
||||||
|
left: self.drag.left + (
|
||||||
|
self.drag.width - self.options.width
|
||||||
|
) / 2
|
||||||
|
} : {}, self.drag.fixedRatio ? {
|
||||||
|
top: Math.max(Math.round(
|
||||||
|
self.drag.edge == 'topright'
|
||||||
|
? self.drag.top + self.drag.height - self.options.height
|
||||||
|
: self.drag.edge == 'bottomright'
|
||||||
|
? self.drag.top
|
||||||
|
: self.drag.centerY - self.options.height / 2
|
||||||
|
), self.minTop),
|
||||||
|
height: self.options.height
|
||||||
|
} : {}));
|
||||||
|
}
|
||||||
|
if (self.drag.isBottom && vertical) {
|
||||||
|
self.options.height = Ox.limit(
|
||||||
|
self.options.height + (
|
||||||
|
Math.max(event.clientY, 24) - self.drag.top - self.drag.height - self.barsHeight
|
||||||
|
) * (self.drag.fixedCenter ? 2 : 1),
|
||||||
|
self.options.minHeight,
|
||||||
|
self.options.maxHeight
|
||||||
|
);
|
||||||
|
if (self.drag.fixedRatio) {
|
||||||
|
self.options.width = Ox.limit(
|
||||||
|
Math.round(self.options.height * ratio),
|
||||||
|
self.options.minWidth,
|
||||||
|
self.options.maxWidth
|
||||||
|
);
|
||||||
|
self.options.height = Math.round(self.options.width / ratio);
|
||||||
|
}
|
||||||
|
setCSS(Ox.extend({
|
||||||
|
height: self.options.height,
|
||||||
|
}, self.drag.fixedCenter ? {
|
||||||
|
top: Math.max(self.drag.top + (
|
||||||
|
self.drag.height - self.options.height
|
||||||
|
) / 2, self.minTop)
|
||||||
|
} : {}, self.drag.fixedRatio && self.drag.edge == 'bottom' ? {
|
||||||
|
left: Math.round(
|
||||||
|
self.drag.edge == 'bottomleft'
|
||||||
|
? self.drag.left + self.drag.width - self.options.width
|
||||||
|
: self.drag.edge == 'bottomright'
|
||||||
|
? self.drag.left
|
||||||
|
: self.drag.centerX - self.options.width / 2
|
||||||
|
),
|
||||||
|
width: self.options.width
|
||||||
|
} : {}));
|
||||||
|
}
|
||||||
|
var offset = that.offset();
|
||||||
|
self.drag.left = offset.left;
|
||||||
|
self.drag.top = offset.top;
|
||||||
|
self.drag.width = self.options.width;
|
||||||
|
self.drag.height = self.options.height;
|
||||||
|
self.drag.minLeft = 24 - self.options.width;
|
||||||
|
self.drag.minTop = self.hasButtons ? 24 - self.options.height - self.barsHeight : 0;
|
||||||
that.triggerEvent('resize', {
|
that.triggerEvent('resize', {
|
||||||
width: self.options.width,
|
width: self.options.width,
|
||||||
height: self.options.height
|
height: self.options.height
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
self.setOption = function(key, value) {
|
function resizeend() {
|
||||||
if (key == 'buttons') {
|
that.unwrap();
|
||||||
loadButtons();
|
}
|
||||||
/*
|
|
||||||
that.$buttonsbar.children().animate({
|
function setContent() {
|
||||||
|
var animate = !!self.$content
|
||||||
|
isImage = !self.options.content.ox && self.options.content.is('img');
|
||||||
|
if (animate) {
|
||||||
|
self.$content.animate({
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 100, function() {
|
}, 100, function() {
|
||||||
loadButtons();
|
$(this).remove() // fixme: removeElement?
|
||||||
that.$buttonsbar.children().animate({
|
|
||||||
opacity: 1
|
|
||||||
}, 100);
|
|
||||||
});
|
});
|
||||||
*/
|
self.options.content.css({
|
||||||
} else if (key == 'content') {
|
|
||||||
that.$content.html(value);
|
|
||||||
} else if (key == 'height' || key == 'width') {
|
|
||||||
that.animate({
|
|
||||||
height: self.options.height + 'px',
|
|
||||||
width: self.options.width + 'px'
|
|
||||||
}, 100);
|
|
||||||
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
|
||||||
} else if (key == 'title') {
|
|
||||||
that.$title.animate({
|
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 100, function() {
|
|
||||||
that.$title.html(value).animate({
|
|
||||||
opacity: 1
|
|
||||||
}, 100);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
self.$content = (isImage ? self.options.content : Ox.Element())
|
||||||
|
.addClass('OxContent')
|
||||||
|
.css(self.hasButtons ? {
|
||||||
|
bottom: '24px'
|
||||||
|
} : {
|
||||||
|
bottom: 0,
|
||||||
|
borderBottomLeftRadius: '8px',
|
||||||
|
borderBottomRightRadius: '8px'
|
||||||
|
})
|
||||||
|
.appendTo(that.$element);
|
||||||
|
!isImage && self.$content.append(
|
||||||
|
self.options.content.css(self.hasButtons ? {} : {
|
||||||
|
borderBottomLeftRadius: '8px',
|
||||||
|
borderBottomRightRadius: '8px'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
animate && self.options.content.animate({
|
||||||
|
opacity: 1
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
that.center = function() {
|
function setCSS(css, animate) {
|
||||||
|
var ms = animate ? 100 : 0,
|
||||||
|
offset = that.offset(),
|
||||||
|
triggerEvent = (css.width && css.width != self.options.width)
|
||||||
|
|| (css.height && css.height != self.options.height)
|
||||||
|
css = Ox.extend({
|
||||||
|
left: offset.left,
|
||||||
|
top: offset.top,
|
||||||
|
width: self.options.width,
|
||||||
|
height: self.options.height
|
||||||
|
}, css);
|
||||||
|
that.animate({
|
||||||
|
left: css.left + 'px',
|
||||||
|
top: css.top + 'px',
|
||||||
|
width: css.width + 'px',
|
||||||
|
height: css.height + self.barsHeight + 'px'
|
||||||
|
}, ms, function() {
|
||||||
|
self.options.width = css.width;
|
||||||
|
self.options.height = css.height;
|
||||||
|
self.minLeft = 24 - self.options.width;
|
||||||
|
self.minTop = self.hasButtons ? 24 - self.options.height - self.barsHeight : 0;
|
||||||
|
triggerEvent && that.triggerEvent('resize', {
|
||||||
|
width: self.options.width,
|
||||||
|
height: self.options.height
|
||||||
|
});
|
||||||
|
Ox.isFunction(animate) && animate();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setMinAndMax() {
|
||||||
|
var ratio, maxRatio, minRatio;
|
||||||
|
self.maxLeft = window.innerWidth - 24;
|
||||||
|
self.maxTop = window.innerHeight - 24;
|
||||||
|
self.minLeft = 24 - self.options.width;
|
||||||
|
self.minTop = self.hasButtons ? 24 - self.options.height : 0;
|
||||||
|
self.options.maxHeight = Ox.limit(self.initialMaxHeight, 64, window.innerHeight - self.barsHeight);
|
||||||
|
self.options.maxWidth = Ox.limit(self.initialMaxWidth, 128, window.innerWidth);
|
||||||
|
if (self.options.fixedRatio) {
|
||||||
|
ratio = self.options.width / self.options.height;
|
||||||
|
maxRatio = self.options.maxWidth / self.options.maxHeight;
|
||||||
|
minRatio = self.options.minWidth / self.options.minHeight;
|
||||||
|
if (maxRatio > ratio) {
|
||||||
|
self.options.maxWidth = Math.round(self.options.maxHeight * ratio);
|
||||||
|
} else if (maxRatio < ratio) {
|
||||||
|
self.options.maxHeight = Math.round(self.options.maxWidth / ratio);
|
||||||
|
}
|
||||||
|
if (minRatio > ratio) {
|
||||||
|
self.options.minWidth = Math.round(self.options.minHeight * ratio);
|
||||||
|
} else if (minRatio < ratio) {
|
||||||
|
self.options.minHeight = Math.round(self.options.minWidth / ratio);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Ox.print('sMM', self, window.innerHeight, maxRatio)
|
||||||
|
}
|
||||||
|
|
||||||
|
self.setOption = function(key, value) {
|
||||||
|
if (key == 'content') {
|
||||||
|
setContent();
|
||||||
|
} else if (key == 'title') {
|
||||||
|
self.$title.animate({
|
||||||
|
opacity: 0
|
||||||
|
}, 50, function() {
|
||||||
|
self.$title.html(value).animate({
|
||||||
|
opacity: 1
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
that.close = function(callback) {
|
that.close = function(callback) {
|
||||||
callback = callback || function() {};
|
|
||||||
that.animate({
|
that.animate({
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 200, function() {
|
}, 100, function() {
|
||||||
that.$buttons.forEach(function($button) {
|
//that.removeElement();
|
||||||
$button.removeElement();
|
that.hide();
|
||||||
});
|
callback && callback();
|
||||||
if (self.options.focus) {
|
|
||||||
that.loseFocus();
|
|
||||||
that.$layer.removeElement();
|
|
||||||
}
|
|
||||||
that.removeElement();
|
|
||||||
callback();
|
|
||||||
});
|
});
|
||||||
Ox.UI.$window.unbind('mouseup', mouseupLayer);
|
if (self.maximized) {
|
||||||
|
self.$maximizeButton.toggleTitle();
|
||||||
|
self.maximized = false;
|
||||||
|
}
|
||||||
|
if (self.options.focus) {
|
||||||
|
self.$layer.hide();
|
||||||
|
that.loseFocus();
|
||||||
|
Ox.UI.$window.unbind({mouseup: mouseupLayer});
|
||||||
|
}
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
that.content = function($element) {
|
that.fullscreen = function() {
|
||||||
that.$content.empty().append($element);
|
|
||||||
return that;
|
|
||||||
};
|
|
||||||
|
|
||||||
that.disable = function() {
|
|
||||||
// to be used on submit of form, like login
|
|
||||||
that.$layer.addClass('OxFront');
|
|
||||||
return that;
|
|
||||||
};
|
|
||||||
|
|
||||||
that.disableButton = function(id) {
|
|
||||||
getButtonById(id).options({
|
|
||||||
disabled: true
|
|
||||||
});
|
|
||||||
return that;
|
|
||||||
};
|
|
||||||
|
|
||||||
that.enable = function() {
|
|
||||||
that.$layer.removeClass('OxFront');
|
|
||||||
return that;
|
|
||||||
};
|
|
||||||
|
|
||||||
that.enableButton = function(id) {
|
|
||||||
getButtonById(id).options({
|
|
||||||
disabled: false
|
|
||||||
});
|
|
||||||
return that;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
that.open = function() {
|
that.open = function() {
|
||||||
//Ox.print('before open')
|
setMinAndMax();
|
||||||
if (self.options.focus) {
|
|
||||||
that.$layer.appendTo(Ox.UI.$body);
|
|
||||||
}
|
|
||||||
that.css({
|
|
||||||
opacity: 0
|
|
||||||
}).appendTo(Ox.UI.$body).animate({
|
|
||||||
opacity: 1
|
|
||||||
}, 200);
|
|
||||||
center();
|
center();
|
||||||
reset();
|
reset();
|
||||||
|
that.css({
|
||||||
|
opacity: 0
|
||||||
|
}).show().animate({
|
||||||
|
opacity: 1
|
||||||
|
}, 100);
|
||||||
if (self.options.focus) {
|
if (self.options.focus) {
|
||||||
|
self.$layer.show();
|
||||||
that.gainFocus();
|
that.gainFocus();
|
||||||
Ox.UI.$window.bind('mouseup', mouseupLayer);
|
Ox.UI.$window.bind({mouseup: mouseupLayer});
|
||||||
}
|
}
|
||||||
//Ox.print('after open')
|
Ox.UI.$window.bind({
|
||||||
|
resize: function() {
|
||||||
|
var offset = that.offset();
|
||||||
|
setMinAndMax();
|
||||||
|
if (self.centered) {
|
||||||
|
center();
|
||||||
|
} else {
|
||||||
|
that.css({
|
||||||
|
left: Math.min(offset.left, self.maxLeft) + 'px',
|
||||||
|
top: Math.min(offset.top, self.maxTop) + 'px'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
that.size = function(width, height, callback) {
|
that.setSize = function(width, height) {
|
||||||
$.extend(self, {
|
self.options.width = width;
|
||||||
initialWidth: width,
|
self.options.height = height;
|
||||||
initialHeight: height
|
setMinAndMax();
|
||||||
});
|
if (self.maximized) {
|
||||||
$.extend(self.options, {
|
self.options.width = self.options.maxWidth;
|
||||||
width: width,
|
self.options.height = self.options.maxHeight;
|
||||||
height: height
|
}
|
||||||
});
|
center(true);
|
||||||
// fixme: duplicated
|
that.triggerEvent('resize', {
|
||||||
that.animate({
|
width: self.options.width,
|
||||||
height: self.options.height + 'px',
|
height: self.options.height
|
||||||
width: self.options.width + 'px'
|
|
||||||
}, 100, function() {
|
|
||||||
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
|
||||||
callback();
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
||||||
/*@
|
|
||||||
Ox.Window <f:Ox.Element> Window object
|
|
||||||
() -> <f> Window object
|
|
||||||
(options) -> <f> Window object
|
|
||||||
(options, self) -> <f> Window object
|
|
||||||
options <o> Options object
|
|
||||||
draggable <b|true> is window draggable
|
|
||||||
fullscreenable <b|true> fixme: silly name
|
|
||||||
height <n|225> height
|
|
||||||
resizeable <b|true> resizeable
|
|
||||||
scaleable <b|true> sccaleable
|
|
||||||
width <n|400> width
|
|
||||||
self <o> Shared private variable
|
|
||||||
@*/
|
|
||||||
Ox.Window = function(options, self) {
|
|
||||||
|
|
||||||
self = self || {};
|
|
||||||
var that = Ox.Element({}, self)
|
|
||||||
.defaults({
|
|
||||||
draggable: true,
|
|
||||||
fullscreenable: true, // fixme: silly name
|
|
||||||
height: 225,
|
|
||||||
resizeable: true,
|
|
||||||
scaleable: true,
|
|
||||||
width: 400
|
|
||||||
})
|
|
||||||
.options(options || {});
|
|
||||||
|
|
||||||
self.center = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
self.drag = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
self.fullscreen = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
self.setOption = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
self.reset = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
self.resize = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
self.scale = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
that.close = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
that.open = function() {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
return that;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
@ -99,6 +99,13 @@ Dialog
|
||||||
background: rgb(255, 255, 255);
|
background: rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.OxThemeClassic .OxWindow {
|
||||||
|
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
|
||||||
|
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxWindow .OxContent {
|
||||||
|
background: rgba(208, 208, 208, 0.95);
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Document
|
Document
|
||||||
|
|
|
||||||
|
|
@ -95,6 +95,14 @@ Dialog
|
||||||
background: rgb(0, 0, 0);
|
background: rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.OxThemeModern .OxWindow > div {
|
||||||
|
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
|
||||||
|
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
.OxThemeModern .OxWindow .OxContent {
|
||||||
|
background: rgba(48, 48, 48, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
|
|
|
||||||
47
source/Ox.js
47
source/Ox.js
|
|
@ -894,7 +894,7 @@ Ox.some = function(obj, fn) {
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.substr <f> Returns a substring or sub-array
|
Ox.sub <f> Returns a substring or sub-array
|
||||||
Ox.sub behaves like collection[start:stop] in Python
|
Ox.sub behaves like collection[start:stop] in Python
|
||||||
(or, for strings, like str.substring() with negative values for stop)
|
(or, for strings, like str.substring() with negative values for stop)
|
||||||
> Ox.sub([1, 2, 3], 1, -1)
|
> Ox.sub([1, 2, 3], 1, -1)
|
||||||
|
|
@ -2740,7 +2740,7 @@ Ox.formatUnit = function(num, str) {
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.getLatLngByXY <f> Returns lat/lng for a given x/y on a 1x1 mercator projection
|
Ox.getLatLngByXY <f> Returns lat/lng for a given x/y on a 1x1 mercator projection
|
||||||
> Ox.values(Ox.getLatLngByXY({x: 0.5, y: 0.5}))
|
> Ox.getLatLngByXY({x: 0.5, y: 0.5})
|
||||||
{lat: 0, lng: 0}
|
{lat: 0, lng: 0}
|
||||||
@*/
|
@*/
|
||||||
Ox.getLatLngByXY = function(xy) {
|
Ox.getLatLngByXY = function(xy) {
|
||||||
|
|
@ -3398,7 +3398,7 @@ Ox.test = function(file, callback) {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
section: item.section,
|
section: item.section,
|
||||||
statement: example.statement,
|
statement: example.statement,
|
||||||
success: Ox.isEqual(eval('Ox.test.result = ' + example.result), actual)
|
passed: Ox.isEqual(eval('Ox.test.result = ' + example.result), actual)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -4273,31 +4273,6 @@ Ox.stripTags = function(str) {
|
||||||
return str.replace(/<.*?>/g, '');
|
return str.replace(/<.*?>/g, '');
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
|
||||||
Ox.substr <f> A better <code>substr</code>
|
|
||||||
Ox.substr behaves like str[start:stop] in Python
|
|
||||||
(or like str.substring() with negative values for stop)
|
|
||||||
> Ox.substr('foobar', 1)
|
|
||||||
"oobar"
|
|
||||||
> Ox.substr('foobar', -1)
|
|
||||||
"r"
|
|
||||||
> Ox.substr('foobar', 1, 5)
|
|
||||||
"ooba"
|
|
||||||
> Ox.substr('foobar', 1, -1)
|
|
||||||
"ooba"
|
|
||||||
> Ox.substr('foobar', -5, 5)
|
|
||||||
"ooba"
|
|
||||||
> Ox.substr('foobar', -5, -1)
|
|
||||||
"ooba"
|
|
||||||
@*/
|
|
||||||
// deprecated, use Ox.sub()
|
|
||||||
Ox.substr = function(str, start, stop) {
|
|
||||||
// fixme: needed?
|
|
||||||
stop = Ox.isUndefined(stop) ? str.length : stop;
|
|
||||||
return str.substring(
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.toCamelCase <f> Takes a string with '-', '/' or '_', returns a camelCase string
|
Ox.toCamelCase <f> Takes a string with '-', '/' or '_', returns a camelCase string
|
||||||
> Ox.toCamelCase('foo-bar-baz')
|
> Ox.toCamelCase('foo-bar-baz')
|
||||||
|
|
@ -4382,29 +4357,27 @@ Ox.truncate <f> Truncate a string to a given length
|
||||||
(string, length, position, placeholder) -> <s> Truncated string
|
(string, length, position, placeholder) -> <s> Truncated string
|
||||||
> Ox.truncate('anticonstitutionellement', 16)
|
> Ox.truncate('anticonstitutionellement', 16)
|
||||||
'anticonstitut...'
|
'anticonstitut...'
|
||||||
> Ox.truncate('anticonstitutionellement', 16, -1)
|
> Ox.truncate('anticonstitutionellement', 16, '...', 'left')
|
||||||
'...utionellement'
|
'...utionellement'
|
||||||
> Ox.truncate('anticonstitutionellement', 16, '>')
|
> Ox.truncate('anticonstitutionellement', 16, '>')
|
||||||
'anticonstitutio>'
|
'anticonstitutio>'
|
||||||
> Ox.truncate("anticonstitutionellement", 16, "...", "center")
|
> Ox.truncate('anticonstitutionellement', 16, '...', 'center')
|
||||||
'anticon...lement'
|
'anticon...lement'
|
||||||
@*/
|
@*/
|
||||||
Ox.truncate = function(str, len, pad, pos) {
|
Ox.truncate = function(str, len, pad, pos) {
|
||||||
/*
|
var pad = pad || '...',
|
||||||
*/
|
pos = pos || 'right',
|
||||||
var pad = pad || {},
|
|
||||||
pos = pos || "right",
|
|
||||||
strlen = str.length,
|
strlen = str.length,
|
||||||
padlen = pad.length,
|
padlen = pad.length,
|
||||||
left, right;
|
left, right;
|
||||||
if (strlen > len) {
|
if (strlen > len) {
|
||||||
if (pos == "left") {
|
if (pos == 'left') {
|
||||||
str = pad + str.substr(padlen + strlen - len);
|
str = pad + str.substr(padlen + strlen - len);
|
||||||
} else if (pos == "center") {
|
} else if (pos == 'center') {
|
||||||
left = Math.ceil((len - padlen) / 2);
|
left = Math.ceil((len - padlen) / 2);
|
||||||
right = Math.floor((len - padlen) / 2);
|
right = Math.floor((len - padlen) / 2);
|
||||||
str = str.substr(0, left) + pad + str.substr(-right);
|
str = str.substr(0, left) + pad + str.substr(-right);
|
||||||
} else if (pos == "right") {
|
} else if (pos == 'right') {
|
||||||
str = str.substr(0, len - padlen) + pad;
|
str = str.substr(0, len - padlen) + pad;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
100
tests/tests.js
100
tests/tests.js
|
|
@ -26,8 +26,8 @@ Ox.load('UI', function() {
|
||||||
tests(['../build/Ox.js'/*, '../build/js/ox.data.js'*/]);
|
tests(['../build/Ox.js'/*, '../build/js/ox.data.js'*/]);
|
||||||
|
|
||||||
function tests() {
|
function tests() {
|
||||||
var succeeded = 0, failed = 0,
|
var passed = 0, failed = 0,
|
||||||
lines, spaces, command, expected, result, success,
|
lines, spaces, command, expected, result, passed,
|
||||||
replace = ['', ''], fns = [], $test
|
replace = ['', ''], fns = [], $test
|
||||||
Ox.forEach(Ox.isArray(arguments[0]) ? arguments[0] : arguments, function(script, i) {
|
Ox.forEach(Ox.isArray(arguments[0]) ? arguments[0] : arguments, function(script, i) {
|
||||||
Ox.test(script, function(results) {
|
Ox.test(script, function(results) {
|
||||||
|
|
@ -37,7 +37,6 @@ Ox.load('UI', function() {
|
||||||
tests[result.section][result.name] = tests[result.section][result.name] || [];
|
tests[result.section][result.name] = tests[result.section][result.name] || [];
|
||||||
tests[result.section][result.name].push(result);
|
tests[result.section][result.name].push(result);
|
||||||
});
|
});
|
||||||
Ox.print('tests', tests)
|
|
||||||
Ox.forEach(tests, function(functions, section) {
|
Ox.forEach(tests, function(functions, section) {
|
||||||
Ox.Bar({size: 14})
|
Ox.Bar({size: 14})
|
||||||
.css({padding: '1px 0 1px 4px'})
|
.css({padding: '1px 0 1px 4px'})
|
||||||
|
|
@ -51,27 +50,27 @@ Ox.load('UI', function() {
|
||||||
.appendTo($body);
|
.appendTo($body);
|
||||||
setBackground($test.find('.OxBar'), true);
|
setBackground($test.find('.OxBar'), true);
|
||||||
arr.forEach(function(test) {
|
arr.forEach(function(test) {
|
||||||
succeeded += test.success;
|
passed += test.passed;
|
||||||
failed += !test.success;
|
failed += !test.passed;
|
||||||
$tests.html(
|
$tests.html(
|
||||||
(succeeded + failed) + ' tests, '
|
(passed + failed) + ' tests, '
|
||||||
+ succeeded + ' succeeded, ' + failed + ' failed'
|
+ passed + ' passed, ' + failed + ' failed'
|
||||||
);
|
);
|
||||||
if (!test.success) {
|
if (!test.passed) {
|
||||||
setBackground($tests, false);
|
setBackground($tests, false);
|
||||||
setBackground($test.find('.OxBar'), false);
|
setBackground($test.find('.OxBar'), false);
|
||||||
}
|
}
|
||||||
Ox.Element()
|
Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
padding: '2px 0 2px 4px',
|
padding: '2px 0 2px 4px',
|
||||||
background: 'rgb(' + colors[+test.success][2] + ')'
|
background: 'rgb(' + colors[+test.passed][2] + ')'
|
||||||
})
|
})
|
||||||
.html(
|
.html(
|
||||||
'<span style="font-family: Monaco">'
|
'<span style="font-family: Monaco">'
|
||||||
+ Ox.encodeHTML(test.statement) + ' '
|
+ Ox.encodeHTML(test.statement) + ' '
|
||||||
+ (test.success ? '=' : '!') + '=> '
|
+ (test.passed ? '=' : '!') + '=> '
|
||||||
+ Ox.encodeHTML(test.expected)
|
+ Ox.encodeHTML(test.expected)
|
||||||
+ (test.success ? '' : ' ==> ' + Ox.encodeHTML(test.actual))
|
+ (test.passed ? '' : ' ==> ' + Ox.encodeHTML(test.actual))
|
||||||
+ '</tt>'
|
+ '</tt>'
|
||||||
)
|
)
|
||||||
.appendTo($test.$content);
|
.appendTo($test.$content);
|
||||||
|
|
@ -82,88 +81,15 @@ Ox.load('UI', function() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
/*
|
|
||||||
$.get(script, function(data) {
|
|
||||||
Ox.print(script, Ox)
|
|
||||||
new Ox.Bar({size: 17})
|
|
||||||
.css({padding: '3px 0 0 8px'})
|
|
||||||
.html(Ox.basename(script))
|
|
||||||
.appendTo($body);
|
|
||||||
lines = data.split('\n');
|
|
||||||
$.each(lines, function(l, line) {
|
|
||||||
if (line.indexOf('/*') > -1 && lines[l + 1].indexOf('====') > -1) {
|
|
||||||
new Ox.Bar({size: 17})
|
|
||||||
.css({padding: '3px 0 0 24px'})
|
|
||||||
.html($.trim(lines[l + 2]))
|
|
||||||
.appendTo($body);
|
|
||||||
//setBackground(x, 2)
|
|
||||||
}
|
|
||||||
spaces = line.indexOf('>>> ');
|
|
||||||
if (spaces > -1) {
|
|
||||||
command = $.trim(line).substr(4).split(' // ')[0];
|
|
||||||
fn = command.match(/Ox\.\w+/g);
|
|
||||||
Ox.print('fn', fn)
|
|
||||||
//Ox.print(lines[l + 1].substr(spaces, lines[l + 1].length), eval(lines[l + 1].substr(spaces, lines[l + 1].length)))
|
|
||||||
Ox.print(lines[l + 1].substr(spaces, lines[l + 1].length));
|
|
||||||
expected = eval(lines[l + 1].substr(spaces, lines[l + 1].length));
|
|
||||||
// fixme: if object, recursively check identity
|
|
||||||
result = eval(command);
|
|
||||||
if (fn) {
|
|
||||||
fn = fn[fn.length - 1];
|
|
||||||
success = typeof expected == 'object' ?
|
|
||||||
expected.toString() == result.toString() : expected === result;
|
|
||||||
Ox.print('command:', command, 'expected:', expected, 'result:', result)
|
|
||||||
success = Ox.isEqual(expected, result);
|
|
||||||
succeeded += success;
|
|
||||||
failed += !success;
|
|
||||||
$tests.html((succeeded + failed) + ' tests, ' +
|
|
||||||
succeeded + ' succeeded, ' + failed + ' failed');
|
|
||||||
if (!success) {
|
|
||||||
setBackground($tests, success);
|
|
||||||
}
|
|
||||||
if ($.inArray(fn, fns) == -1) {
|
|
||||||
fns.push(fn);
|
|
||||||
$test = Ox.CollapsePanel({
|
|
||||||
collapsed: true,
|
|
||||||
title: fn + '()'
|
|
||||||
})
|
|
||||||
.appendTo($body);
|
|
||||||
setBackground($test.find('.OxBar'), true);
|
|
||||||
}
|
|
||||||
new Ox.Bar({size:17}) // fixme: Ox.Object() used to work
|
|
||||||
.css({
|
|
||||||
//padding: '2px 0 2px 8px',
|
|
||||||
background: 'rgb(' + colors[+success][2] + ')'
|
|
||||||
})
|
|
||||||
.html(
|
|
||||||
Ox.basename(script) + ', line ' + l + ': <span style="font-weight: bold">' +
|
|
||||||
Ox.encodeHTML(command).replace(replace[0], replace[1]) + ' ' +
|
|
||||||
(success ? '=' : '!') + '=> ' + Ox.encodeHTML(JSON.stringify(expected)) +
|
|
||||||
(success ? '' : ' ==> ' + Ox.encodeHTML(JSON.stringify(result))) + '</span>'
|
|
||||||
)
|
|
||||||
.appendTo($test.$content);
|
|
||||||
$test.$content
|
|
||||||
.css({
|
|
||||||
marginTop: -$test.$content.height() + 'px'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
replace = command.split(' = ')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, 'html');
|
|
||||||
*/
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//});
|
function setBackground($element, passed) {
|
||||||
|
|
||||||
function setBackground($element, success) {
|
|
||||||
['-moz-linear-gradient', '-webkit-linear-gradient'].forEach(function(v) {
|
['-moz-linear-gradient', '-webkit-linear-gradient'].forEach(function(v) {
|
||||||
$element.css({
|
$element.css({
|
||||||
background: v + '(top, rgb(' +
|
background: v + '(top, rgb(' +
|
||||||
colors[+success][0] + '), rgb(' +
|
colors[+passed][0] + '), rgb(' +
|
||||||
colors[+success][1] + '))'
|
colors[+passed][1] + '))'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue