108 lines
3 KiB
JavaScript
108 lines
3 KiB
JavaScript
|
Ox.load('UI', {debug: true}, function() {
|
||
|
|
||
|
var $box = Ox.Element()
|
||
|
.css({width: '512px', height: '512px', margin: '8px'})
|
||
|
.bind({
|
||
|
click: function(e) {
|
||
|
if ($(e.target).is('a')) {
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
.bindEvent({
|
||
|
singleclick: function(e) {
|
||
|
var $target = $(e.target);
|
||
|
if ($target.is('a')) {
|
||
|
Ox.print('href=' + $target.attr('href'));
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
.appendTo(Ox.UI.$body);
|
||
|
|
||
|
/*
|
||
|
$container.append(
|
||
|
Ox.Input({
|
||
|
height: 64,
|
||
|
style: 'square',
|
||
|
type: 'textarea',
|
||
|
width: 256
|
||
|
})
|
||
|
);
|
||
|
$container.append($('<br>'))
|
||
|
*/
|
||
|
|
||
|
var data = {
|
||
|
country: ['France'],
|
||
|
director: ['Jean-Luc Godard'],
|
||
|
language: ['French', 'English'],
|
||
|
runtime: 5400,
|
||
|
title: 'Deux ou trois choses que je sais d\'elle',
|
||
|
year: '1967'
|
||
|
};
|
||
|
|
||
|
Ox.Editable({
|
||
|
value: data.title
|
||
|
})
|
||
|
.css({
|
||
|
height: '16px',
|
||
|
fontWeight: 'bold',
|
||
|
fontSize: '13px'
|
||
|
})
|
||
|
.appendTo($box);
|
||
|
|
||
|
Ox.Editable({
|
||
|
format: function(value) {
|
||
|
return value ? value.split(', ').map(function(value) {
|
||
|
return '<a href="/?find=' + value + '">' + value + '</a>'
|
||
|
}).join(', ') : 'Unknown Director'
|
||
|
},
|
||
|
value: data.director.join(', ')
|
||
|
})
|
||
|
.css({
|
||
|
height: '16px',
|
||
|
fontWeight: 'bold',
|
||
|
fontSize: '13px'
|
||
|
})
|
||
|
.appendTo($box);
|
||
|
|
||
|
var $div = $('<div>').appendTo($box.$element);
|
||
|
|
||
|
['country', 'year', 'language', 'runtime'].forEach(function(key, i) {
|
||
|
var $div_ = $('<div>')
|
||
|
.css({float: 'left', margin: '1px 0 0 1px'})
|
||
|
.append(
|
||
|
$('<div>')
|
||
|
.css({float: 'left'})
|
||
|
.html((i ? '; ' : '') + Ox.toTitleCase(key) + ': ')
|
||
|
)
|
||
|
.appendTo($div);
|
||
|
Ox.Editable({
|
||
|
format: function(value) {
|
||
|
return value ? (
|
||
|
Ox.isArray(data[key]) ? value.split(', ').map(function(value) {
|
||
|
return '<a href="/?find=' + value + '">' + value + '</a>'
|
||
|
}).join(', ') : value
|
||
|
) : 'unknown';
|
||
|
},
|
||
|
value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key]
|
||
|
})
|
||
|
.css({
|
||
|
float: 'left'
|
||
|
})
|
||
|
.appendTo($div_);
|
||
|
});
|
||
|
|
||
|
$div = $('<div>')
|
||
|
.css({clear: 'both'})
|
||
|
.appendTo($box.$element);
|
||
|
|
||
|
Ox.Editable({
|
||
|
format: function(value) {
|
||
|
return value ? Ox.parseHTML(value) : 'No description'
|
||
|
},
|
||
|
type: 'textarea',
|
||
|
value: 'foo bar\nfoo bar'
|
||
|
})
|
||
|
.appendTo($div);
|
||
|
|
||
|
});
|