add Ox.ArrayEditable
This commit is contained in:
rolux
parent
39f9e9bb4d
commit
7d3f72ecc9
5 changed files with 226 additions and 1 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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(', ')
|
||||
.appendTo($content);
|
||||
$editables[i] = Ox.Editable({
|
||||
format: function(value) {
|
||||
return value
|
||||
? value //'<a href="/?find=' + value + '">' + value + '</a>'
|
||||
: ' ';
|
||||
},
|
||||
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();
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -621,6 +621,17 @@ textarea.OxSquare {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxArrayEditable
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.OxArrayEditable {
|
||||
display: table-cell;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxButton
|
||||
|
|
|
|||
109
source/Ox.UI/js/Form/Ox.ArrayEditable.js
Normal file
109
source/Ox.UI/js/Form/Ox.ArrayEditable.js
Normal 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(', ')
|
||||
.appendTo(that);
|
||||
self.$items[i] = Ox.Editable({
|
||||
editable: item.editable,
|
||||
format: function(value) {
|
||||
return value || ' '
|
||||
},
|
||||
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;
|
||||
|
||||
};
|
||||
|
|
@ -70,6 +70,7 @@ Ox.Editable = function(options, self) {
|
|||
self.$input.value(formatInputValue()).hide();
|
||||
self.$test.html(formatTestValue());
|
||||
self.$value.html(formatValue()).show();
|
||||
that.triggerEvent('cancel', {value: self.options.value});
|
||||
}
|
||||
|
||||
function change(event) {
|
||||
|
|
@ -156,7 +157,7 @@ Ox.Editable = function(options, self) {
|
|||
}
|
||||
// fixme: why can't this be chained?
|
||||
setTimeout(function() {
|
||||
self.$input.focusInput(false);
|
||||
self.$input.focusInput(true);
|
||||
}, 0);
|
||||
that.$tooltip && that.$tooltip.options({title: ''});
|
||||
that.triggerEvent('edit', {editing: true});
|
||||
|
|
|
|||
Loading…
Reference in a new issue