138 lines
3.6 KiB
JavaScript
138 lines
3.6 KiB
JavaScript
|
'use strict'
|
||
|
|
|
||
|
|
Ox.ExamplePage = function(options, self) {
|
||
|
|
|
||
|
|
self = self || {};
|
||
|
|
var that = Ox.Element({}, self)
|
||
|
|
.defaults({
|
||
|
|
html: '',
|
||
|
|
js: '',
|
||
|
|
replace: [],
|
||
|
|
selected: 'source',
|
||
|
|
title: ''
|
||
|
|
})
|
||
|
|
.options(options || {});
|
||
|
|
|
||
|
|
self.$toolbar = Ox.Bar({size: 24});
|
||
|
|
|
||
|
|
self.$title = Ox.Label({
|
||
|
|
title: self.options.title
|
||
|
|
})
|
||
|
|
.css({float: 'left', margin: '4px'})
|
||
|
|
.appendTo(self.$toolbar)
|
||
|
|
|
||
|
|
self.$reloadButton = Ox.Button({
|
||
|
|
disabled: self.options.selected == 'source',
|
||
|
|
title: 'redo',
|
||
|
|
tooltip: 'Reload',
|
||
|
|
type: 'image'
|
||
|
|
})
|
||
|
|
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||
|
|
.bindEvent({
|
||
|
|
click: function() {
|
||
|
|
self.$frame.attr({src: self.options.html});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.appendTo(self.$toolbar);
|
||
|
|
|
||
|
|
self.$tabs = Ox.ButtonGroup({
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
id: 'source',
|
||
|
|
title: 'View Source'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'live',
|
||
|
|
title: 'View Live'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
selectable: true,
|
||
|
|
value: self.options.selected
|
||
|
|
})
|
||
|
|
.css({float: 'right', margin: '4px 2px 4px 4px'})
|
||
|
|
.bindEvent({
|
||
|
|
change: function(data) {
|
||
|
|
self.options.selected = data.value;
|
||
|
|
self.$reloadButton.options({disabled: data.value == 'source'});
|
||
|
|
self.$content.animate({
|
||
|
|
marginLeft: data.value == 'source'
|
||
|
|
? 0 : -self.options.width + 'px'
|
||
|
|
}, 250, function() {
|
||
|
|
if (data.value == 'live' && !self.$frame.attr('src')) {
|
||
|
|
self.$frame.attr({src: self.options.html});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.appendTo(self.$toolbar);
|
||
|
|
|
||
|
|
self.$viewer = Ox.SourceViewer({
|
||
|
|
file: self.options.js,
|
||
|
|
replace: self.options.replace
|
||
|
|
})
|
||
|
|
.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'
|
||
|
|
})
|
||
|
|
.append(self.$viewer)
|
||
|
|
.append(self.$frame)
|
||
|
|
self.$container = Ox.Element()
|
||
|
|
.append(self.$content)
|
||
|
|
|
||
|
|
that.setElement(
|
||
|
|
Ox.SplitPanel({
|
||
|
|
elements: [
|
||
|
|
{element: self.$toolbar, size: 24},
|
||
|
|
{element: self.$container}
|
||
|
|
],
|
||
|
|
orientation: 'vertical'
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
Ox.$window.bind({
|
||
|
|
resize: function() {
|
||
|
|
setSize();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
setTimeout(setSize, 100);
|
||
|
|
|
||
|
|
function setSize() {
|
||
|
|
self.options.width = that.width();
|
||
|
|
self.options.height = that.height();
|
||
|
|
self.$content.css({
|
||
|
|
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;
|
||
|
|
|
||
|
|
};
|