add Ox.ArrayEditable

This commit is contained in:
rolux 2012-01-03 15:55:15 +05:30
parent 39f9e9bb4d
commit 7d3f72ecc9
5 changed files with 226 additions and 1 deletions

View file

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

View file

@ -94,4 +94,107 @@ Ox.load('UI', {debug: true}, function() {
}) })
.appendTo($div); .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();
}
}); });

View file

@ -621,6 +621,17 @@ textarea.OxSquare {
border-radius: 0; border-radius: 0;
} }
/*
--------------------------------------------------------------------------------
OxArrayEditable
--------------------------------------------------------------------------------
*/
.OxArrayEditable {
display: table-cell;
padding: 4px;
}
/* /*
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
OxButton OxButton

View file

@ -0,0 +1,109 @@
'use strict';
/*@
Ox.ArrayEditable <f> Array Editable Object
@*/
Ox.ArrayEditable = function(options, self) {
self = self || {};
var that = Ox.Element(options.editable === false ? {} : {
tooltip: 'Doubleclick to add ' + (options.itemName : 'item')
})
.defaults({
editable: true,
itemName: 'item',
items: [],
position: -1,
selected: -1,
width: 256
})
.options(options || {})
.addClass('OxArrayEditable')
.css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
.bindEvent({
doubleclick: doubleclick
});
self.$items = [];
self.values = [];
function doubleclick(e) {
var $target = $(e.target);
if ($target.is('.OxEditable')) {
that.editItem($target.data('position'));
} else {
that.addItem(position == -1 ? self.options.items.length : position);
}
}
function renderItems() {
that.empty();
self.options.items.forEach(function(item, i) {
self.values[i] = item.value;
i && $('<div>')
.css({float: 'left'})
.html(',&nbsp;')
.appendTo(that);
self.$items[i] = Ox.Editable({
editable: item.editable,
format: function(value) {
return value || '&nbsp;'
},
tooltip: 'Click to select' + (
item.editable ? ', doubleclick to edit' : ''
),
value: item.value
})
.css({float: 'left'})
.data({position: i})
.bindEvent({
anyclick: function() {
that.find('.OxSelected').removeClass('.OxSelected');
self.$items[i].addClass('OxSelected');
},
cancel: function(data) {
},
submit: function(data) {
submit(position, data.value);
}
})
.appendTo(that);
});
}
function submit(position, value) {
if (value === '') {
self.values.splice(position, 1);
} else {
Array.prototype.splice.apply(self.values, Ox.merge(
[position, 1],
value.split(',').map(function(v) {
return v.trim();
})
));
}
renderItems();
}
that.addItem = function(position) {
self.values = Ox.filter(values, function(value) {
return value;
});
self.values.push('');
renderItems();
Ox.last(self.$items).triggerEvent('doubleclick');
};
that.editItem = function(position) {
};
that.removeItem = function(position) {
};
return that;
};

View file

@ -70,6 +70,7 @@ Ox.Editable = function(options, self) {
self.$input.value(formatInputValue()).hide(); self.$input.value(formatInputValue()).hide();
self.$test.html(formatTestValue()); self.$test.html(formatTestValue());
self.$value.html(formatValue()).show(); self.$value.html(formatValue()).show();
that.triggerEvent('cancel', {value: self.options.value});
} }
function change(event) { function change(event) {
@ -156,7 +157,7 @@ Ox.Editable = function(options, self) {
} }
// fixme: why can't this be chained? // fixme: why can't this be chained?
setTimeout(function() { setTimeout(function() {
self.$input.focusInput(false); self.$input.focusInput(true);
}, 0); }, 0);
that.$tooltip && that.$tooltip.options({title: ''}); that.$tooltip && that.$tooltip.options({title: ''});
that.triggerEvent('edit', {editing: true}); that.triggerEvent('edit', {editing: true});