0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

add Ox.ArrayEditable

Browse source
This commit is contained in:
rolux 2012-01-03 15:55:15 +05:30
commit 7d3f72ecc9
5 changed files with 226 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
demos/editable/index.html
View file

@ -3,6 +3,7 @@
<head>
<title>OxJS Editable Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/editable.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/editable.js"></script>
</head>

103
demos/editable/js/editable.js
View file

@ -94,4 +94,107 @@ Ox.load('UI', {debug: true}, function() {
})
.appendTo($div);
var $bar = Ox.Bar({
size: 16
})
.css({
width: '256px',
marginTop: '4px'
})
.appendTo($box.$element);
var $addButton = Ox.Button({
style: 'symbol',
title: 'add',
tooltip: 'Add Keyword',
type: 'image'
})
.css({
float: 'right'
})
.bindEvent({
click: function() {
//setTimeout(function() {
values = Ox.map(values, function(value) {
return value || null;
});
values.push('');
renderEditables();
Ox.last($editables).triggerEvent('doubleclick');
//}, 25);
}
})
.appendTo($bar);
var $content = Ox.Element({
tooltip: 'Doubleclick to add keyword'
})
.addClass('content')
.css({
display: 'table-cell',
width: '246px',
padding: '4px',
border: '1px solid rgb(192, 192, 192)',
marginTop: '8px'
})
.bindEvent({
doubleclick: function(e) {
$(e.target).is('.content') && $addButton.trigger('click');
}
})
.appendTo($box.$element);
var $editables = [],
values = [
'Sex', 'Crime', 'Car', 'Spoiler in Keywords',
'Genre in Keywords', 'Director Cameo',
'One Or More Meta Keywords'
];
renderEditables();
function renderEditables() {
$content.empty();
Ox.print('VALUES:', values)
values.forEach(function(value, i) {
i && $('<div>')
.css({float: 'left'})
.html(',&nbsp;')
.appendTo($content);
$editables[i] = Ox.Editable({
format: function(value) {
return value
? value //'<a href="/?find=' + value + '">' + value + '</a>'
: '&nbsp;';
},
tooltip: 'Click to select, doubleclick to edit',
value: value
})
.css({float: 'left'})
//.data({position: i})
.bindEvent({
anyclick: function() {
$('.selected').removeClass('selected');
$editables[i].addClass('selected');
},
cancel: function(data) {
submit(i, data.value);
},
submit: function(data) {
submit(i, data.value);
}
})
.appendTo($content);
});
}
function submit(i, value) {
Ox.print('submit:', value)
if (value === '') {
values.splice(i, 1);
} else {
Array.prototype.splice.apply(values, Ox.merge(
[i, 1],
value.split(',').map(function(v) {
return v.trim();
})
));
}
renderEditables();
}
});