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>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -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(', ')
|
||||||
|
.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;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
OxArrayEditable
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.OxArrayEditable {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
--------------------------------------------------------------------------------
|
--------------------------------------------------------------------------------
|
||||||
OxButton
|
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.$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});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue