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

some work on Ox.Editable

Browse source
This commit is contained in:
rlx 2011-10-24 15:58:51 +00:00
commit a58dc765d9
7 changed files with 58 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
demos/editable/index.html
View file

@ -3,7 +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"/>
<script type="text/javascript" src="../../build/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>
<body> <body>

15
demos/editable/js/editable.js
View file

@ -2,21 +2,6 @@ Ox.load('UI', {debug: true}, function() {
var $box = Ox.Element() var $box = Ox.Element()
.css({width: '512px', height: '512px', margin: '8px'}) .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); .appendTo(Ox.UI.$body);
/* /*

15
source/Ox.UI/css/Ox.UI.css
View file

@ -711,21 +711,22 @@ input.OxInput {
OxEditable OxEditable
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
*/ */
// clashes with editable text list cell
._OxEditable > .OxValue { .OxEditableElement > .OxValue {
cursor: pointer; cursor: pointer;
padding: 0 0 0 1px; padding: 0 0 0 1px;
} }
._OxEditable div.OxInput { .OxEditableElement div.OxInput {
height: 14px; //height: 12px;
padding: 0 1px 0 0; padding: 0 1px 0 0;
margin-bottom: -3px;
} }
._OxEditable input.OxInput { .OxEditableElement input.OxInput {
height: 14px; //height: 12px;
padding: 0 1px 0 0; padding: 0 1px 0 0;
border: 0; border: 0;
} }
._OxEditable textarea.OxInput { .OxEditableElement textarea.OxInput {
padding: 0 0 0 1px; padding: 0 0 0 1px;
border: 0; border: 0;
} }

1
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -262,6 +262,7 @@ Ox.Element = function(options, self) {
// self.setOptions(key, value) // self.setOptions(key, value)
// is called when an option changes // is called when an option changes
// (to be implemented by widget) // (to be implemented by widget)
// FIXME: can't set tooltip options this way
}; };
that._self = self; // fixme: remove that._self = self; // fixme: remove

47
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -13,18 +13,36 @@ Ox.Editable <f> Editable element
Ox.Editable = function(options, self) { Ox.Editable = function(options, self) {
self = self || {}; self = self || {};
that = Ox.Element('<div>', self) var that = Ox.Element({
element: '<div>',
tooltip: options.tooltip
}, self)
.defaults({ .defaults({
clickLink: function(e) {
document.location.href = $(e.target).attr('href');
},
editable: true,
editing: false, editing: false,
format: null, format: null,
tooltip: '',
value: '', value: '',
width: 256, width: 256,
type: 'input' type: 'input'
}) })
.options(options || {}) .options(options || {})
.addClass('OxEditable') .addClass('OxEditableElement')
.bind({
click: function(e) {
if ($(e.target).is('a')) {
return false;
}
}
})
.bindEvent({ .bindEvent({
doubleclick: edit doubleclick: edit,
singleclick: function(e) {
$(e.target).is('a') && self.options.clickLink(e);
}
}); });
self.options.value = self.options.value.toString(); self.options.value = self.options.value.toString();
@ -48,13 +66,13 @@ Ox.Editable = function(options, self) {
.appendTo(that); .appendTo(that);
self.$test = self.$value.$element.clone() self.$test = self.$value.$element.clone()
.html(self.options.value.replace(/ /g, '&nbsp;'))
.css({ .css({
display: 'table-cell', display: 'inline-block',
//position: 'absolute', //position: 'absolute',
//left: 200, //left: 200,
//top: 200 //top: 200
}) })
.html(self.options.value.replace(/ /g, '&nbsp;'))
.hide() .hide()
.appendTo(that.$element); .appendTo(that.$element);
@ -66,6 +84,7 @@ Ox.Editable = function(options, self) {
}, self.options.type == 'textarea' ? { }, self.options.type == 'textarea' ? {
width: self.options.width width: self.options.width
} : {})) } : {}))
.css({display: 'none'})
.bindEvent({ .bindEvent({
blur: submit, blur: submit,
cancel: cancel, cancel: cancel,
@ -97,8 +116,9 @@ Ox.Editable = function(options, self) {
); );
self.$test.html(self.options.value.replace(/ /g, '&nbsp;')); self.$test.html(self.options.value.replace(/ /g, '&nbsp;'));
height = self.$test.height(); height = self.$test.height();
height = Math.max(self.$test.height(), 14); //height = Math.max(self.$test.height(), 14);
width = Math.max(self.$test.width() + 2, 8); width = Math.max(self.$test.width() + 2, 8);
width = Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth)
Ox.print('wxh', width, height) Ox.print('wxh', width, height)
if (self.options.type == 'input') { if (self.options.type == 'input') {
self.$input.options({ self.$input.options({
@ -127,16 +147,24 @@ Ox.Editable = function(options, self) {
function edit() { function edit() {
var height, width; var height, width;
if (!self.options.editing) { if (self.options.editable && !self.options.editing) {
self.minWidth = 8
self.maxWidth = that.parent().width();
Ox.print('MAX WIDTH', self.maxWidth);
height = self.$value.height(); height = self.$value.height();
width = self.$value.width(); width = self.$value.width();
self.$value.hide(); self.$value.hide();
//self.$test.show();
Ox.print('HEIGHT', height)
self.$input.options({ self.$input.options({
height: height, height: height,
width: width width: width
}).show(); }).show();
if (self.options.type == 'input') { if (self.options.type == 'input') {
self.$input.find('input').css({width: width + 'px'}); self.$input.find('input').css({
height: height + 'px',
width: width + 'px'
});
} else { } else {
self.$input.find('textarea').css({ self.$input.find('textarea').css({
height: height + 'px', height: height + 'px',
@ -174,7 +202,8 @@ Ox.Editable = function(options, self) {
that.css = function(obj) { that.css = function(obj) {
that.$element.css(obj); that.$element.css(obj);
self.$value.css(obj); self.$value.css(obj);
self.$input.css(obj); self.$test.css(obj).hide();
self.$input.css(obj).hide();
self.$input.find('input').css(obj); self.$input.find('input').css(obj);
//self.$value.css.apply(this, arguments); //self.$value.css.apply(this, arguments);
//self.$input.css.apply(this, arguments); //self.$input.css.apply(this, arguments);

5
source/Ox.UI/themes/classic/css/classic.css
View file

@ -723,3 +723,8 @@ Miscellaneous
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
.OxThemeClassic ::selection {
background: rgb(192, 192, 192);
//color: rgb(255, 255, 255);
}

6
source/Ox.UI/themes/modern/css/modern.css
View file

@ -736,7 +736,6 @@ Miscellaneous
background-image: -webkit-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1)); background-image: -webkit-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1));
} }
.OxThemeModern .OxTooltip { .OxThemeModern .OxTooltip {
border: 1px solid rgba(128, 128, 128, 0.96); border: 1px solid rgba(128, 128, 128, 0.96);
background: rgba(0, 0, 0, 0.96); background: rgba(0, 0, 0, 0.96);
@ -745,3 +744,8 @@ Miscellaneous
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
.OxThemeModern ::selection {
background: rgb(192, 192, 192);
//color: rgb(255, 255, 255);
}