ExamplePanel/ExamplePage: add mode/selected option ('source' or 'live')
This commit is contained in:
rolux
parent
d70b996472
commit
01717f3727
2 changed files with 47 additions and 30 deletions
|
|
@ -5,6 +5,8 @@ Ox.ExamplePage <f> Example Page
|
|||
options <o> Options
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.SplitPanel> Example Page
|
||||
change <!> Change event
|
||||
close <!> Close event
|
||||
@*/
|
||||
|
||||
Ox.ExamplePage = function(options, self) {
|
||||
|
|
@ -20,7 +22,12 @@ Ox.ExamplePage = function(options, self) {
|
|||
selected: 'source',
|
||||
title: ''
|
||||
})
|
||||
.options(options || {});
|
||||
.options(options || {})
|
||||
.update({
|
||||
selected: function() {
|
||||
self.$tabs.options({value: self.options.selected});
|
||||
}
|
||||
});
|
||||
|
||||
self.$toolbar = Ox.Bar({size: 24});
|
||||
|
||||
|
|
@ -116,37 +123,21 @@ Ox.ExamplePage = function(options, self) {
|
|||
self.$reloadButton.options({disabled: disabled});
|
||||
self.$openButton.options({disabled: disabled});
|
||||
self.$content.animate({
|
||||
marginLeft: data.value == 'source'
|
||||
marginLeft: self.options.selected == 'source'
|
||||
? 0 : -self.options.width + 'px'
|
||||
}, 250, function() {
|
||||
if (data.value == 'live' && !self.$frame.attr('src')) {
|
||||
if (
|
||||
self.options.selected == 'live'
|
||||
&& !self.$frame.attr('src')
|
||||
) {
|
||||
self.$frame.attr({src: self.options.html});
|
||||
}
|
||||
});
|
||||
that.triggerEvent('change', data);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
/*
|
||||
self.$referencesMenu = Ox.MenuButton({
|
||||
items: self.options.references.map(function(reference) {
|
||||
return {id: reference, title: reference};
|
||||
}),
|
||||
//title: 'Documentation',
|
||||
//width: 128
|
||||
title: 'select',
|
||||
tooltip: 'References',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px 2px 4px 2px'})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
that.triggerEvent('doc', {id: data.id});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
*/
|
||||
|
||||
self.$viewer = Ox.SourceViewer({
|
||||
file: self.options.js,
|
||||
replaceCode: self.options.replaceCode,
|
||||
|
|
@ -173,7 +164,9 @@ Ox.ExamplePage = function(options, self) {
|
|||
self.$content = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
width: self.options.width * 2 + 'px'
|
||||
width: self.options.width * 2 + 'px',
|
||||
marginLeft: self.options.selected == 'source'
|
||||
? 0 : -self.options.width + 'px'
|
||||
})
|
||||
.append(self.$viewer)
|
||||
.append(self.$frame);
|
||||
|
|
@ -202,7 +195,12 @@ Ox.ExamplePage = function(options, self) {
|
|||
}
|
||||
});
|
||||
|
||||
setTimeout(setSize, 100);
|
||||
setTimeout(function() {
|
||||
setSize();
|
||||
if (self.options.selected == 'live') {
|
||||
self.$frame.attr({src: self.options.html});
|
||||
}
|
||||
}, 100);
|
||||
|
||||
function setSize() {
|
||||
self.options.width = that.width();
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@ Ox.ExamplePanel <f> Example Panel
|
|||
options <o> Options
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.SplitPanel> Example Panel
|
||||
load <!> load
|
||||
select <!> select
|
||||
change <!> Change event
|
||||
value <s> 'source' or 'live'
|
||||
load <!> Load event
|
||||
select <!> Select event
|
||||
id <s> selected example
|
||||
@*/
|
||||
|
||||
|
|
@ -17,6 +19,7 @@ Ox.ExamplePanel = function(options, self) {
|
|||
.defaults({
|
||||
element: '',
|
||||
examples: [],
|
||||
mode: 'source',
|
||||
path: '',
|
||||
references: null,
|
||||
replaceCode: [],
|
||||
|
|
@ -26,7 +29,15 @@ Ox.ExamplePanel = function(options, self) {
|
|||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
mode: function() {
|
||||
Ox.print('mode handler', self.options.selected)
|
||||
if (self.options.selected) {
|
||||
self.$page.options({selected: self.options.mode});
|
||||
}
|
||||
},
|
||||
selected: function() {
|
||||
Ox.print('selected handler');
|
||||
self.options.mode = 'source';
|
||||
selectItem(self.options.selected);
|
||||
}
|
||||
});
|
||||
|
|
@ -74,6 +85,7 @@ Ox.ExamplePanel = function(options, self) {
|
|||
.bindEvent({
|
||||
select: function(data) {
|
||||
if (!data.ids[0] || !Ox.endsWith(data.ids[0], '/')) {
|
||||
self.options.mode = 'source';
|
||||
selectItem(
|
||||
data.ids[0] ? data.ids[0].split('/').pop() : ''
|
||||
);
|
||||
|
|
@ -82,7 +94,7 @@ Ox.ExamplePanel = function(options, self) {
|
|||
});
|
||||
self.$panel.replaceElement(0, self.$list);
|
||||
selectItem(self.options.selected);
|
||||
that.triggerEvent('load', {});
|
||||
that.triggerEvent('load', {items: self.items});
|
||||
});
|
||||
|
||||
function getItemByName(name) {
|
||||
|
|
@ -127,7 +139,8 @@ Ox.ExamplePanel = function(options, self) {
|
|||
}
|
||||
|
||||
function selectItem(id) {
|
||||
var item = id ? getItemByName(id) : null;
|
||||
var item = id ? getItemByName(id) : null,
|
||||
selected = self.options.selected;
|
||||
if (item) {
|
||||
self.options.selected = id;
|
||||
self.$list.options({selected: [item.section + '/' + id]});
|
||||
|
|
@ -138,10 +151,14 @@ Ox.ExamplePanel = function(options, self) {
|
|||
references: item.references,
|
||||
replaceCode: self.options.replaceCode,
|
||||
replaceComment: self.options.replaceComment,
|
||||
selected: self.options.mode,
|
||||
title: item.title,
|
||||
width: window.innerWidth - self.options.size
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
that.triggerEvent('change', data);
|
||||
},
|
||||
close: function() {
|
||||
selectItem();
|
||||
}
|
||||
|
|
@ -152,8 +169,10 @@ Ox.ExamplePanel = function(options, self) {
|
|||
self.$list.options({selected: []});
|
||||
self.$page.empty().append(self.options.element);
|
||||
}
|
||||
if (self.options.selected != selected) {
|
||||
that.triggerEvent('select', {id: self.options.selected});
|
||||
}
|
||||
}
|
||||
|
||||
function sortById(a, b) {
|
||||
return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue