simpler text list column head elements, better column drag
This commit is contained in:
rlx
parent
7bf42e5b0b
commit
0ba258281f
12 changed files with 461 additions and 330 deletions
|
|
@ -9,7 +9,9 @@ Ox.load('Image', function() {
|
|||
'Method...', 'blur(1)', 'blur(5)',
|
||||
'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")',
|
||||
'channel("h")', 'channel("s")', 'channel("l")',
|
||||
'contour()', 'depth(1)', 'depth(4)', 'edges()', 'emboss()',
|
||||
'contour()',
|
||||
'depth(1)', 'depth(2)', 'depth(4)',
|
||||
'edges()', 'emboss()',
|
||||
'encode("secret")', 'decode()',
|
||||
'encode("secret", false)', 'decode(false)',
|
||||
'encode("secret", 1)', 'decode(1)',
|
||||
|
|
@ -18,9 +20,10 @@ Ox.load('Image', function() {
|
|||
'hue(-60)', 'hue(60)',
|
||||
'invert()',
|
||||
'lightness(-0.5)', 'lightness(0.5)',
|
||||
'motionBlur()', 'posterize()',
|
||||
'mosaic(4)', 'motionBlur()', 'photocopy()', 'posterize()',
|
||||
'resize(256, 256)', 'resize(512, 512)',
|
||||
'saturation(-0.5)', 'saturation(0.5)',
|
||||
'scale(0.5, -1)',
|
||||
'sharpen()', 'solarize()',
|
||||
'src("png/Lenna.png")', 'src("png/OxJS.png")'
|
||||
].forEach(function(filter) {
|
||||
|
|
@ -41,7 +44,7 @@ Ox.load('Image', function() {
|
|||
image[fn].apply(null, Ox.merge(args, function(image) {
|
||||
Ox.element('#filter').attr({
|
||||
src: image.src()
|
||||
});
|
||||
}).css({width: '512px', height: '512px'});
|
||||
}));
|
||||
} else if (fn == 'decode') {
|
||||
image[fn].apply(null, Ox.merge(args, function(str) {
|
||||
|
|
|
|||
|
|
@ -8,19 +8,21 @@
|
|||
Ox.load('Image', function() {
|
||||
var fixmeOxelement;
|
||||
var body = Ox.element('body'),
|
||||
button = Ox.element('<input>').attr({type: 'button', value: 'encode'}).click(function() {
|
||||
button = Ox.element('<input>').attr({type: 'button', value: 'Encode'}).click(function() {
|
||||
button.attr({disabled: 'disabled'})
|
||||
if (button.attr('value') == 'encode') {
|
||||
button.attr({value: 'encoding...'});
|
||||
if (button.attr('value') == 'Encode') {
|
||||
button.attr({value: 'Encoding...'});
|
||||
encode(function(image) {
|
||||
fixmeOxelement = image;
|
||||
button.removeAttr('disabled').attr({value: 'decode'});
|
||||
button.removeAttr('disabled').attr({value: 'Decode'});
|
||||
});
|
||||
} else {
|
||||
button.attr({value: 'decoding...'});
|
||||
decode(fixmeOxelement, function() {
|
||||
button.attr({value: 'done'})
|
||||
});
|
||||
button.attr({value: 'Decoding...'});
|
||||
setTimeout(function() {
|
||||
decode(fixmeOxelement, function() {
|
||||
button.attr({value: 'Done'})
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
}).appendTo(body);
|
||||
Ox.element('<br>').appendTo(body);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ Ox.load.Image = function(options, callback) {
|
|||
|
||||
/*@
|
||||
Ox.Image <f> Generic image object
|
||||
To render the image as an image element, use its <code>src()</code>
|
||||
method, to render it as a canvas, use its <code>canvas</code> property.
|
||||
(src, callback) -> <u> undefined
|
||||
(width, height, callback) -> <u> undefined
|
||||
(width, height, background, callback) -> <u> undefined
|
||||
|
|
@ -26,7 +28,8 @@ Ox.load.Image = function(options, callback) {
|
|||
} else {
|
||||
self.width = arguments[0];
|
||||
self.height = arguments[1];
|
||||
self.background = arguments.length == 4 ? arguments[2] : [0, 0, 0, 0];
|
||||
self.background = arguments.length == 4
|
||||
? arguments[2] : [0, 0, 0, 0];
|
||||
init();
|
||||
}
|
||||
|
||||
|
|
@ -66,19 +69,21 @@ Ox.load.Image = function(options, callback) {
|
|||
self.width = self.image.width;
|
||||
self.height = self.image.height;
|
||||
}
|
||||
self.canvas = Ox.element('<canvas>').attr({
|
||||
that.canvas = Ox.element('<canvas>').attr({
|
||||
width: self.width,
|
||||
height: self.height
|
||||
});
|
||||
self.context = self.canvas[0].getContext('2d');
|
||||
that.context = that.canvas[0].getContext('2d');
|
||||
if (self.image) {
|
||||
self.context.drawImage(self.image, 0, 0);
|
||||
that.context.drawImage(self.image, 0, 0);
|
||||
} else if (Ox.sum(self.background)) {
|
||||
that.fillStyle(self.background);
|
||||
that.fillRect(0, 0, self.width, self.height);
|
||||
that.context.fillStyle(self.background);
|
||||
that.context.fillRect(0, 0, self.width, self.height);
|
||||
}
|
||||
self.imageData = self.context.getImageData(0, 0, self.width, self.height);
|
||||
self.data = self.imageData.data;
|
||||
that.imageData = that.context.getImageData(
|
||||
0, 0, self.width, self.height
|
||||
);
|
||||
self.data = that.imageData.data;
|
||||
self.callback(that);
|
||||
}
|
||||
|
||||
|
|
@ -92,6 +97,11 @@ Ox.load.Image = function(options, callback) {
|
|||
});
|
||||
}
|
||||
|
||||
/*@
|
||||
blur <f> Apply blur filter
|
||||
(val) -> <o> The image object
|
||||
val <n> Amount of blur (1 to 5, more is slow)
|
||||
@*/
|
||||
that.blur = function(val) {
|
||||
var filter = [],
|
||||
size = val * 2 + 1;
|
||||
|
|
@ -111,6 +121,13 @@ Ox.load.Image = function(options, callback) {
|
|||
return that.filter(filter);
|
||||
};
|
||||
|
||||
//@ canvas <o> Canvas object
|
||||
|
||||
/*@
|
||||
channel <f> Reduce the image to one channel
|
||||
(channel) -> <o> The image object
|
||||
channel <str> 'r', 'g', 'b', 'a', 'h', 's' or 'l'
|
||||
@*/
|
||||
that.channel = function(str) {
|
||||
str = str[0].toLowerCase();
|
||||
return that.map(function(rgba) {
|
||||
|
|
@ -134,6 +151,12 @@ Ox.load.Image = function(options, callback) {
|
|||
});
|
||||
}
|
||||
|
||||
//@ context <o> 2D drawing context
|
||||
|
||||
/*@
|
||||
contour <f> Apply contour filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.contour = function(val) {
|
||||
return that.filter([
|
||||
+1, +1, +1,
|
||||
|
|
@ -142,15 +165,24 @@ Ox.load.Image = function(options, callback) {
|
|||
]);
|
||||
};
|
||||
|
||||
/*@
|
||||
depth <f> Reduce the bit depth
|
||||
(depth) -> <o> The image object
|
||||
depth <n> Bits per channel (1 to 7)
|
||||
@*/
|
||||
that.depth = function(val) {
|
||||
var pow = Math.pow(2, 8 - val);
|
||||
return that.map(function(rgba) {
|
||||
return rgba.map(function(v, i) {
|
||||
return i < 3 ? Math.floor(v / pow) * pow : v
|
||||
return i < 3 ? Math.floor(v / pow) * pow/* * 255 / val*/ : v;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/*@
|
||||
edges <f> Apply edges filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.edges = function(val) {
|
||||
return that.filter([
|
||||
-1, -1, -1,
|
||||
|
|
@ -159,6 +191,10 @@ Ox.load.Image = function(options, callback) {
|
|||
]).saturation(-1);
|
||||
};
|
||||
|
||||
/*@
|
||||
emboss <f> Apply emboss filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.emboss = function(val) {
|
||||
return that.filter([
|
||||
-1, -1, +0,
|
||||
|
|
@ -171,8 +207,8 @@ Ox.load.Image = function(options, callback) {
|
|||
encode <f> Encodes a string into the image
|
||||
For most purposes, deflate and mode should be omitted, since the
|
||||
defaults make the existence of the message harder to detect. A valid
|
||||
use case for deflate and mode would be to encode, additionally to
|
||||
the secret string, a more easily detected decoy string: <code>
|
||||
use case for deflate and mode would be to first encode a more easily
|
||||
detected decoy string, and only then the secret string: <code>
|
||||
image.encode(decoy, false, 1, function(image) { image.encode(secret,
|
||||
-1, callback); })</code>.
|
||||
(str, callback) -> <o> The image object (unmodified)
|
||||
|
|
@ -183,7 +219,7 @@ Ox.load.Image = function(options, callback) {
|
|||
str <s> The string to be encoded
|
||||
callback <f> Callback function
|
||||
image <o> The image object (modified)
|
||||
deflate <b|true> If true, compress string with deflate
|
||||
deflate <b|true> If true, encode the string with deflate
|
||||
mode <n|0> Encoding mode
|
||||
If mode is between -7 and 0, the string will be encoded one bit
|
||||
per byte, as the number of bits within that byte set to 1,
|
||||
|
|
@ -199,6 +235,7 @@ Ox.load.Image = function(options, callback) {
|
|||
mode = Ox.isNumber(arguments[1]) ? arguments[1]
|
||||
: Ox.isNumber(arguments[2]) ? arguments[2] : 0,
|
||||
b = 0, bin,
|
||||
// Array of bits per byte to be modified (0 is LSB)
|
||||
bits = mode < 1 ? [-mode] : Ox.map(Ox.range(8), function(bit) {
|
||||
return mode & 1 << bit ? bit : null;
|
||||
}),
|
||||
|
|
@ -226,6 +263,7 @@ Ox.load.Image = function(options, callback) {
|
|||
if (rgba[3] == 255) {
|
||||
var index = getIndex(xy);
|
||||
Ox.loop(3, function(c) {
|
||||
// fixme: use: var data = that.context.imageData.data[i + c]
|
||||
var i = index + c;
|
||||
Ox.forEach(bits, function(bit) {
|
||||
if ((
|
||||
|
|
@ -245,11 +283,23 @@ Ox.load.Image = function(options, callback) {
|
|||
});
|
||||
}
|
||||
});
|
||||
self.context.putImageData(self.imageData, 0, 0);
|
||||
that.context.putImageData(that.imageData, 0, 0);
|
||||
callback(that);
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
decode <f> Decode encoded string
|
||||
(callback) -> <o> The image object (unmodified)
|
||||
(deflate, callback) -> <o> The image object (unmodified)
|
||||
(mode, callback) -> <o> The image object (unmodified)
|
||||
(deflate, mode, callback) -> <o> The image object (unmodified)
|
||||
(mode, deflate, callback) -> <o> The image object (unmodified)
|
||||
deflate <b|true> If true, decode the string with deflate
|
||||
mode <n|0> See encode method
|
||||
callback <f> Callback function
|
||||
image <o> The image object (modified)
|
||||
@*/
|
||||
that.decode = function() {
|
||||
var callback = arguments[arguments.length - 1],
|
||||
deflate = Ox.isBoolean(arguments[0]) ? arguments[0]
|
||||
|
|
@ -257,6 +307,7 @@ Ox.load.Image = function(options, callback) {
|
|||
mode = Ox.isNumber(arguments[0]) ? arguments[0]
|
||||
: Ox.isNumber(arguments[1]) ? arguments[1] : 0,
|
||||
bin = '',
|
||||
// Array of bits per byte to be modified (0 is LSB)
|
||||
bits = mode < 1 ? [-mode] : Ox.map(Ox.range(8), function(b) {
|
||||
return mode & 1 << b ? b : null;
|
||||
}),
|
||||
|
|
@ -268,35 +319,41 @@ Ox.load.Image = function(options, callback) {
|
|||
var i = index + c;
|
||||
Ox.forEach(bits, function(bit) {
|
||||
bin += mode < 1
|
||||
// Read the number of bits set to 1, mod 2
|
||||
? Ox.sum(Ox.range(8).map(function(bit) {
|
||||
return +!!(self.data[i] & 1 << bit);
|
||||
})) % 2
|
||||
// or the one bit in question
|
||||
: +!!(self.data[i] & 1 << bit);
|
||||
if (bin.length == 8) {
|
||||
// Every 8 bits, add one byte to the string
|
||||
str += Ox.char(parseInt(bin, 2));
|
||||
bin = '';
|
||||
if (str.length == len) {
|
||||
if (++done == 1) {
|
||||
// After 4 bytes, parse string as length
|
||||
len = Ox.decodeBase256(str);
|
||||
Ox.print("LEN", len)
|
||||
len + 4 > getCapacity(bits.length)
|
||||
&& error('decode');
|
||||
if (
|
||||
len <= 0 ||
|
||||
len > getCapacity(bits.length) - 4
|
||||
) {
|
||||
error('decode');
|
||||
}
|
||||
str = '';
|
||||
} else {
|
||||
// After length more bytes, break
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return done != 2;
|
||||
});
|
||||
if (done == 2) {
|
||||
return false;
|
||||
}
|
||||
return done != 2;
|
||||
}
|
||||
});
|
||||
try {
|
||||
if (deflate) {
|
||||
Ox.print('DEFLATE')
|
||||
Ox.decodeDeflate(str, callback);
|
||||
} else {
|
||||
callback(Ox.decodeUTF8(str));
|
||||
|
|
@ -306,28 +363,22 @@ Ox.load.Image = function(options, callback) {
|
|||
}
|
||||
}
|
||||
|
||||
that.fillRect = function(x, y, w, h) {
|
||||
self.context.fillRect(x, y, w, h);
|
||||
return that;
|
||||
};
|
||||
|
||||
that.fillStyle = function() {
|
||||
if (arguments.length == 0) {
|
||||
return self.context.fillStyle;
|
||||
} else {
|
||||
self.context.fillStyle = arguments[0];
|
||||
return that;
|
||||
}
|
||||
};
|
||||
|
||||
/*@
|
||||
filter <f> Pixel-wise filter function
|
||||
Undocumented, see source code
|
||||
(filter) -> <o> The image object
|
||||
(filter, bias) -> <o> The image object
|
||||
filter <[n]> Filter matrix
|
||||
bias <n> Bias
|
||||
@*/
|
||||
that.filter = function(filter, bias) {
|
||||
bias = bias || 0;
|
||||
var filterSize = Math.sqrt(filter.length),
|
||||
d = (filterSize - 1) / 2,
|
||||
imageData = self.context.createImageData(self.width, self.height),
|
||||
imageData = that.context.createImageData(self.width, self.height),
|
||||
data = [];
|
||||
self.imageData = self.context.getImageData(0, 0, self.width, self.height);
|
||||
self.data = self.imageData.data;
|
||||
that.imageData = that.context.getImageData(0, 0, self.width, self.height);
|
||||
self.data = that.imageData.data;
|
||||
Ox.loop(0, self.data.length, 4, function(i) {
|
||||
var filterIndex = 0,
|
||||
xy = getXY(i);
|
||||
|
|
@ -351,8 +402,8 @@ Ox.load.Image = function(options, callback) {
|
|||
: self.data[i + c];
|
||||
});
|
||||
});
|
||||
self.context.putImageData(imageData, 0, 0);
|
||||
self.imageData = imageData;
|
||||
that.context.putImageData(imageData, 0, 0);
|
||||
that.imageData = imageData;
|
||||
self.data = data;
|
||||
return that;
|
||||
};
|
||||
|
|
@ -383,12 +434,23 @@ Ox.load.Image = function(options, callback) {
|
|||
});
|
||||
};
|
||||
|
||||
//@ imageData <o> Image data object
|
||||
|
||||
/*@
|
||||
invert <f> Apply invert filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.invert = function() {
|
||||
return that.map(function(rgba) {
|
||||
return [255 - rgba[0], 255 - rgba[1], 255 - rgba[2], rgba[3]];
|
||||
});
|
||||
};
|
||||
|
||||
/*@
|
||||
lightness <f> Apply lightness filter
|
||||
(val) -> <o> The image object
|
||||
val <n> Amount, from -1 (darkest) to 1 (lightest)
|
||||
@*/
|
||||
that.lightness = function(val) {
|
||||
return setSL('l', val);
|
||||
};
|
||||
|
|
@ -401,8 +463,8 @@ Ox.load.Image = function(options, callback) {
|
|||
xy <[n]> XY coordinates
|
||||
@*/
|
||||
that.map = function(fn) {
|
||||
self.imageData = self.context.getImageData(0, 0, self.width, self.height);
|
||||
self.data = self.imageData.data;
|
||||
that.imageData = that.context.getImageData(0, 0, self.width, self.height);
|
||||
self.data = that.imageData.data;
|
||||
Ox.loop(0, self.data.length, 4, function(i) {
|
||||
fn([
|
||||
self.data[i], self.data[i + 1],
|
||||
|
|
@ -411,10 +473,44 @@ Ox.load.Image = function(options, callback) {
|
|||
self.data[i + c] = val;
|
||||
});
|
||||
})
|
||||
self.context.putImageData(self.imageData, 0, 0);
|
||||
that.context.putImageData(that.imageData, 0, 0);
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
mosaic <f> Apply mosaic filter
|
||||
(size) -> <o> The image object
|
||||
size <n> Mosaic size
|
||||
@*/
|
||||
that.mosaic = function(size) {
|
||||
that.forEach(function(rgba, xy) {
|
||||
if (xy[0] % size == 0 && xy[1] % size == 0) {
|
||||
Ox.loop(size, function(x) {
|
||||
Ox.loop(size, function(y) {
|
||||
var hsl, rgb;
|
||||
if ((x == 0 || y == 0) && !(x == size - 1 || y == size - 1)) {
|
||||
that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) {
|
||||
return i < 3 ? Math.min(c + 16, 255) : c;
|
||||
}));
|
||||
} else if ((x == size - 1 || y == size - 1) && !(x == 0 || y == 0)) {
|
||||
that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) {
|
||||
return i < 3 ? Math.max(c - 16, 0) : c;
|
||||
}));
|
||||
} else {
|
||||
that.pixel(xy[0] + x, xy[1] + y, rgba);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
that.context.putImageData(that.imageData, 0, 0);
|
||||
return that;
|
||||
}
|
||||
|
||||
/*@
|
||||
motionBlur <f> Apply motion blur filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.motionBlur = function() {
|
||||
return that.filter([
|
||||
0.2, 0.0, 0.0, 0.0, 0.0,
|
||||
|
|
@ -425,6 +521,22 @@ Ox.load.Image = function(options, callback) {
|
|||
]);
|
||||
};
|
||||
|
||||
/*@
|
||||
photocopy <f> Apply photocopy filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.photocopy = function(val) {
|
||||
return that.saturation(-1).depth(1).blur(1);
|
||||
};
|
||||
|
||||
/*@
|
||||
pixel <f> Get or set pixel values
|
||||
(x, y) -> <[n]> RGBA values
|
||||
(x, y, val) -> <o> The image object
|
||||
x <n> X coordinate
|
||||
y <n> Y coordinate
|
||||
val <[n]> RGBA values
|
||||
@*/
|
||||
that.pixel = function(x, y, val) {
|
||||
var i = getIndex(x, y);
|
||||
if (!val) {
|
||||
|
|
@ -438,6 +550,10 @@ Ox.load.Image = function(options, callback) {
|
|||
}
|
||||
}
|
||||
|
||||
/*@
|
||||
posterize <f> Apply posterize filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.posterize = function() {
|
||||
return that.blur(3).map(function(rgba) {
|
||||
return [
|
||||
|
|
@ -450,17 +566,27 @@ Ox.load.Image = function(options, callback) {
|
|||
};
|
||||
|
||||
that.resize = function(width, height) {
|
||||
self.canvas.attr({
|
||||
// fixme: may not work this way
|
||||
that.canvas.attr({
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
||||
/*@
|
||||
saturation <f> Apply saturation filter
|
||||
(val) -> <o> The image object
|
||||
val <n> Amount, from -1 (lowest) to 1 (highest)
|
||||
@*/
|
||||
that.saturation = function(val) {
|
||||
return setSL('s', val);
|
||||
};
|
||||
|
||||
/*@
|
||||
sharpen <f> Apply sharpen filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.sharpen = function(val) {
|
||||
return that.filter([
|
||||
-1, -1, -1,
|
||||
|
|
@ -469,6 +595,10 @@ Ox.load.Image = function(options, callback) {
|
|||
]);
|
||||
};
|
||||
|
||||
/*@
|
||||
solarize <f> Apply solarize filter
|
||||
() -> <o> The image object
|
||||
@*/
|
||||
that.solarize = function() {
|
||||
return that.map(function(rgba) {
|
||||
return [
|
||||
|
|
@ -480,9 +610,15 @@ Ox.load.Image = function(options, callback) {
|
|||
});
|
||||
}
|
||||
|
||||
/*@
|
||||
src <f> Get or set the image source
|
||||
() -> <s> Data URL
|
||||
(src) -> <o> Image object, with new source
|
||||
src <s> Image source (local, remote or data URL)
|
||||
@*/
|
||||
that.src = function() {
|
||||
if (arguments.length == 0) {
|
||||
return self.canvas[0].toDataURL();
|
||||
return that.canvas[0].toDataURL();
|
||||
} else {
|
||||
var callback = arguments[1];
|
||||
self.src = arguments[0];
|
||||
|
|
@ -490,13 +626,13 @@ Ox.load.Image = function(options, callback) {
|
|||
self.image.onload = function() {
|
||||
self.width = self.image.width;
|
||||
self.height = self.image.height;
|
||||
self.canvas.attr({
|
||||
that.canvas.attr({
|
||||
width: self.width,
|
||||
height: self.height
|
||||
});
|
||||
self.context.drawImage(self.image, 0, 0);
|
||||
self.imageData = self.context.getImageData(0, 0, self.width, self.height);
|
||||
self.data = self.imageData.data;
|
||||
that.context.drawImage(self.image, 0, 0);
|
||||
that.imageData = that.context.getImageData(0, 0, self.width, self.height);
|
||||
self.data = that.imageData.data;
|
||||
callback && callback(that);
|
||||
}
|
||||
self.image.src = self.src;
|
||||
|
|
@ -504,8 +640,6 @@ Ox.load.Image = function(options, callback) {
|
|||
}
|
||||
};
|
||||
|
||||
that.toDataURL = that.src;
|
||||
|
||||
};
|
||||
|
||||
callback(true);
|
||||
|
|
|
|||
|
|
@ -1105,25 +1105,23 @@ Lists
|
|||
//-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
|
||||
//-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
.OxTextList .OxBar .OxHead {
|
||||
.OxTextList .OxHead {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.OxTextList .OxBar .OxCell {
|
||||
.OxTextList .OxHead .OxHeadCell {
|
||||
float: left;
|
||||
padding: 2px 4px 2px 4px;
|
||||
height: 12px;
|
||||
}
|
||||
.OxTextList .OxBar .OxCell:nthChild(1) {
|
||||
margin-left: 0;
|
||||
.OxTextList .OxHead .OxHeadCell:first-child {
|
||||
padding-left: 2px;
|
||||
}
|
||||
.OxTextList .OxBar .OxTitle {
|
||||
.OxTextList .OxHead .OxTitle {
|
||||
float: left;
|
||||
height: 15px;
|
||||
padding: 1px 2px 0 2px;
|
||||
height: 14px;
|
||||
padding: 2px 2px 0 2px;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -1131,47 +1129,34 @@ Lists
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.OxTextList .OxBar .OxTitle img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -1px 0 0 -4px;
|
||||
}
|
||||
.OxTextList .OxBar .OxTitle:first-child {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.OxTextList .OxBar .OxOrder {
|
||||
float: left;
|
||||
.OxTextList .OxHead .OxTitle img {
|
||||
width: 10px;
|
||||
height: 13px;
|
||||
padding: 3px 0 0 6px;
|
||||
font-size: 7px;
|
||||
height: 10px;
|
||||
margin: 1px 0 0 -1px;
|
||||
}
|
||||
.OxTextList .OxHead .OxOrder {
|
||||
float: left;
|
||||
display: none;
|
||||
}
|
||||
.OxTextList .OxBar .OxOrder.OxSelected {
|
||||
.OxTextList .OxHead .OxHeadCell.OxSelected .OxOrder {
|
||||
//cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize {
|
||||
.OxTextList .OxHead .OxResize {
|
||||
float: left;
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize.OxResizable {
|
||||
.OxTextList .OxHead .OxResize.OxResizable {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize .OxLeft,
|
||||
.OxTextList .OxBar .OxResize .OxCenter,
|
||||
.OxTextList .OxBar .OxResize .OxRight {
|
||||
.OxTextList .OxHead .OxResize div {
|
||||
float: left;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize .OxLeft,
|
||||
.OxTextList .OxBar .OxResize .OxRight {
|
||||
width: 2px;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize .OxCenter {
|
||||
.OxTextList .OxHead .OxResize div.OxCenter {
|
||||
width: 1px;
|
||||
background: rgb(24, 24, 24);
|
||||
}
|
||||
.OxTextList .OxBar .OxSelect {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
/*@
|
||||
Ox.Clipboard <o> Basic clipboard handler
|
||||
copy <f> copy to clipbloard
|
||||
(data) -> <u> set clipboard to data
|
||||
paste <f> paste from clipbload
|
||||
() -> <o> get clipboard data
|
||||
_print <f> debug function
|
||||
() -> <u> print clipboard contents to console
|
||||
data <o> clipboard object
|
||||
copy <f> Copy data to clipboard
|
||||
(data) -> <u> undefined
|
||||
paste <f> Paste data from clipboard
|
||||
() -> <*> Clipboard data
|
||||
@*/
|
||||
Ox.Clipboard = function() {
|
||||
var clipboard = {};
|
||||
|
|
|
|||
|
|
@ -309,6 +309,8 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function copyItems() {
|
||||
// fixme: both copy and paste should just deal with Ox.Clipboard,
|
||||
// and use a "type"
|
||||
self.options.selected.length && that.triggerEvent('copy', {
|
||||
ids: self.options.selected
|
||||
});
|
||||
|
|
@ -653,7 +655,7 @@ Ox.List = function(options, self) {
|
|||
if (self.$items.length == 0) {
|
||||
return self.options.selected;
|
||||
} else {
|
||||
return $.map(self.selected, function(pos) {
|
||||
return self.selected.map(function(pos) {
|
||||
return self.$items[pos].options('data')[self.options.unique];
|
||||
});
|
||||
}
|
||||
|
|
@ -826,7 +828,7 @@ Ox.List = function(options, self) {
|
|||
});
|
||||
that.triggerEvent('move', {
|
||||
//id: id,
|
||||
ids: $.map(self.$items, function($item) {
|
||||
ids: self.$items.map(function($item) {
|
||||
return $item.options('data')[self.options.unique];
|
||||
})
|
||||
//position: pos
|
||||
|
|
|
|||
|
|
@ -81,59 +81,59 @@ Ox.TextList = function(options, self) {
|
|||
keys: find
|
||||
});
|
||||
|
||||
self.options.columns.forEach(function(v) { // fixme: can this go into a generic ox.js function?
|
||||
self.options.columns.forEach(function(column) { // fixme: can this go into a generic ox.js function?
|
||||
// fixme: and can't these just remain undefined?
|
||||
if (Ox.isUndefined(v.align)) {
|
||||
v.align = 'left';
|
||||
if (Ox.isUndefined(column.align)) {
|
||||
column.align = 'left';
|
||||
}
|
||||
if (Ox.isUndefined(v.clickable)) {
|
||||
v.clickable = false;
|
||||
if (Ox.isUndefined(column.clickable)) {
|
||||
column.clickable = false;
|
||||
}
|
||||
if (Ox.isUndefined(v.editable)) {
|
||||
v.editable = false;
|
||||
if (Ox.isUndefined(column.editable)) {
|
||||
column.editable = false;
|
||||
}
|
||||
if (Ox.isUndefined(v.unique)) {
|
||||
v.unique = false;
|
||||
if (Ox.isUndefined(column.unique)) {
|
||||
column.unique = false;
|
||||
}
|
||||
if (Ox.isUndefined(v.visible)) {
|
||||
v.visible = false;
|
||||
if (Ox.isUndefined(column.visible)) {
|
||||
column.visible = false;
|
||||
}
|
||||
if (v.unique) {
|
||||
self.unique = v.id;
|
||||
if (column.unique) {
|
||||
self.unique = column.id;
|
||||
}
|
||||
});
|
||||
|
||||
$.extend(self, {
|
||||
Ox.extend(self, {
|
||||
columnPositions: [],
|
||||
defaultColumnWidths: $.map(self.options.columns, function(v) {
|
||||
return v.defaultWidth || v.width;
|
||||
defaultColumnWidths: self.options.columns.map(function(column) {
|
||||
return column.defaultWidth || column.width;
|
||||
}),
|
||||
itemHeight: 16,
|
||||
page: 0,
|
||||
pageLength: 100,
|
||||
scrollLeft: 0,
|
||||
selectedColumn: getColumnIndexById(self.options.sort[0].key),
|
||||
visibleColumns: $.map(self.options.columns, function(v) {
|
||||
return v.visible ? v : null;
|
||||
visibleColumns: self.options.columns.filter(function(column) {
|
||||
return column.visible;
|
||||
})
|
||||
});
|
||||
// fixme: there might be a better way than passing both visible and position
|
||||
self.options.columns.forEach(function(v) {
|
||||
if (!Ox.isUndefined(v.position)) {
|
||||
self.visibleColumns[v.position] = v;
|
||||
self.options.columns.forEach(function(column) {
|
||||
if (!Ox.isUndefined(column.position)) {
|
||||
self.visibleColumns[column.position] = column;
|
||||
}
|
||||
});
|
||||
$.extend(self, {
|
||||
columnWidths: $.map(self.visibleColumns, function(v, i) {
|
||||
return v.width;
|
||||
Ox.extend(self, {
|
||||
columnWidths: self.visibleColumns.map(function(column) {
|
||||
return column.width;
|
||||
}),
|
||||
pageHeight: self.options.pageLength * self.itemHeight
|
||||
});
|
||||
|
||||
self.format = {};
|
||||
self.options.columns.forEach(function(v, i) {
|
||||
if (v.format) {
|
||||
self.format[v.id] = v.format;
|
||||
self.options.columns.forEach(function(column) {
|
||||
if (column.format) {
|
||||
self.format[column.id] = column.format;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -147,7 +147,8 @@ Ox.TextList = function(options, self) {
|
|||
that.$head = Ox.Container()
|
||||
.addClass('OxHead')
|
||||
.css({
|
||||
right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
|
||||
right: self.options.scrollbarVisible
|
||||
? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
|
||||
})
|
||||
.appendTo(that.$bar);
|
||||
that.$head.$content.addClass('OxTitles');
|
||||
|
|
@ -155,13 +156,13 @@ Ox.TextList = function(options, self) {
|
|||
if (self.options.columnsRemovable) {
|
||||
that.$select = Ox.Select({
|
||||
id: self.options.id + 'SelectColumns',
|
||||
items: $.map(self.options.columns, function(v, i) {
|
||||
items: self.options.columns.map(function(column) {
|
||||
return {
|
||||
checked: v.visible,
|
||||
disabled: v.removable === false,
|
||||
id: v.id,
|
||||
title: v.title
|
||||
}
|
||||
checked: column.visible,
|
||||
disabled: column.removable === false,
|
||||
id: column.id,
|
||||
title: column.title
|
||||
};
|
||||
}),
|
||||
max: -1,
|
||||
min: 1,
|
||||
|
|
@ -195,7 +196,7 @@ Ox.TextList = function(options, self) {
|
|||
sortable: self.options.sortable,
|
||||
type: 'text',
|
||||
unique: self.unique
|
||||
}, $.extend({}, self)) // pass event handler
|
||||
}, Ox.extend({}, self)) // pass event handler
|
||||
.addClass('OxBody')
|
||||
.css({
|
||||
top: (self.options.columnsVisible ? 16 : 0) + 'px',
|
||||
|
|
@ -305,83 +306,87 @@ Ox.TextList = function(options, self) {
|
|||
}
|
||||
|
||||
function constructHead() {
|
||||
var offset = 0;
|
||||
that.$titles = [];
|
||||
self.columnOffsets = [];
|
||||
self.visibleColumns.forEach(function(v, i) {
|
||||
var $order, $resize, $left, $center, $right;
|
||||
offset += self.columnWidths[i];
|
||||
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
|
||||
that.$titles[i] = Ox.Element()
|
||||
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
|
||||
.css({
|
||||
width: (self.columnWidths[i] - 9) + 'px',
|
||||
textAlign: v.align
|
||||
})
|
||||
.html(v.title)
|
||||
self.$heads = [];
|
||||
self.$titles = [];
|
||||
self.$orderButtons = [];
|
||||
self.visibleColumns.forEach(function(column, i) {
|
||||
var $resize;
|
||||
self.$heads[i] = Ox.Element()
|
||||
.addClass('OxHeadCell OxColumn' + Ox.toTitleCase(column.id))
|
||||
.css({width: self.columnWidths[i] - 5 + 'px'})
|
||||
.appendTo(that.$head.$content.$element);
|
||||
// if sort operator is set, bind click event
|
||||
if (v.operator) {
|
||||
that.$titles[i].bindEvent({
|
||||
anyclick: function(event, e) {
|
||||
clickColumn(v.id);
|
||||
if (column.operator) {
|
||||
self.$heads[i].bindEvent({
|
||||
anyclick: function() {
|
||||
clickColumn(column.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
// if columns are movable, bind drag events
|
||||
if (self.options.columnsMovable) {
|
||||
that.$titles[i].bindEvent({
|
||||
self.$heads[i].bindEvent({
|
||||
dragstart: function(event, e) {
|
||||
dragstartColumn(v.id, e);
|
||||
dragstartColumn(column.id, e);
|
||||
},
|
||||
drag: function(event, e) {
|
||||
dragColumn(v.id, e);
|
||||
dragColumn(column.id, e);
|
||||
},
|
||||
dragend: function(event, e) {
|
||||
dragendColumn(v.id, e);
|
||||
dragendColumn(column.id, e);
|
||||
}
|
||||
})
|
||||
}
|
||||
$order = $('<div>')
|
||||
.addClass('OxOrder')
|
||||
.html(Ox.UI.symbols['triangle_' + (
|
||||
v.operator == '+' ? 'up' : 'down'
|
||||
)])
|
||||
.click(function() {
|
||||
$(this).prev().trigger('click')
|
||||
self.$titles[i] = Ox.Element()
|
||||
.addClass('OxTitle')
|
||||
.css({
|
||||
width: self.columnWidths[i] - 9 + 'px',
|
||||
textAlign: column.align
|
||||
})
|
||||
.appendTo(that.$head.$content.$element);
|
||||
.html(column.title)
|
||||
.appendTo(self.$heads[i]);
|
||||
self.$orderButtons[i] = Ox.Button({
|
||||
style: 'symbol',
|
||||
title: column.operator == '+' ? 'up' : 'down',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxOrder')
|
||||
.css({marginTop: (column.operator == '+' ? 1 : -1) + 'px'})
|
||||
.click(function() {
|
||||
$(this).parent().trigger('click');
|
||||
})
|
||||
.appendTo(self.$heads[i]);
|
||||
$resize = Ox.Element()
|
||||
.addClass('OxResize')
|
||||
.appendTo(that.$head.$content.$element);
|
||||
$('<div>').appendTo($resize);
|
||||
$('<div>').addClass('OxCenter').appendTo($resize);
|
||||
$('<div>').appendTo($resize);
|
||||
// if columns are resizable, bind click and drag events
|
||||
if (self.options.columnsResizable) {
|
||||
$resize.addClass('OxResizable')
|
||||
.bindEvent({
|
||||
doubleclick: function(event, e) {
|
||||
resetColumn(v.id, e);
|
||||
resetColumn(column.id, e);
|
||||
},
|
||||
dragstart: function(event, e) {
|
||||
dragstartResize(v.id, e);
|
||||
dragstartResize(column.id, e);
|
||||
},
|
||||
drag: function(event, e) {
|
||||
dragResize(v.id, e);
|
||||
dragResize(column.id, e);
|
||||
},
|
||||
dragend: function(event, e) {
|
||||
dragendResize(v.id, e);
|
||||
dragendResize(column.id, e);
|
||||
}
|
||||
});
|
||||
}
|
||||
$left = $('<div>').addClass('OxLeft').appendTo($resize.$element);
|
||||
$center = $('<div>').addClass('OxCenter').appendTo($resize.$element);
|
||||
$right = $('<div>').addClass('OxRight').appendTo($resize.$element);
|
||||
});
|
||||
that.$head.$content.css({
|
||||
width: (Ox.sum(self.columnWidths) + 2) + 'px'
|
||||
});
|
||||
if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
|
||||
toggleSelected(self.options.columns[self.selectedColumn].id);
|
||||
that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
|
||||
self.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
|
||||
width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
|
||||
});
|
||||
}
|
||||
|
|
@ -419,56 +424,39 @@ Ox.TextList = function(options, self) {
|
|||
return $item;
|
||||
}
|
||||
|
||||
function formatValue(key, value, data) {
|
||||
// fixme: this may be obscure...
|
||||
// since the format of a value may depend on another value,
|
||||
// we pass all data as a second parameter to the supplied format function
|
||||
var format = self.format[key];
|
||||
if (value === null) {
|
||||
value = '';
|
||||
} else if (format) {
|
||||
value = Ox.isObject(format) ?
|
||||
Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, Ox.merge([value], format.args || [])) :
|
||||
format(value, data);
|
||||
} else if (Ox.isArray(value)) {
|
||||
value = value.join(', ');
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function dragstartColumn(id, e) {
|
||||
self.drag = {
|
||||
startX: e.clientX,
|
||||
columnOffsets: getColumnOffsets(),
|
||||
// fixme: doesn't take into account horizontal scroll
|
||||
listOffset: that.$element.offset().left,
|
||||
startPos: getColumnPositionById(id)
|
||||
}
|
||||
$.extend(self.drag, {
|
||||
stopPos: self.drag.startPos,
|
||||
offsets: $.map(self.visibleColumns, function(v, i) {
|
||||
return self.columnOffsets[i] - self.columnOffsets[self.drag.startPos]
|
||||
})
|
||||
});
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({
|
||||
opacity: 0.25
|
||||
});
|
||||
that.$titles[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
|
||||
self.drag.stopPos = self.drag.startPos;
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 0.25});
|
||||
self.drag.startPos > 0 && self.$heads[self.drag.startPos].prev().children().eq(2).css({opacity: 0.25});
|
||||
self.$heads[self.drag.startPos].next().children().eq(0).css({opacity: 0.25});
|
||||
self.$heads[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
|
||||
cursor: 'move'
|
||||
});
|
||||
//Ox.print('columnOffsets', self.drag.columnOffsets)
|
||||
}
|
||||
|
||||
function dragColumn(id, e) {
|
||||
var d = e.clientX - self.drag.startX,
|
||||
pos = self.drag.stopPos;
|
||||
Ox.forEach(self.drag.offsets, function(v, i) {
|
||||
if (d < 0 && d < v) {
|
||||
var pos = self.drag.stopPos;
|
||||
Ox.forEach(self.drag.columnOffsets, function(offset, i) {
|
||||
var x = self.drag.listOffset + offset + self.columnWidths[i] / 2;
|
||||
if (i < self.drag.startPos && e.clientX < x) {
|
||||
self.drag.stopPos = i;
|
||||
return false;
|
||||
} else if (d > 0 && d > v) {
|
||||
} else if (i > self.drag.startPos && e.clientX > x) {
|
||||
self.drag.stopPos = i;
|
||||
}
|
||||
});
|
||||
if (self.drag.stopPos != pos) {
|
||||
moveColumn(id, self.drag.stopPos);
|
||||
self.drag.columnOffsets = getColumnOffsets();
|
||||
self.drag.startPos = self.drag.stopPos;
|
||||
//Ox.print('columnOffsets', self.drag.columnOffsets)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -479,10 +467,8 @@ Ox.TextList = function(options, self) {
|
|||
self.columnWidths.splice(self.drag.stopPos, 0, width);
|
||||
that.$head.$content.empty();
|
||||
constructHead();
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({
|
||||
opacity: 1
|
||||
});
|
||||
that.$titles[self.drag.stopPos].removeClass('OxDrag').css({
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 1});
|
||||
self.$heads[self.drag.stopPos].removeClass('OxDrag').css({
|
||||
cursor: 'pointer'
|
||||
});
|
||||
that.$body.clearCache();
|
||||
|
|
@ -492,14 +478,13 @@ Ox.TextList = function(options, self) {
|
|||
function dragstartResize(id, e) {
|
||||
var pos = getColumnPositionById(id);
|
||||
self.drag = {
|
||||
startX: e.clientX,
|
||||
startWidth: self.columnWidths[pos]
|
||||
};
|
||||
}
|
||||
|
||||
function dragResize(id, e) {
|
||||
var width = Ox.limit(
|
||||
self.drag.startWidth - self.drag.startX + e.clientX,
|
||||
self.drag.startWidth + e.clientDX,
|
||||
self.options.columnWidth[0],
|
||||
self.options.columnWidth[1]
|
||||
);
|
||||
|
|
@ -531,6 +516,24 @@ Ox.TextList = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function formatValue(key, value, data) {
|
||||
// fixme: this may be obscure...
|
||||
// since the format of a value may depend on another value,
|
||||
// we pass all data as a second parameter to the supplied format function
|
||||
var format = self.format[key];
|
||||
if (value === null) {
|
||||
value = '';
|
||||
} else if (format) {
|
||||
value = Ox.isObject(format) ?
|
||||
Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, Ox.merge([value], format.args || [])) :
|
||||
format(value, data);
|
||||
} else if (Ox.isArray(value)) {
|
||||
value = value.join(', ');
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function getCell(id, key) {
|
||||
Ox.print('getCell', id, key)
|
||||
var $item = getItem(id);
|
||||
|
|
@ -538,6 +541,14 @@ Ox.TextList = function(options, self) {
|
|||
return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]);
|
||||
}
|
||||
|
||||
function getColumnOffsets() {
|
||||
return self.visibleColumns.map(function(column, i) {
|
||||
return Ox.sum(self.visibleColumns.map(function(column_, i_) {
|
||||
return i_ < i ? self.columnWidths[i_] : 0;
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
function getColumnIndexById(id) {
|
||||
return Ox.getPositionById(self.options.columns, id);
|
||||
}
|
||||
|
|
@ -549,10 +560,10 @@ Ox.TextList = function(options, self) {
|
|||
function getItem(id) {
|
||||
//Ox.print('getItem', id)
|
||||
var $item = null;
|
||||
$.each(that.find('.OxItem'), function(i, v) {
|
||||
$v = $(v);
|
||||
if ($v.data('id') == id) {
|
||||
$item = $v;
|
||||
that.find('.OxItem').each(function() {
|
||||
$this = $(this);
|
||||
if ($this.data('id') == id) {
|
||||
$item = $this;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -579,37 +590,50 @@ Ox.TextList = function(options, self) {
|
|||
}
|
||||
|
||||
function moveColumn(id, pos) {
|
||||
// fixme: column head should be one element, not three
|
||||
//Ox.print('moveColumn', id, pos)
|
||||
var startPos = getColumnPositionById(id),
|
||||
stopPos = pos,
|
||||
startClassName = '.OxColumn' + Ox.toTitleCase(id),
|
||||
stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
|
||||
startSelector = '.OxColumn' + Ox.toTitleCase(id),
|
||||
stopSelector = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
|
||||
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
|
||||
$column = $('.OxTitle' + startClassName),
|
||||
$order = $column.next(),
|
||||
$resize = $order.next();
|
||||
//Ox.print(startClassName, insert, stopClassName)
|
||||
$column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName));
|
||||
$order.detach().insertAfter($column);
|
||||
$resize.detach().insertAfter($order);
|
||||
$.each(that.$body.find('.OxItem'), function(i, v) {
|
||||
var $v = $(v);
|
||||
$v.children(startClassName).detach()[insert]($v.children(stopClassName));
|
||||
$column = $('.OxHeadCell' + startSelector),
|
||||
$resize = $column.next();
|
||||
//Ox.print(startSelector, insert, stopSelector)
|
||||
$column.detach()[insert](insert == 'insertAfter'
|
||||
? $('.OxHeadCell' + stopSelector).next()
|
||||
: $('.OxHeadCell' + stopSelector));
|
||||
$resize.detach().insertAfter($column);
|
||||
that.$body.find('.OxItem').each(function() {
|
||||
var $this = $(this);
|
||||
$this.children(startSelector).detach()[insert](
|
||||
$this.children(stopSelector)
|
||||
);
|
||||
});
|
||||
var column = self.visibleColumns.splice(startPos, 1)[0],
|
||||
width = self.columnWidths.splice(startPos, 1)[0];
|
||||
self.visibleColumns.splice(stopPos, 0, column);
|
||||
self.columnWidths.splice(stopPos, 0, width);
|
||||
var $head = self.$heads.splice(startPos, 1)[0],
|
||||
columnWidth = self.columnWidths.splice(startPos, 1)[0],
|
||||
visibleColumn = self.visibleColumns.splice(startPos, 1)[0];
|
||||
self.$heads.splice(stopPos, 0, $head);
|
||||
self.columnWidths.splice(stopPos, 0, columnWidth);
|
||||
self.visibleColumns.splice(stopPos, 0, visibleColumn);
|
||||
var pos = getColumnPositionById(self.options.columns[self.selectedColumn].id);
|
||||
if (pos > -1) {
|
||||
that.$element.find('.OxResize .OxSelected').removeClass('OxSelected');
|
||||
pos > 0 && self.$heads[pos].prev().children().eq(2).addClass('OxSelected');
|
||||
self.$heads[pos].next().children().eq(0).addClass('OxSelected');
|
||||
if (pos == stopPos) {
|
||||
pos > 0 && self.$heads[pos].prev().children().eq(2).css({opacity: 0.25});
|
||||
self.$heads[pos].next().children().eq(0).css({opacity: 0.25});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeColumn(id) {
|
||||
//Ox.print('removeColumn', id);
|
||||
var className = '.OxColumn' + Ox.toTitleCase(id),
|
||||
index = getColumnIndexById(id),
|
||||
var index = getColumnIndexById(id),
|
||||
itemWidth,
|
||||
position = getColumnPositionById(id),
|
||||
$column = $('.OxTitle' + className),
|
||||
selector = '.OxColumn' + Ox.toTitleCase(id),
|
||||
$column = $('.OxHeadCell ' + selector),
|
||||
$order = $column.next(),
|
||||
$resize = $order.next();
|
||||
self.options.columns[index].visible = false;
|
||||
|
|
@ -618,19 +642,17 @@ Ox.TextList = function(options, self) {
|
|||
that.$head.$content.empty();
|
||||
constructHead();
|
||||
itemWidth = getItemWidth();
|
||||
$.each(that.$body.find('.OxItem'), function(i, v) {
|
||||
var $v = $(v);
|
||||
$v.children(className).remove();
|
||||
$v.css({
|
||||
width: itemWidth + 'px'
|
||||
});
|
||||
that.$body.find('.OxItem').each(function() {
|
||||
var $this = $(this);
|
||||
$this.children(selector).remove();
|
||||
$this.css({width: itemWidth + 'px'});
|
||||
});
|
||||
that.$body.$content.css({
|
||||
width: itemWidth + 'px'
|
||||
});
|
||||
that.$body.options({
|
||||
keys: Ox.merge(self.visibleColumns.map(function(column) {
|
||||
return colum.id;
|
||||
return column.id;
|
||||
}), self.options.keys)
|
||||
});
|
||||
//that.$body.clearCache();
|
||||
|
|
@ -654,12 +676,15 @@ Ox.TextList = function(options, self) {
|
|||
that.$head.$content.css({
|
||||
width: (Ox.sum(self.columnWidths) + 2) + 'px'
|
||||
});
|
||||
that.$titles[pos].css({
|
||||
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
|
||||
self.$heads[pos].css({
|
||||
width: width - 5 + 'px'
|
||||
});
|
||||
self.$titles[pos].css({
|
||||
width: width - 9 - (i == self.selectedColumn ? 16 : 0) + 'px'
|
||||
});
|
||||
}
|
||||
that.$element.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
|
||||
width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px'
|
||||
width: width - (self.options.columnsVisible ? 9 : 8) + 'px'
|
||||
});
|
||||
setWidth();
|
||||
}
|
||||
|
|
@ -678,13 +703,12 @@ Ox.TextList = function(options, self) {
|
|||
var pos = getColumnPositionById(id);
|
||||
if (pos > -1) {
|
||||
updateOrder(id);
|
||||
pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass('OxSelected');
|
||||
that.$titles[pos].toggleClass('OxSelected');
|
||||
that.$titles[pos].next().toggleClass('OxSelected');
|
||||
that.$titles[pos].next().next().children().eq(0).toggleClass('OxSelected');
|
||||
that.$titles[pos].css({
|
||||
pos > 0 && self.$heads[pos].prev().children().eq(2).toggleClass('OxSelected');
|
||||
self.$heads[pos].toggleClass('OxSelected');
|
||||
self.$heads[pos].next().children().eq(0).toggleClass('OxSelected');
|
||||
self.$titles[pos].css({
|
||||
width: (
|
||||
that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16)
|
||||
self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16)
|
||||
) + 'px'
|
||||
});
|
||||
}
|
||||
|
|
@ -692,8 +716,8 @@ Ox.TextList = function(options, self) {
|
|||
|
||||
function triggerColumnChangeEvent() {
|
||||
that.triggerEvent('columnchange', {
|
||||
ids: $.map(self.visibleColumns, function(v, i) {
|
||||
return v.id;
|
||||
ids: self.visibleColumns.map(function(column) {
|
||||
return column.id;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -713,11 +737,14 @@ Ox.TextList = function(options, self) {
|
|||
}
|
||||
|
||||
function updateOrder(id) {
|
||||
var pos = getColumnPositionById(id);
|
||||
var operator = self.options.sort[0].operator,
|
||||
pos = getColumnPositionById(id);
|
||||
if (pos > -1) {
|
||||
that.$titles[pos].next().html(Ox.UI.symbols[
|
||||
'triangle_' + (self.options.sort[0].operator == '+' ? 'up' : 'down')
|
||||
]);
|
||||
self.$orderButtons[pos].options({
|
||||
title: operator == '+' ? 'up' : 'down'
|
||||
}).css({
|
||||
marginTop: (operator == '+' ? 1 : -1) + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ Ox.MainMenu = function(options, self) {
|
|||
|
||||
function click(event) {
|
||||
var $target = $(event.target),
|
||||
position = typeof $target.data('position') != 'undefined' ?
|
||||
$target.data('position') : -1;
|
||||
position = typeof $target.data('position') != 'undefined'
|
||||
? $target.data('position') : -1;
|
||||
clickTitle(position);
|
||||
}
|
||||
|
||||
|
|
@ -84,8 +84,8 @@ Ox.MainMenu = function(options, self) {
|
|||
function mousemove(event) {
|
||||
var $target = $(event.target),
|
||||
focused,
|
||||
position = typeof $target.data('position') != 'undefined' ?
|
||||
$target.data('position') : -1;
|
||||
position = typeof $target.data('position') != 'undefined'
|
||||
? $target.data('position') : -1;
|
||||
if (self.focused && position != self.selected) {
|
||||
if (position > -1) {
|
||||
clickTitle(position);
|
||||
|
|
@ -125,25 +125,23 @@ Ox.MainMenu = function(options, self) {
|
|||
itemId = ids.pop(),
|
||||
menuId = ids.join('_');
|
||||
that.getMenu(menuId).checkItem(itemId);
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
disableItem <f> disableItem
|
||||
@*/
|
||||
that.disableItem = function(id) {
|
||||
that.getItem(id).options({
|
||||
disabled: true
|
||||
});
|
||||
that.getItem(id).options({disabled: true});
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
enableItem <f> enableItem
|
||||
@*/
|
||||
that.enableItem = function(id) {
|
||||
Ox.print('ENABLE ITEM', id)
|
||||
that.getItem(id).options({
|
||||
disabled: false
|
||||
});
|
||||
that.getItem(id).options({disabled: false});
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
@ -180,7 +178,6 @@ Ox.MainMenu = function(options, self) {
|
|||
} else {
|
||||
menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_'));
|
||||
}
|
||||
//Ox.print('getMenu', id, menu);
|
||||
return menu;
|
||||
};
|
||||
|
||||
|
|
@ -195,6 +192,7 @@ Ox.MainMenu = function(options, self) {
|
|||
if (self.selected < self.options.menus.length - 1) {
|
||||
clickTitle(self.selected + 1);
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
@ -204,15 +202,15 @@ Ox.MainMenu = function(options, self) {
|
|||
if (self.selected) {
|
||||
clickTitle(self.selected - 1);
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
uncheckItem <f> uncheckItem
|
||||
@*/
|
||||
that.uncheckItem = function(id) {
|
||||
that.getItem(id).options({
|
||||
checked: false
|
||||
});
|
||||
that.getItem(id).options({checked: false});
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -178,8 +178,8 @@ Ox.Menu = function(options, self) {
|
|||
self.optionGroups = {};
|
||||
items.forEach(function(item, i) {
|
||||
if (item.group) {
|
||||
items[i] = $.map(item.items, function(v, i) {
|
||||
return $.extend(v, {
|
||||
items[i] = item.items.map(function(v, i) {
|
||||
return Ox.extend(v, {
|
||||
group: item.group
|
||||
});
|
||||
});
|
||||
|
|
@ -196,7 +196,7 @@ Ox.Menu = function(options, self) {
|
|||
items.forEach(function(item) {
|
||||
var position;
|
||||
if ('id' in item) {
|
||||
that.items.push(Ox.MenuItem($.extend(item, {
|
||||
that.items.push(Ox.MenuItem(Ox.extend(item, {
|
||||
menu: that,
|
||||
position: position = that.items.length
|
||||
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
||||
|
|
@ -281,10 +281,7 @@ Ox.Menu = function(options, self) {
|
|||
|
||||
function constructSpace() {
|
||||
return $('<tr>').append(
|
||||
$('<td>', {
|
||||
'class': 'OxSpace',
|
||||
colspan: 5
|
||||
})
|
||||
$('<td>', {'class': 'OxSpace', colspan: 5})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -720,10 +717,10 @@ Ox.Menu = function(options, self) {
|
|||
};
|
||||
|
||||
/*@
|
||||
toggelMenu <f> toggleMenu
|
||||
toggleMenu <f> toggleMenu
|
||||
@*/
|
||||
that.toggleMenu = function() {
|
||||
that.is(':hidden') ? that.showMenu() : that.hideMenu();
|
||||
return that.is(':hidden') ? that.showMenu() : that.hideMenu();
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ Ox.MenuItem = function(options, self) {
|
|||
position: 0,
|
||||
title: [],
|
||||
})
|
||||
.options($.extend(options, {
|
||||
.options(Ox.extend(options, {
|
||||
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
|
||||
title: Ox.toArray(options.title || self.defaults.title)
|
||||
}))
|
||||
|
|
@ -63,10 +63,8 @@ Ox.MenuItem = function(options, self) {
|
|||
that.$icon = $('<td>', {
|
||||
'class': 'OxCell OxIcon'
|
||||
})
|
||||
.append(self.options.icon ?
|
||||
$('<img>', {
|
||||
src: self.options.icon
|
||||
}) : null
|
||||
.append(self.options.icon
|
||||
? $('<img>', {src: self.options.icon}) : null
|
||||
)
|
||||
)
|
||||
.append(
|
||||
|
|
@ -78,17 +76,19 @@ Ox.MenuItem = function(options, self) {
|
|||
.append(
|
||||
$('<td>', {
|
||||
'class': 'OxCell OxModifiers',
|
||||
html: $.map(self.options.keyboard.modifiers, function(modifier) {
|
||||
html: self.options.keyboard.modifiers.map(function(modifier) {
|
||||
return Ox.UI.symbols[modifier];
|
||||
}).join('')
|
||||
})
|
||||
)
|
||||
.append(
|
||||
$('<td>', {
|
||||
'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
|
||||
html: self.options.items.length ? Ox.UI.symbols.triangle_right :
|
||||
Ox.UI.symbols[self.options.keyboard.key] ||
|
||||
self.options.keyboard.key.toUpperCase()
|
||||
'class': 'OxCell Ox'
|
||||
+ (self.options.items.length ? 'Submenu' : 'Key'),
|
||||
html: self.options.items.length
|
||||
? Ox.UI.symbols.triangle_right
|
||||
: Ox.UI.symbols[self.options.keyboard.key]
|
||||
|| self.options.keyboard.key.toUpperCase()
|
||||
})
|
||||
);
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ Ox.MenuItem = function(options, self) {
|
|||
if (key == 'checked') {
|
||||
that.$status.html(value ? Ox.UI.symbols.check : '')
|
||||
} else if (key == 'disabled') {
|
||||
that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change
|
||||
that.toggleClass('OxDisabled');
|
||||
} else if (key == 'title') {
|
||||
self.options.title = Ox.toArray(value);
|
||||
that.$title.html(self.options.title[0]);
|
||||
|
|
@ -120,12 +120,11 @@ Ox.MenuItem = function(options, self) {
|
|||
};
|
||||
|
||||
/*@
|
||||
toggelChecked <f> toggleChecked
|
||||
toggleChecked <f> toggleChecked
|
||||
@*/
|
||||
that.toggleChecked = function() {
|
||||
that.options({
|
||||
checked: !self.options.checked
|
||||
});
|
||||
that.options({checked: !self.options.checked});
|
||||
return that;
|
||||
};
|
||||
|
||||
that.toggleDisabled = function() {
|
||||
|
|
@ -133,13 +132,11 @@ Ox.MenuItem = function(options, self) {
|
|||
};
|
||||
|
||||
/*@
|
||||
toggelTitle <f> toggleTitle
|
||||
toggleTitle <f> toggleTitle
|
||||
@*/
|
||||
that.toggleTitle = function() {
|
||||
//Ox.print('s.o.t', self.options.title)
|
||||
that.options({
|
||||
title: self.options.title.reverse()
|
||||
});
|
||||
that.options({title: self.options.title.reverse()});
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -378,24 +378,18 @@ Lists
|
|||
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
|
||||
background: rgb(206, 206, 206);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar {
|
||||
background: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
|
||||
background: -o-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
|
||||
background: -webkit-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxSelected {
|
||||
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
//color: rgb(0, 0, 0);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxOrder {
|
||||
|
||||
|
||||
.OxThemeClassic .OxTextList .OxHead .OxSelected {
|
||||
background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
|
||||
background: -o-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
|
||||
background: -webkit-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter {
|
||||
.OxThemeClassic .OxTextList .OxHead .OxResize .OxCenter {
|
||||
background: rgb(192, 192, 192);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxSelect {
|
||||
.OxThemeClassic .OxTextList .OxHead .OxSelect {
|
||||
border-color: rgb(192, 192, 192);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {
|
||||
|
|
|
|||
|
|
@ -369,28 +369,23 @@ Lists
|
|||
//background: rgb(66, 66, 82);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell {
|
||||
background: rgb(78, 78, 94);
|
||||
background: rgb(78, 78, 78);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell {
|
||||
background: rgb(82, 82, 98);
|
||||
background: rgb(82, 82, 82);
|
||||
}
|
||||
|
||||
|
||||
.OxThemeModern .OxTextList .OxBar .OxSelected {
|
||||
.OxThemeModern .OxTextList .OxHead .OxSelected {
|
||||
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
|
||||
background: -o-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
|
||||
background: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBar .OxOrder {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBar .OxResize .OxCenter {
|
||||
.OxThemeModern .OxTextList .OxHead .OxResize .OxCenter {
|
||||
background: rgb(24, 24, 24);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBar .OxSelect {
|
||||
.OxThemeModern .OxTextList .OxHead .OxSelect {
|
||||
border-color: rgb(24, 24, 24);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBody .OxItem .OxCell {
|
||||
|
|
|
|||
Loading…
Reference in a new issue