oxjs/demos/editable/js/editable.js

112 lines
3.3 KiB
JavaScript
Raw Normal View History

2011-08-15 14:18:27 +00:00
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'],
2011-08-15 16:41:54 +00:00
runtime: '90 min',
2011-08-15 14:18:27 +00:00
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>')
2011-08-15 16:41:54 +00:00
.css({float: 'left', fontWeight: 'bold'})
2011-08-15 14:18:27 +00:00
.html((i ? '; ' : '') + Ox.toTitleCase(key) + ':&nbsp;')
)
.appendTo($div);
Ox.Editable({
format: function(value) {
2011-08-15 16:41:54 +00:00
return (value ? (
2011-08-15 14:18:27 +00:00
Ox.isArray(data[key]) ? value.split(', ').map(function(value) {
return '<a href="/?find=' + value + '">' + value + '</a>'
}).join(', ') : value
2011-08-15 16:41:54 +00:00
) : 'unknown');// + (i == 3 ? '' : ';');
2011-08-15 14:18:27 +00:00
},
value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key]
})
.css({
float: 'left'
})
.appendTo($div_);
});
2011-08-15 16:41:54 +00:00
$div = $('<div>').css({clear: 'both', marginTop: '16px', textAlign: 'justify'}).appendTo($box.$element);
2011-08-15 14:18:27 +00:00
Ox.Editable({
format: function(value) {
2011-08-15 16:41:54 +00:00
return '<span style="font-weight: bold">Keywords:</span> '
+ value.split(', ').map(function(value) {
return '<a href="/?find=' + value + '">' + value + '</a>'
}).join(', ')
2011-08-15 14:18:27 +00:00
},
type: 'textarea',
2011-08-15 16:41:54 +00:00
value: 'Sex, Crime, Car, Spoiler in Keywords, Genre in Keywords, Director Cameo, One Or More Meta Keywords',
width: 512
})
.css({
2011-08-15 14:18:27 +00:00
})
.appendTo($div);
});