merging changes

demos/editable/js/editable.js

@@ -35,7 +35,7 @@ Ox.load('UI', {debug: true}, function() {
         country: ['France'],
         director: ['Jean-Luc Godard'],
         language: ['French', 'English'],
-        runtime: 5400,
+        runtime: '90 min',
         title: 'Deux ou trois choses que je sais d\'elle',
         year: '1967'
     };
@@ -72,17 +72,17 @@ Ox.load('UI', {debug: true}, function() {
             .css({float: 'left', margin: '1px 0 0 1px'})
             .append(
                 $('<div>')
-                    .css({float: 'left'})
+                    .css({float: 'left', fontWeight: 'bold'})
                     .html((i ? '; ' : '') + Ox.toTitleCase(key) + ':&nbsp;')
             )
             .appendTo($div);
         Ox.Editable({
                 format: function(value) {
-                    return value ? (
+                    return (value ? (
                         Ox.isArray(data[key]) ? value.split(', ').map(function(value) {
                             return '<a href="/?find=' + value + '">' + value + '</a>'
                         }).join(', ') : value
-                    ) : 'unknown';
+                    ) : 'unknown');// + (i == 3 ? '' : ';');
                 },
                 value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key]
             })
@@ -92,16 +92,20 @@ Ox.load('UI', {debug: true}, function() {
             .appendTo($div_);
     });
 
-    $div = $('<div>')
-        .css({clear: 'both'})
-        .appendTo($box.$element);
 
+    $div = $('<div>').css({clear: 'both', marginTop: '16px', textAlign: 'justify'}).appendTo($box.$element);
     Ox.Editable({
             format: function(value) {
-                return value ? Ox.parseHTML(value) : 'No description'
+                return '<span style="font-weight: bold">Keywords:</span> '
+                    + value.split(', ').map(function(value) {
+                        return '<a href="/?find=' + value + '">' + value + '</a>'
+                    }).join(', ')
             },
             type: 'textarea',
-            value: 'foo bar\nfoo bar'
+            value: 'Sex, Crime, Car, Spoiler in Keywords, Genre in Keywords, Director Cameo, One Or More Meta Keywords',
+            width: 512
+        })
+        .css({
         })
         .appendTo($div);
 

source/Ox.UI/css/Ox.UI.css

@@ -693,6 +693,10 @@ OxEditable
     padding: 0 1px 0 0;
     border: 0;
 }
+.OxEditable textarea.OxInput {
+    padding: 0 0 0 1px;
+    border: 0;
+}
 
 /*
 --------------------------------------------------------------------------------

source/Ox.UI/js/Form/Ox.Editable.js

@@ -18,6 +18,7 @@ Ox.Editable = function(options, self) {
             editing: false,
             format: null,
             value: '',
+            width: 256,
             type: 'input'
         })
         .options(options || {})
@@ -26,6 +27,8 @@ Ox.Editable = function(options, self) {
             doubleclick: edit
         });
 
+    self.options.value = self.options.value.toString();
+
     self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
         .addClass('OxValue')
         .css(self.options.type == 'input' ? {
@@ -33,7 +36,8 @@ Ox.Editable = function(options, self) {
             //padding: '1px 4px 1px 4px',
             //border: '1px solid transparent'
         } : {
-            padding: '0 4px 0 4px'
+            //padding: '0 4px 0 4px'
+            width: self.options.width + 'px'
         })
         .html(
             self.options.format
@@ -43,12 +47,25 @@ Ox.Editable = function(options, self) {
         //[self.options.editing ? 'hide' : 'show']()
         .appendTo(that);
 
-    self.$input = Ox.Input({
+    self.$test = self.$value.$element.clone()
+        .html(self.options.value.replace(/ /g, '&nbsp;'))
+        .css({
+            display: 'table-cell',
+            //position: 'absolute',
+            //left: 200,
+            //top: 200
+        })
+        .hide()
+        .appendTo(that.$element);
+
+    self.$input = Ox.Input(Ox.extend({
             changeOnKeypress: true,
             style: 'square',
             type: self.options.type,
             value: self.options.value
-        })
+        }, self.options.type == 'textarea' ? {
+            width: self.options.width
+        } : {}))
         .bindEvent({
             blur: submit,
             cancel: cancel,
@@ -72,25 +89,22 @@ Ox.Editable = function(options, self) {
 
     function change(event) {
         var height, width;
-        self.options.value = event.value;
+        self.options.value = formatValue(event.value);
-        if (self.options.type == 'input') {
-            self.options.value = self.options.value.replace(/ /g, '&nbsp;');
-        } else if (Ox.endsWith(self.options.value, '\n')) {
-            self.options.value += '&nbsp;';
-        }
         self.$value.html(
             self.options.format
             ? self.options.format(self.options.value)
             : self.options.value
         );
-        height = self.$value.height();
+        self.$test.html(self.options.value.replace(/ /g, '&nbsp;'));
-        width = self.$value.width();
+        height = self.$test.height();
+        height = Math.max(self.$test.height(), 14);
+        width = Math.max(self.$test.width() + 2, 8);
+        Ox.print('wxh', width, height)
         if (self.options.type == 'input') {
             self.$input.options({
-                height: height,
+                width: width
-                width: width + 2
             });
-            self.$input.find('input').css({width: width + 2 + 'px'});
+            self.$input.find('input').css({width: width + 'px'});
         } else {
             self.$input.options({
                 height: height,
@@ -102,7 +116,7 @@ Ox.Editable = function(options, self) {
             });
         }
         
-        self.$input.find('input').css({width: width + 2})
+        //self.$input.find('input').css({width: width + 2})
         
         /*
         that.triggerEvent('change', {
@@ -137,6 +151,16 @@ Ox.Editable = function(options, self) {
         }
     }
 
+    function formatValue(value) {
+        if (self.options.type == 'input') {
+            value = value.replace(/ /g, '&nbsp;');
+        } else {
+            value = value.replace(/\n/g, '<br/>')
+                .replace(/<br\/>$/, '<br/>&nbsp;');
+        }
+        return value;
+    }
+
     function submit() {
         self.options.value = self.$input.value();
         self.$value.html(

source/Ox.UI/js/Window/Ox.Dialog.js

@@ -46,6 +46,8 @@ Ox.Dialog = function(options, self) {
 
     self.hasButtons = !!self.options.buttons.length;
     self.barsHeight = 24 + 24 * self.hasButtons;
+    self.initialMaxHeight = self.options.maxHeight;
+    self.initialMaxWidth = self.options.maxWidth;
     self.titleMargin = 8 + (self.options.closeButton ? 20 : 0)
         + (self.options.maximizeButton ? 20 : 0);
 
@@ -629,15 +631,9 @@ Ox.Dialog = function(options, self) {
         return that;
     };
 
-    that.fullscreen = function() {
-        
-    };
-
     that.open = function() {
         self.initialHeight = self.options.height;    
         self.initialWidth = self.options.width;
-        self.initialMaxHeight = self.options.maxHeight;
-        self.initialMaxWidth = self.options.maxWidth;
         setMinAndMax();
         center();
         reset();