oxjs/source/UI/js/Code/ExamplePage.js

226 lines
6.5 KiB
JavaScript
Raw Normal View History

'use strict'
2012-05-21 10:38:18 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.ExamplePage <f> Example Page
2012-05-21 10:38:18 +00:00
options <o> Options
self <o> Shared private variable
([options[, self]]) -> <o:Ox.SplitPanel> Example Page
change <!> Change event
close <!> Close event
2012-05-21 10:38:18 +00:00
@*/
Ox.ExamplePage = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
html: '',
js: '',
references: [],
replaceCode: [],
replaceComment: [],
selected: 'source',
title: ''
})
.options(options || {})
.update({
selected: function() {
self.$tabs.options({value: self.options.selected});
}
});
self.$toolbar = Ox.Bar({size: 24});
self.$homeButton = Ox.Button({
title: 'home',
2013-05-09 13:03:33 +00:00
tooltip: Ox._('Home'),
type: 'image'
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.bindEvent({
click: function() {
that.triggerEvent('close');
}
})
.appendTo(self.$toolbar)
self.$title = Ox.Label({
2012-04-05 15:32:19 +00:00
style: 'square',
2012-04-15 18:15:14 +00:00
title: self.options.title
})
.css({float: 'left', borderRadius: '4px', margin: '4px 2px 4px 2px'})
.appendTo(self.$toolbar);
self.$openButton = Ox.Button({
disabled: self.options.selected == 'source',
title: 'open',
2013-05-09 13:03:33 +00:00
tooltip: Ox._('Open in New Tab'),
type: 'image'
})
.css({float: 'right', margin: '4px 4px 4px 2px'})
.bindEvent({
click: function() {
window.open(self.options.html);
}
})
.appendTo(self.$toolbar);
self.$reloadButton = Ox.Button({
disabled: self.options.selected == 'source',
title: 'redo',
2013-05-09 13:03:33 +00:00
tooltip: Ox._('Reload'),
type: 'image'
})
.css({float: 'right', margin: '4px 2px 4px 2px'})
.bindEvent({
click: function() {
self.$frame.attr({src: self.options.html});
}
})
.appendTo(self.$toolbar);
self.$switchButton = Ox.Button({
disabled: self.options.selected == 'source',
title: 'switch',
2013-05-09 13:03:33 +00:00
tooltip: Ox._('Switch Theme'),
type: 'image'
})
.css({float: 'right', margin: '4px 2px 4px 2px'})
.bindEvent({
click: function() {
self.$frame[0].contentWindow.postMessage(
'Ox && Ox.Theme && Ox.Theme('
2013-02-10 11:46:04 +00:00
+ 'Ox.Theme() == "oxlight" ? "oxmedium"'
+ ' : Ox.Theme() == "oxmedium" ? "oxdark"'
+ ' : "oxlight"'
+ ')',
'*'
);
}
})
.appendTo(self.$toolbar);
self.$tabs = Ox.ButtonGroup({
buttons: [
{
id: 'source',
2013-05-09 13:03:33 +00:00
title: Ox._('View Source'),
width: 80
},
{
id: 'live',
2013-05-09 13:03:33 +00:00
title: Ox._('View Live'),
width: 80
}
],
selectable: true,
value: self.options.selected
})
2012-04-05 15:32:19 +00:00
.css({float: 'right', margin: '4px 2px 4px 2px'})
.bindEvent({
change: function(data) {
var disabled = data.value == 'source';
self.options.selected = data.value;
self.hasUI && self.$switchButton.options({disabled: disabled});
self.$reloadButton.options({disabled: disabled});
self.$openButton.options({disabled: disabled});
self.$content.animate({
marginLeft: self.options.selected == 'source'
? 0 : -self.options.width + 'px'
}, 250, function() {
if (
self.options.selected == 'live'
&& !self.$frame.attr('src')
) {
self.$frame.attr({src: self.options.html});
}
});
that.triggerEvent('change', data);
}
})
.appendTo(self.$toolbar);
self.$viewer = Ox.SourceViewer({
file: self.options.js,
replaceCode: self.options.replaceCode,
replaceComment: self.options.replaceComment
})
.css({
position: 'absolute',
left: 0,
top: 0,
width: self.options.width + 'px',
height: self.options.height - 24 + 'px'
});
self.$frame = Ox.Element('<iframe>')
.css({
position: 'absolute',
left: self.options.width + 'px',
top: 0,
border: 0
})
.attr({
width: self.options.width,
height: self.options.height
});
self.$content = Ox.Element()
.css({
position: 'absolute',
width: self.options.width * 2 + 'px',
marginLeft: self.options.selected == 'source'
? 0 : -self.options.width + 'px'
})
.append(self.$viewer)
2012-06-23 10:50:34 +00:00
.append(self.$frame);
self.$container = Ox.Element()
2012-06-23 10:50:34 +00:00
.append(self.$content);
that.setElement(
Ox.SplitPanel({
elements: [
{element: self.$toolbar, size: 24},
{element: self.$container}
],
orientation: 'vertical'
})
.addClass('OxExamplePage')
);
Ox.get(self.options.js, function(js) {
self.hasUI = /Ox\.load\(.+UI.+,/.test(js);
!self.hasUI && self.$switchButton.options({disabled: true});
});
2012-05-28 14:06:22 +00:00
Ox.$window.on({
resize: function() {
setSize();
}
});
setTimeout(function() {
setSize();
if (self.options.selected == 'live') {
self.$frame.attr({src: self.options.html});
}
}, 100);
function setSize() {
self.options.width = that.width();
self.options.height = that.height();
self.$content.css({
2012-05-26 15:48:19 +00:00
width: self.options.width * 2 + 'px'
})
self.$viewer.css({
width: self.options.width + 'px',
height: self.options.height - 24 + 'px'
})
self.$frame.attr({
width: self.options.width,
height: self.options.height - 24
});
}
return that;
};