/**
* @class Roo
* Roo core utilities and functions.
- * @singleton
+ * @static
*/
var Roo = {};
/**
return 'xs'
}
- }
+ }
});
Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
"Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout",
- "Roo.app", "Roo.ux",
- "Roo.bootstrap",
- "Roo.bootstrap.dash");
+ "Roo.app", "Roo.ux"
+ );
/*
* Based on:
* Ext JS Library 1.1.1
);
};
+
+/**
+ * Make the first letter of a string uppercase
+ *
+ * @return {String} The new string.
+ */
+String.prototype.toUpperCaseFirst = function () {
+ return this.charAt(0).toUpperCase() + this.slice(1);
+};
+
/*
* Based on:
* Ext JS Library 1.1.1
*/
equals : function(b)
{
- // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
- if (this === b) {
- return true;
- }
- if (b == null) {
- return false;
- }
- if (this.length !== b.length) {
- return false;
- }
-
- // sort?? a.sort().equals(b.sort());
+ // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
+ if (this === b) {
+ return true;
+ }
+ if (b == null) {
+ return false;
+ }
+ if (this.length !== b.length) {
+ return false;
+ }
+
+ // sort?? a.sort().equals(b.sort());
+
+ for (var i = 0; i < this.length; ++i) {
+ if (this[i] !== b[i]) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+
+
+
+});
+
+Roo.applyIf(Array, {
+ /**
+ * from
+ * @static
+ * @param {Array} o Or Array like object (eg. nodelist)
+ * @returns {Array}
+ */
+ from : function(o)
+ {
+ var ret= [];
+
+ for (var i =0; i < o.length; i++) {
+ ret[i] = o[i];
+ }
+ return ret;
- for (var i = 0; i < this.length; ++i) {
- if (this[i] !== b[i]) {
- return false;
- }
- }
- return true;
}
});
-
-
-
/*
* Based on:
* Ext JS Library 1.1.1
/**
Returns the number of milliseconds between this date and date
@param {Date} date (optional) Defaults to now
- @return {Number} The diff in milliseconds
+ @param {String} interval (optional) Default Date.MILLI, A valid date interval enum value (eg. Date.DAY)
+ @return {Number} The diff in milliseconds or units of interval
@member Date getElapsed
*/
-Date.prototype.getElapsed = function(date) {
- return Math.abs((date || new Date()).getTime()-this.getTime());
+Date.prototype.getElapsed = function(date, interval)
+{
+ date = date || new Date();
+ var ret = Math.abs(date.getTime()-this.getTime());
+ switch (interval) {
+
+ case Date.SECOND:
+ return Math.floor(ret / (1000));
+ case Date.MINUTE:
+ return Math.floor(ret / (1000*60));
+ case Date.HOUR:
+ return Math.floor(ret / (1000*60*60));
+ case Date.DAY:
+ return Math.floor(ret / (1000*60*60*24));
+ case Date.MONTH: // this does not give exact number...??
+ return ((date.format("Y") - this.format("Y")) * 12) + (date.format("m") - this.format("m"));
+ case Date.YEAR: // this does not give exact number...??
+ return (date.format("Y") - this.format("Y"));
+
+ case Date.MILLI:
+ default:
+ return ret;
+ }
};
+
// was in date file..
}
code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
- + "{v = new Date(y, m, d, h, i, s);}\n"
+ + "{v = new Date(y, m, d, h, i, s); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
- + "{v = new Date(y, m, d, h, i);}\n"
+ + "{v = new Date(y, m, d, h, i); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
- + "{v = new Date(y, m, d, h);}\n"
+ + "{v = new Date(y, m, d, h); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0 && d > 0)\n"
- + "{v = new Date(y, m, d);}\n"
+ + "{v = new Date(y, m, d); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0)\n"
- + "{v = new Date(y, m);}\n"
+ + "{v = new Date(y, m); v.setFullYear(y);}\n"
+ "else if (y >= 0)\n"
- + "{v = new Date(y);}\n"
+ + "{v = new Date(y); v.setFullYear(y);}\n"
+ "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
+ " ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
+ " v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
case "m":
return {g:1,
- c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
+ c:"m = Math.max(0,parseInt(results[" + currentGroup + "], 10) - 1);\n",
s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
case "t":
return {g:0,
}
return d;
};
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
/**
* @class Roo.lib.Dom
+ * @licence LGPL
* @static
*
* Dom utils (from YIU afaik)
+ *
*
**/
Roo.lib.Dom = {
getViewHeight : function(full) {
return full ? this.getDocumentHeight() : this.getViewportHeight();
},
-
+ /**
+ * Get the Full Document height
+ * @return {Number} The height
+ */
getDocumentHeight: function() {
var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
return Math.max(scrollHeight, this.getViewportHeight());
},
-
+ /**
+ * Get the Full Document width
+ * @return {Number} The width
+ */
getDocumentWidth: function() {
var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
return Math.max(scrollWidth, this.getViewportWidth());
},
-
+ /**
+ * Get the Window Viewport height
+ * @return {Number} The height
+ */
getViewportHeight: function() {
var height = self.innerHeight;
var mode = document.compatMode;
return height;
},
-
+ /**
+ * Get the Window Viewport width
+ * @return {Number} The width
+ */
getViewportWidth: function() {
var width = self.innerWidth;
var mode = document.compatMode;
E._tryPreloadAttach();
})();
-/*
- * Portions of this file are based on pieces of Yahoo User Interface Library
- * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
- * YUI licensed under the BSD License:
- * http://developer.yahoo.net/yui/license.txt
- * <script type="text/javascript">
- *
- */
+
(function() {
/**
* @class Roo.lib.Ajax
+ *
+ * provide a simple Ajax request utility functions
+ *
+ * Portions of this file are based on pieces of Yahoo User Interface Library
+ * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
+ * YUI licensed under the BSD License:
+ * http://developer.yahoo.net/yui/license.txt
+ * <script type="text/javascript">
+ *
*
*/
Roo.lib.Ajax = {
return this.asyncRequest(method, uri, cb, data);
},
-
+ /**
+ * serialize a form
+ *
+ * @static
+ * @param {DomForm} form element
+ * @return {String} urlencode form output.
+ */
serializeForm : function(form) {
if(typeof form == 'string') {
form = (document.getElementById(form) || document.forms[form]);
return [ tmp[0][0], tmp[0][1] ];
};
- };/*
+ };
+
+/**
+ * @class Roo.lib.Color
+ * @constructor
+ * An abstract Color implementation. Concrete Color implementations should use
+ * an instance of this function as their prototype, and implement the getRGB and
+ * getHSL functions. getRGB should return an object representing the RGB
+ * components of this Color, with the red, green, and blue components in the
+ * range [0,255] and the alpha component in the range [0,100]. getHSL should
+ * return an object representing the HSL components of this Color, with the hue
+ * component in the range [0,360), the saturation and lightness components in
+ * the range [0,100], and the alpha component in the range [0,1].
+ *
+ *
+ * Color.js
+ *
+ * Functions for Color handling and processing.
+ *
+ * http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
+ *
+ * The author of this program, Safalra (Stephen Morley), irrevocably releases all
+ * rights to this program, with the intention of it becoming part of the public
+ * domain. Because this program is released into the public domain, it comes with
+ * no warranty either expressed or implied, to the extent permitted by law.
+ *
+ * For more free and public domain JavaScript code by the same author, visit:
+ * http://www.safalra.com/web-design/javascript/
+ *
+ */
+Roo.lib.Color = function() { }
+
+
+Roo.apply(Roo.lib.Color.prototype, {
+
+ rgb : null,
+ hsv : null,
+ hsl : null,
+
+ /**
+ * getIntegerRGB
+ * @return {Object} an object representing the RGBA components of this Color. The red,
+ * green, and blue components are converted to integers in the range [0,255].
+ * The alpha is a value in the range [0,1].
+ */
+ getIntegerRGB : function(){
+
+ // get the RGB components of this Color
+ var rgb = this.getRGB();
+
+ // return the integer components
+ return {
+ 'r' : Math.round(rgb.r),
+ 'g' : Math.round(rgb.g),
+ 'b' : Math.round(rgb.b),
+ 'a' : rgb.a
+ };
+
+ },
+
+ /**
+ * getPercentageRGB
+ * @return {Object} an object representing the RGBA components of this Color. The red,
+ * green, and blue components are converted to numbers in the range [0,100].
+ * The alpha is a value in the range [0,1].
+ */
+ getPercentageRGB : function(){
+
+ // get the RGB components of this Color
+ var rgb = this.getRGB();
+
+ // return the percentage components
+ return {
+ 'r' : 100 * rgb.r / 255,
+ 'g' : 100 * rgb.g / 255,
+ 'b' : 100 * rgb.b / 255,
+ 'a' : rgb.a
+ };
+
+ },
+
+ /**
+ * getCSSHexadecimalRGB
+ * @return {String} a string representing this Color as a CSS hexadecimal RGB Color
+ * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
+ * are two-digit hexadecimal numbers.
+ */
+ getCSSHexadecimalRGB : function()
+ {
+
+ // get the integer RGB components
+ var rgb = this.getIntegerRGB();
+
+ // determine the hexadecimal equivalents
+ var r16 = rgb.r.toString(16);
+ var g16 = rgb.g.toString(16);
+ var b16 = rgb.b.toString(16);
+
+ // return the CSS RGB Color value
+ return '#'
+ + (r16.length == 2 ? r16 : '0' + r16)
+ + (g16.length == 2 ? g16 : '0' + g16)
+ + (b16.length == 2 ? b16 : '0' + b16);
+
+ },
+
+ /**
+ * getCSSIntegerRGB
+ * @return {String} a string representing this Color as a CSS integer RGB Color
+ * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
+ * are integers in the range [0,255].
+ */
+ getCSSIntegerRGB : function(){
+
+ // get the integer RGB components
+ var rgb = this.getIntegerRGB();
+
+ // return the CSS RGB Color value
+ return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+
+ },
+
+ /**
+ * getCSSIntegerRGBA
+ * @return {String} Returns a string representing this Color as a CSS integer RGBA Color
+ * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
+ * b are integers in the range [0,255] and a is in the range [0,1].
+ */
+ getCSSIntegerRGBA : function(){
+
+ // get the integer RGB components
+ var rgb = this.getIntegerRGB();
+
+ // return the CSS integer RGBA Color value
+ return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
+
+ },
+
+ /**
+ * getCSSPercentageRGB
+ * @return {String} a string representing this Color as a CSS percentage RGB Color
+ * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
+ * b are in the range [0,100].
+ */
+ getCSSPercentageRGB : function(){
+
+ // get the percentage RGB components
+ var rgb = this.getPercentageRGB();
+
+ // return the CSS RGB Color value
+ return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
+
+ },
+
+ /**
+ * getCSSPercentageRGBA
+ * @return {String} a string representing this Color as a CSS percentage RGBA Color
+ * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
+ * and b are in the range [0,100] and a is in the range [0,1].
+ */
+ getCSSPercentageRGBA : function(){
+
+ // get the percentage RGB components
+ var rgb = this.getPercentageRGB();
+
+ // return the CSS percentage RGBA Color value
+ return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
+
+ },
+
+ /**
+ * getCSSHSL
+ * @return {String} a string representing this Color as a CSS HSL Color value - that
+ * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
+ * s and l are in the range [0,100].
+ */
+ getCSSHSL : function(){
+
+ // get the HSL components
+ var hsl = this.getHSL();
+
+ // return the CSS HSL Color value
+ return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
+
+ },
+
+ /**
+ * getCSSHSLA
+ * @return {String} a string representing this Color as a CSS HSLA Color value - that
+ * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
+ * s and l are in the range [0,100], and a is in the range [0,1].
+ */
+ getCSSHSLA : function(){
+
+ // get the HSL components
+ var hsl = this.getHSL();
+
+ // return the CSS HSL Color value
+ return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
+
+ },
+
+ /**
+ * Sets the Color of the specified node to this Color. This functions sets
+ * the CSS 'color' property for the node. The parameter is:
+ *
+ * @param {DomElement} node - the node whose Color should be set
+ */
+ setNodeColor : function(node){
+
+ // set the Color of the node
+ node.style.color = this.getCSSHexadecimalRGB();
+
+ },
+
+ /**
+ * Sets the background Color of the specified node to this Color. This
+ * functions sets the CSS 'background-color' property for the node. The
+ * parameter is:
+ *
+ * @param {DomElement} node - the node whose background Color should be set
+ */
+ setNodeBackgroundColor : function(node){
+
+ // set the background Color of the node
+ node.style.backgroundColor = this.getCSSHexadecimalRGB();
+
+ },
+ // convert between formats..
+ toRGB: function()
+ {
+ var r = this.getIntegerRGB();
+ return new Roo.lib.RGBColor(r.r,r.g,r.b,r.a);
+
+ },
+ toHSL : function()
+ {
+ var hsl = this.getHSL();
+ // return the CSS HSL Color value
+ return new Roo.lib.HSLColor(hsl.h, hsl.s, hsl.l , hsl.a );
+
+ },
+
+ toHSV : function()
+ {
+ var rgb = this.toRGB();
+ var hsv = rgb.getHSV();
+ // return the CSS HSL Color value
+ return new Roo.lib.HSVColor(hsv.h, hsv.s, hsv.v , hsv.a );
+
+ },
+
+ // modify v = 0 ... 1 (eg. 0.5)
+ saturate : function(v)
+ {
+ var rgb = this.toRGB();
+ var hsv = rgb.getHSV();
+ return new Roo.lib.HSVColor(hsv.h, hsv.s * v, hsv.v , hsv.a );
+
+
+ },
+
+
+ /**
+ * getRGB
+ * @return {Object} the RGB and alpha components of this Color as an object with r,
+ * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
+ * the range [0,1].
+ */
+ getRGB: function(){
+
+ // return the RGB components
+ return {
+ 'r' : this.rgb.r,
+ 'g' : this.rgb.g,
+ 'b' : this.rgb.b,
+ 'a' : this.alpha
+ };
+
+ },
+
+ /**
+ * getHSV
+ * @return {Object} the HSV and alpha components of this Color as an object with h,
+ * s, v, and a properties. h is in the range [0,360), s and v are in the range
+ * [0,100], and a is in the range [0,1].
+ */
+ getHSV : function()
+ {
+
+ // calculate the HSV components if necessary
+ if (this.hsv == null) {
+ this.calculateHSV();
+ }
+
+ // return the HSV components
+ return {
+ 'h' : this.hsv.h,
+ 's' : this.hsv.s,
+ 'v' : this.hsv.v,
+ 'a' : this.alpha
+ };
+
+ },
+
+ /**
+ * getHSL
+ * @return {Object} the HSL and alpha components of this Color as an object with h,
+ * s, l, and a properties. h is in the range [0,360), s and l are in the range
+ * [0,100], and a is in the range [0,1].
+ */
+ getHSL : function(){
+
+
+ // calculate the HSV components if necessary
+ if (this.hsl == null) { this.calculateHSL(); }
+
+ // return the HSL components
+ return {
+ 'h' : this.hsl.h,
+ 's' : this.hsl.s,
+ 'l' : this.hsl.l,
+ 'a' : this.alpha
+ };
+
+ }
+
+
+});
+
+
+/**
+ * @class Roo.lib.RGBColor
+ * @extends Roo.lib.Color
+ * Creates a Color specified in the RGB Color space, with an optional alpha
+ * component. The parameters are:
+ * @constructor
+ *
+
+ * @param {Number} r - the red component, clipped to the range [0,255]
+ * @param {Number} g - the green component, clipped to the range [0,255]
+ * @param {Number} b - the blue component, clipped to the range [0,255]
+ * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
+ * optional and defaults to 1
+ */
+Roo.lib.RGBColor = function (r, g, b, a){
+
+ // store the alpha component after clipping it if necessary
+ this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
+
+ // store the RGB components after clipping them if necessary
+ this.rgb =
+ {
+ 'r' : Math.max(0, Math.min(255, r)),
+ 'g' : Math.max(0, Math.min(255, g)),
+ 'b' : Math.max(0, Math.min(255, b))
+ };
+
+ // initialise the HSV and HSL components to null
+
+
+ /*
+ * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
+ * range [0,360). The parameters are:
+ *
+ * maximum - the maximum of the RGB component values
+ * range - the range of the RGB component values
+ */
+
+
+}
+// this does an 'exteds'
+Roo.extend(Roo.lib.RGBColor, Roo.lib.Color, {
+
+
+ getHue : function(maximum, range)
+ {
+ var rgb = this.rgb;
+
+ // check whether the range is zero
+ if (range == 0){
+
+ // set the hue to zero (any hue is acceptable as the Color is grey)
+ var hue = 0;
+
+ }else{
+
+ // determine which of the components has the highest value and set the hue
+ switch (maximum){
+
+ // red has the highest value
+ case rgb.r:
+ var hue = (rgb.g - rgb.b) / range * 60;
+ if (hue < 0) { hue += 360; }
+ break;
+
+ // green has the highest value
+ case rgb.g:
+ var hue = (rgb.b - rgb.r) / range * 60 + 120;
+ break;
+
+ // blue has the highest value
+ case rgb.b:
+ var hue = (rgb.r - rgb.g) / range * 60 + 240;
+ break;
+
+ }
+
+ }
+
+ // return the hue
+ return hue;
+
+ },
+
+ /* //private Calculates and stores the HSV components of this RGBColor so that they can
+ * be returned be the getHSV function.
+ */
+ calculateHSV : function(){
+ var rgb = this.rgb;
+ // get the maximum and range of the RGB component values
+ var maximum = Math.max(rgb.r, rgb.g, rgb.b);
+ var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
+
+ // store the HSV components
+ this.hsv =
+ {
+ 'h' : this.getHue(maximum, range),
+ 's' : (maximum == 0 ? 0 : 100 * range / maximum),
+ 'v' : maximum / 2.55
+ };
+
+ },
+
+ /* //private Calculates and stores the HSL components of this RGBColor so that they can
+ * be returned be the getHSL function.
+ */
+ calculateHSL : function(){
+ var rgb = this.rgb;
+ // get the maximum and range of the RGB component values
+ var maximum = Math.max(rgb.r, rgb.g, rgb.b);
+ var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
+
+ // determine the lightness in the range [0,1]
+ var l = maximum / 255 - range / 510;
+
+ // store the HSL components
+ this.hsl =
+ {
+ 'h' : this.getHue(maximum, range),
+ 's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
+ 'l' : 100 * l
+ };
+
+ }
+
+});
+
+/**
+ * @class Roo.lib.HSVColor
+ * @extends Roo.lib.Color
+ * Creates a Color specified in the HSV Color space, with an optional alpha
+ * component. The parameters are:
+ * @constructor
+ *
+ * @param {Number} h - the hue component, wrapped to the range [0,360)
+ * @param {Number} s - the saturation component, clipped to the range [0,100]
+ * @param {Number} v - the value component, clipped to the range [0,100]
+ * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
+ * optional and defaults to 1
+ */
+Roo.lib.HSVColor = function (h, s, v, a){
+
+ // store the alpha component after clipping it if necessary
+ this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
+
+ // store the HSV components after clipping or wrapping them if necessary
+ this.hsv =
+ {
+ 'h' : (h % 360 + 360) % 360,
+ 's' : Math.max(0, Math.min(100, s)),
+ 'v' : Math.max(0, Math.min(100, v))
+ };
+
+ // initialise the RGB and HSL components to null
+ this.rgb = null;
+ this.hsl = null;
+}
+
+Roo.extend(Roo.lib.HSVColor, Roo.lib.Color, {
+ /* Calculates and stores the RGB components of this HSVColor so that they can
+ * be returned be the getRGB function.
+ */
+ calculateRGB: function ()
+ {
+ var hsv = this.hsv;
+ // check whether the saturation is zero
+ if (hsv.s == 0){
+
+ // set the Color to the appropriate shade of grey
+ var r = hsv.v;
+ var g = hsv.v;
+ var b = hsv.v;
+
+ }else{
+
+ // set some temporary values
+ var f = hsv.h / 60 - Math.floor(hsv.h / 60);
+ var p = hsv.v * (1 - hsv.s / 100);
+ var q = hsv.v * (1 - hsv.s / 100 * f);
+ var t = hsv.v * (1 - hsv.s / 100 * (1 - f));
+
+ // set the RGB Color components to their temporary values
+ switch (Math.floor(hsv.h / 60)){
+ case 0: var r = hsv.v; var g = t; var b = p; break;
+ case 1: var r = q; var g = hsv.v; var b = p; break;
+ case 2: var r = p; var g = hsv.v; var b = t; break;
+ case 3: var r = p; var g = q; var b = hsv.v; break;
+ case 4: var r = t; var g = p; var b = hsv.v; break;
+ case 5: var r = hsv.v; var g = p; var b = q; break;
+ }
+
+ }
+
+ // store the RGB components
+ this.rgb =
+ {
+ 'r' : r * 2.55,
+ 'g' : g * 2.55,
+ 'b' : b * 2.55
+ };
+
+ },
+
+ /* Calculates and stores the HSL components of this HSVColor so that they can
+ * be returned be the getHSL function.
+ */
+ calculateHSL : function (){
+
+ var hsv = this.hsv;
+ // determine the lightness in the range [0,100]
+ var l = (2 - hsv.s / 100) * hsv.v / 2;
+
+ // store the HSL components
+ this.hsl =
+ {
+ 'h' : hsv.h,
+ 's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
+ 'l' : l
+ };
+
+ // correct a division-by-zero error
+ if (isNaN(hsl.s)) { hsl.s = 0; }
+
+ }
+
+
+});
+
+
+/**
+ * @class Roo.lib.HSLColor
+ * @extends Roo.lib.Color
+ *
+ * @constructor
+ * Creates a Color specified in the HSL Color space, with an optional alpha
+ * component. The parameters are:
+ *
+ * @param {Number} h - the hue component, wrapped to the range [0,360)
+ * @param {Number} s - the saturation component, clipped to the range [0,100]
+ * @param {Number} l - the lightness component, clipped to the range [0,100]
+ * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
+ * optional and defaults to 1
+ */
+
+Roo.lib.HSLColor = function(h, s, l, a){
+
+ // store the alpha component after clipping it if necessary
+ this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
+
+ // store the HSL components after clipping or wrapping them if necessary
+ this.hsl =
+ {
+ 'h' : (h % 360 + 360) % 360,
+ 's' : Math.max(0, Math.min(100, s)),
+ 'l' : Math.max(0, Math.min(100, l))
+ };
+
+ // initialise the RGB and HSV components to null
+}
+
+Roo.extend(Roo.lib.HSLColor, Roo.lib.Color, {
+
+ /* Calculates and stores the RGB components of this HSLColor so that they can
+ * be returned be the getRGB function.
+ */
+ calculateRGB: function (){
+
+ // check whether the saturation is zero
+ if (this.hsl.s == 0){
+
+ // store the RGB components representing the appropriate shade of grey
+ this.rgb =
+ {
+ 'r' : this.hsl.l * 2.55,
+ 'g' : this.hsl.l * 2.55,
+ 'b' : this.hsl.l * 2.55
+ };
+
+ }else{
+
+ // set some temporary values
+ var p = this.hsl.l < 50
+ ? this.hsl.l * (1 + hsl.s / 100)
+ : this.hsl.l + hsl.s - hsl.l * hsl.s / 100;
+ var q = 2 * hsl.l - p;
+
+ // initialise the RGB components
+ this.rgb =
+ {
+ 'r' : (h + 120) / 60 % 6,
+ 'g' : h / 60,
+ 'b' : (h + 240) / 60 % 6
+ };
+
+ // loop over the RGB components
+ for (var key in this.rgb){
+
+ // ensure that the property is not inherited from the root object
+ if (this.rgb.hasOwnProperty(key)){
+
+ // set the component to its value in the range [0,100]
+ if (this.rgb[key] < 1){
+ this.rgb[key] = q + (p - q) * this.rgb[key];
+ }else if (this.rgb[key] < 3){
+ this.rgb[key] = p;
+ }else if (this.rgb[key] < 4){
+ this.rgb[key] = q + (p - q) * (4 - this.rgb[key]);
+ }else{
+ this.rgb[key] = q;
+ }
+
+ // set the component to its value in the range [0,255]
+ this.rgb[key] *= 2.55;
+
+ }
+
+ }
+
+ }
+
+ },
+
+ /* Calculates and stores the HSV components of this HSLColor so that they can
+ * be returned be the getHSL function.
+ */
+ calculateHSV : function(){
+
+ // set a temporary value
+ var t = this.hsl.s * (this.hsl.l < 50 ? this.hsl.l : 100 - this.hsl.l) / 100;
+
+ // store the HSV components
+ this.hsv =
+ {
+ 'h' : this.hsl.h,
+ 's' : 200 * t / (this.hsl.l + t),
+ 'v' : t + this.hsl.l
+ };
+
+ // correct a division-by-zero error
+ if (isNaN(this.hsv.s)) { this.hsv.s = 0; }
+
+ }
+
+
+});
+/*
* Portions of this file are based on pieces of Yahoo User Interface Library
* Copyright (c) 2007, Yahoo! Inc. All rights reserved.
* YUI licensed under the BSD License:
}
};
})();
-/*
+/**
+ * Originally based of this code... - refactored for Roo...
+ * https://github.com/aaalsaleh/undo-manager
+
+ * undo-manager.js
+ * @author Abdulrahman Alsaleh
+ * @copyright 2015 Abdulrahman Alsaleh
+ * @license MIT License (c)
+ *
+ * Hackily modifyed by alan@roojs.com
+ *
+ *
+ *
+ *
+ * TOTALLY UNTESTED...
+ *
+ * Documentation to be done....
+ */
+
+
+/**
+* @class Roo.lib.UndoManager
+* An undo manager implementation in JavaScript. It follows the W3C UndoManager and DOM Transaction
+* Draft and the undocumented and disabled Mozilla Firefox's UndoManager implementation.
+
+ * Usage:
+ * <pre><code>
+
+
+editor.undoManager = new Roo.lib.UndoManager(1000, editor);
+
+</code></pre>
+
+* For more information see this blog post with examples:
+* <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
+ - Create Elements using DOM, HTML fragments and Templates</a>.
+* @constructor
+* @param {Number} limit how far back to go ... use 1000?
+* @param {Object} scope usually use document..
+*/
+
+Roo.lib.UndoManager = function (limit, undoScopeHost)
+{
+ this.stack = [];
+ this.limit = limit;
+ this.scope = undoScopeHost;
+ this.fireEvent = typeof CustomEvent != 'undefined' && undoScopeHost && undoScopeHost.dispatchEvent;
+ if (this.fireEvent) {
+ this.bindEvents();
+ }
+ this.reset();
+
+};
+
+Roo.lib.UndoManager.prototype = {
+
+ limit : false,
+ stack : false,
+ scope : false,
+ fireEvent : false,
+ position : 0,
+ length : 0,
+
+
+ /**
+ * To push and execute a transaction, the method undoManager.transact
+ * must be called by passing a transaction object as the first argument, and a merge
+ * flag as the second argument. A transaction object has the following properties:
+ *
+ * Usage:
+<pre><code>
+undoManager.transact({
+ label: 'Typing',
+ execute: function() { ... },
+ undo: function() { ... },
+ // redo same as execute
+ redo: function() { this.execute(); }
+}, false);
+
+// merge transaction
+undoManager.transact({
+ label: 'Typing',
+ execute: function() { ... }, // this will be run...
+ undo: function() { ... }, // what to do when undo is run.
+ // redo same as execute
+ redo: function() { this.execute(); }
+}, true);
+</code></pre>
+ *
+ *
+ * @param {Object} transaction The transaction to add to the stack.
+ * @return {String} The HTML fragment
+ */
+
+
+ transact : function (transaction, merge)
+ {
+ if (arguments.length < 2) {
+ throw new TypeError('Not enough arguments to UndoManager.transact.');
+ }
+
+ transaction.execute();
+
+ this.stack.splice(0, this.position);
+ if (merge && this.length) {
+ this.stack[0].push(transaction);
+ } else {
+ this.stack.unshift([transaction]);
+ }
+
+ this.position = 0;
+
+ if (this.limit && this.stack.length > this.limit) {
+ this.length = this.stack.length = this.limit;
+ } else {
+ this.length = this.stack.length;
+ }
+
+ if (this.fireEvent) {
+ this.scope.dispatchEvent(
+ new CustomEvent('DOMTransaction', {
+ detail: {
+ transactions: this.stack[0].slice()
+ },
+ bubbles: true,
+ cancelable: false
+ })
+ );
+ }
+
+ //Roo.log("transaction: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
+
+
+ },
+
+ undo : function ()
+ {
+ //Roo.log("undo: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
+
+ if (this.position < this.length) {
+ for (var i = this.stack[this.position].length - 1; i >= 0; i--) {
+ this.stack[this.position][i].undo();
+ }
+ this.position++;
+
+ if (this.fireEvent) {
+ this.scope.dispatchEvent(
+ new CustomEvent('undo', {
+ detail: {
+ transactions: this.stack[this.position - 1].slice()
+ },
+ bubbles: true,
+ cancelable: false
+ })
+ );
+ }
+ }
+ },
+
+ redo : function ()
+ {
+ if (this.position > 0) {
+ for (var i = 0, n = this.stack[this.position - 1].length; i < n; i++) {
+ this.stack[this.position - 1][i].redo();
+ }
+ this.position--;
+
+ if (this.fireEvent) {
+ this.scope.dispatchEvent(
+ new CustomEvent('redo', {
+ detail: {
+ transactions: this.stack[this.position].slice()
+ },
+ bubbles: true,
+ cancelable: false
+ })
+ );
+ }
+ }
+ },
+
+ item : function (index)
+ {
+ if (index >= 0 && index < this.length) {
+ return this.stack[index].slice();
+ }
+ return null;
+ },
+
+ clearUndo : function () {
+ this.stack.length = this.length = this.position;
+ },
+
+ clearRedo : function () {
+ this.stack.splice(0, this.position);
+ this.position = 0;
+ this.length = this.stack.length;
+ },
+ /**
+ * Reset the undo - probaly done on load to clear all history.
+ */
+ reset : function()
+ {
+ this.stack = [];
+ this.position = 0;
+ this.length = 0;
+ this.current_html = this.scope.innerHTML;
+ if (this.timer !== false) {
+ clearTimeout(this.timer);
+ }
+ this.timer = false;
+ this.merge = false;
+ this.addEvent();
+
+ },
+ current_html : '',
+ timer : false,
+ merge : false,
+
+
+ // this will handle the undo/redo on the element.?
+ bindEvents : function()
+ {
+ var el = this.scope;
+ el.undoManager = this;
+
+
+ this.scope.addEventListener('keydown', function(e) {
+ if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ if (e.shiftKey) {
+ el.undoManager.redo(); // Ctrl/Command + Shift + Z
+ } else {
+ el.undoManager.undo(); // Ctrl/Command + Z
+ }
+
+ e.preventDefault();
+ }
+ });
+ /// ignore keyup..
+ this.scope.addEventListener('keyup', function(e) {
+ if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ e.preventDefault();
+ }
+ });
+
+
+
+ var t = this;
+
+ el.addEventListener('input', function(e) {
+ if(el.innerHTML == t.current_html) {
+ return;
+ }
+ // only record events every second.
+ if (t.timer !== false) {
+ clearTimeout(t.timer);
+ t.timer = false;
+ }
+ t.timer = setTimeout(function() { t.merge = false; }, 1000);
+
+ t.addEvent(t.merge);
+ t.merge = true; // ignore changes happening every second..
+ });
+ },
+ /**
+ * Manually add an event.
+ * Normall called without arguements - and it will just get added to the stack.
+ *
+ */
+
+ addEvent : function(merge)
+ {
+ //Roo.log("undomanager +" + (merge ? 'Y':'n'));
+ // not sure if this should clear the timer
+ merge = typeof(merge) == 'undefined' ? false : merge;
+
+ this.scope.undoManager.transact({
+ scope : this.scope,
+ oldHTML: this.current_html,
+ newHTML: this.scope.innerHTML,
+ // nothing to execute (content already changed when input is fired)
+ execute: function() { },
+ undo: function() {
+ this.scope.innerHTML = this.current_html = this.oldHTML;
+ },
+ redo: function() {
+ this.scope.innerHTML = this.current_html = this.newHTML;
+ }
+ }, false); //merge);
+
+ this.merge = merge;
+
+ this.current_html = this.scope.innerHTML;
+ }
+
+
+
+
+
+
+};
+/**
+ * @class Roo.lib.Range
+ * @constructor
+ * This is a toolkit, normally used to copy features into a Dom Range element
+ * Roo.lib.Range.wrap(x);
+ *
+ *
+ *
+ */
+Roo.lib.Range = function() { };
+
+/**
+ * Wrap a Dom Range object, to give it new features...
+ * @static
+ * @param {Range} the range to wrap
+ */
+Roo.lib.Range.wrap = function(r) {
+ return Roo.apply(r, Roo.lib.Range.prototype);
+};
+/**
+ * find a parent node eg. LI / OL
+ * @param {string|Array} node name or array of nodenames
+ * @return {DomElement|false}
+ */
+Roo.apply(Roo.lib.Range.prototype,
+{
+
+ closest : function(str)
+ {
+ if (typeof(str) != 'string') {
+ // assume it's a array.
+ for(var i = 0;i < str.length;i++) {
+ var r = this.closest(str[i]);
+ if (r !== false) {
+ return r;
+ }
+
+ }
+ return false;
+ }
+ str = str.toLowerCase();
+ var n = this.commonAncestorContainer; // might not be a node
+ while (n.nodeType != 1) {
+ n = n.parentNode;
+ }
+
+ if (n.nodeName.toLowerCase() == str ) {
+ return n;
+ }
+ if (n.nodeName.toLowerCase() == 'body') {
+ return false;
+ }
+
+ return n.closest(str) || false;
+
+ },
+ cloneRange : function()
+ {
+ return Roo.lib.Range.wrap(Range.prototype.cloneRange.call(this));
+ }
+});/**
+ * @class Roo.lib.Selection
+ * @constructor
+ * This is a toolkit, normally used to copy features into a Dom Selection element
+ * Roo.lib.Selection.wrap(x);
+ *
+ *
+ *
+ */
+Roo.lib.Selection = function() { };
+
+/**
+ * Wrap a Dom Range object, to give it new features...
+ * @static
+ * @param {Range} the range to wrap
+ */
+Roo.lib.Selection.wrap = function(r, doc) {
+ Roo.apply(r, Roo.lib.Selection.prototype);
+ r.ownerDocument = doc; // usefull so we dont have to keep referening to it.
+ return r;
+};
+/**
+ * find a parent node eg. LI / OL
+ * @param {string|Array} node name or array of nodenames
+ * @return {DomElement|false}
+ */
+Roo.apply(Roo.lib.Selection.prototype,
+{
+ /**
+ * the owner document
+ */
+ ownerDocument : false,
+
+ getRangeAt : function(n)
+ {
+ return Roo.lib.Range.wrap(Selection.prototype.getRangeAt.call(this,n));
+ },
+
+ /**
+ * insert node at selection
+ * @param {DomElement|string} node
+ * @param {string} cursor (after|in|none) where to place the cursor after inserting.
+ */
+ insertNode: function(node, cursor)
+ {
+ if (typeof(node) == 'string') {
+ node = this.ownerDocument.createElement(node);
+ if (cursor == 'in') {
+ node.innerHTML = ' ';
+ }
+ }
+
+ var range = this.getRangeAt(0);
+
+ if (this.type != 'Caret') {
+ range.deleteContents();
+ }
+ var sn = node.childNodes[0]; // select the contents.
+
+
+
+ range.insertNode(node);
+ if (cursor == 'after') {
+ node.insertAdjacentHTML('afterend', ' ');
+ sn = node.nextSibling;
+ }
+
+ if (cursor == 'none') {
+ return;
+ }
+
+ this.cursorText(sn);
+ },
+
+ cursorText : function(n)
+ {
+
+ //var range = this.getRangeAt(0);
+ range = Roo.lib.Range.wrap(new Range());
+ //range.selectNode(n);
+
+ var ix = Array.from(n.parentNode.childNodes).indexOf(n);
+ range.setStart(n.parentNode,ix);
+ range.setEnd(n.parentNode,ix+1);
+ //range.collapse(false);
+
+ this.removeAllRanges();
+ this.addRange(range);
+
+ Roo.log([n, range, this,this.baseOffset,this.extentOffset, this.type]);
+ },
+ cursorAfter : function(n)
+ {
+ if (!n.nextSibling || n.nextSibling.nodeValue != ' ') {
+ n.insertAdjacentHTML('afterend', ' ');
+ }
+ this.cursorText (n.nextSibling);
+ }
+
+
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* @class Roo.DomHelper
* Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
* For more information see <a href="http://web.archive.org/web/20071221063734/http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">this blog post with examples</a>.
- * @singleton
+ * @static
*/
Roo.DomHelper = function(){
var tempTableEl = null;
if (typeof(o) == 'string') {
return parentNode.appendChild(document.createTextNode(o));
}
- o.tag = o.tag || div;
+ o.tag = o.tag || 'div';
if (o.ns && Roo.isIE) {
ns = false;
o.tag = o.ns + ':' + o.tag;
el.insertBefore(node, before);
return node;
};
+
+ // this is a bit like the react update code...
+ //
+
+ var updateNode = function(from, to)
+ {
+ // should we handle non-standard elements?
+ Roo.log(["UpdateNode" , from, to]);
+ if (from.nodeType != to.nodeType) {
+ Roo.log(["ReplaceChild - mismatch notType" , to, from ]);
+ from.parentNode.replaceChild(to, from);
+ }
+
+ if (from.nodeType == 3) {
+ // assume it's text?!
+ if (from.data == to.data) {
+ return;
+ }
+ from.data = to.data;
+ return;
+ }
+ if (!from.parentNode) {
+ // not sure why this is happening?
+ return;
+ }
+ // assume 'to' doesnt have '1/3 nodetypes!
+ // not sure why, by from, parent node might not exist?
+ if (from.nodeType !=1 || from.tagName != to.tagName) {
+ Roo.log(["ReplaceChild" , from, to ]);
+
+ from.parentNode.replaceChild(to, from);
+ return;
+ }
+ // compare attributes
+ var ar = Array.from(from.attributes);
+ for(var i = 0; i< ar.length;i++) {
+ if (to.hasAttribute(ar[i].name)) {
+ continue;
+ }
+ if (ar[i].name == 'id') { // always keep ids?
+ continue;
+ }
+ //if (ar[i].name == 'style') {
+ // throw "style removed?";
+ //}
+ Roo.log("removeAttribute" + ar[i].name);
+ from.removeAttribute(ar[i].name);
+ }
+ ar = to.attributes;
+ for(var i = 0; i< ar.length;i++) {
+ if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
+ Roo.log("skipAttribute " + ar[i].name + '=' + to.getAttribute(ar[i].name));
+ continue;
+ }
+ Roo.log("updateAttribute " + ar[i].name + '=>' + to.getAttribute(ar[i].name));
+ from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
+ }
+ // children
+ var far = Array.from(from.childNodes);
+ var tar = Array.from(to.childNodes);
+ // if the lengths are different.. then it's probably a editable content change, rather than
+ // a change of the block definition..
+
+ // this did notwork , as our rebuilt nodes did not include ID's so did not match at all.
+ /*if (from.innerHTML == to.innerHTML) {
+ return;
+ }
+ if (far.length != tar.length) {
+ from.innerHTML = to.innerHTML;
+ return;
+ }
+ */
+
+ for(var i = 0; i < Math.max(tar.length, far.length); i++) {
+ if (i >= far.length) {
+ from.appendChild(tar[i]);
+ Roo.log(["add", tar[i]]);
+
+ } else if ( i >= tar.length) {
+ from.removeChild(far[i]);
+ Roo.log(["remove", far[i]]);
+ } else {
+
+ updateNode(far[i], tar[i]);
+ }
+ }
+
+
+
+
+ };
+
+
return {
- /** True to force the use of DOM instead of html fragments @type Boolean */
- useDom : false,
-
- /**
- * Returns the markup for the passed Element(s) config
- * @param {Object} o The Dom object spec (and children)
- * @return {String}
- */
- markup : function(o){
- return createHtml(o);
- },
-
- /**
- * Applies a style specification to an element
- * @param {String/HTMLElement} el The element to apply styles to
- * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
- * a function which returns such a specification.
- */
- applyStyles : function(el, styles){
- if(styles){
- el = Roo.fly(el);
- if(typeof styles == "string"){
- var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
- var matches;
- while ((matches = re.exec(styles)) != null){
- el.setStyle(matches[1], matches[2]);
- }
- }else if (typeof styles == "object"){
- for (var style in styles){
- el.setStyle(style, styles[style]);
+ /** True to force the use of DOM instead of html fragments @type Boolean */
+ useDom : false,
+
+ /**
+ * Returns the markup for the passed Element(s) config
+ * @param {Object} o The Dom object spec (and children)
+ * @return {String}
+ */
+ markup : function(o){
+ return createHtml(o);
+ },
+
+ /**
+ * Applies a style specification to an element
+ * @param {String/HTMLElement} el The element to apply styles to
+ * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
+ * a function which returns such a specification.
+ */
+ applyStyles : function(el, styles){
+ if(styles){
+ el = Roo.fly(el);
+ if(typeof styles == "string"){
+ var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
+ var matches;
+ while ((matches = re.exec(styles)) != null){
+ el.setStyle(matches[1], matches[2]);
+ }
+ }else if (typeof styles == "object"){
+ for (var style in styles){
+ el.setStyle(style, styles[style]);
+ }
+ }else if (typeof styles == "function"){
+ Roo.DomHelper.applyStyles(el, styles.call());
}
- }else if (typeof styles == "function"){
- Roo.DomHelper.applyStyles(el, styles.call());
- }
- }
- },
-
- /**
- * Inserts an HTML fragment into the Dom
- * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
- * @param {HTMLElement} el The context element
- * @param {String} html The HTML fragmenet
- * @return {HTMLElement} The new node
- */
- insertHtml : function(where, el, html){
- where = where.toLowerCase();
- if(el.insertAdjacentHTML){
- if(tableRe.test(el.tagName)){
- var rs;
- if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
- return rs;
+ }
+ },
+
+ /**
+ * Inserts an HTML fragment into the Dom
+ * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
+ * @param {HTMLElement} el The context element
+ * @param {String} html The HTML fragmenet
+ * @return {HTMLElement} The new node
+ */
+ insertHtml : function(where, el, html){
+ where = where.toLowerCase();
+ if(el.insertAdjacentHTML){
+ if(tableRe.test(el.tagName)){
+ var rs;
+ if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
+ return rs;
+ }
+ }
+ switch(where){
+ case "beforebegin":
+ el.insertAdjacentHTML('BeforeBegin', html);
+ return el.previousSibling;
+ case "afterbegin":
+ el.insertAdjacentHTML('AfterBegin', html);
+ return el.firstChild;
+ case "beforeend":
+ el.insertAdjacentHTML('BeforeEnd', html);
+ return el.lastChild;
+ case "afterend":
+ el.insertAdjacentHTML('AfterEnd', html);
+ return el.nextSibling;
}
+ throw 'Illegal insertion point -> "' + where + '"';
}
+ var range = el.ownerDocument.createRange();
+ var frag;
switch(where){
- case "beforebegin":
- el.insertAdjacentHTML('BeforeBegin', html);
+ case "beforebegin":
+ range.setStartBefore(el);
+ frag = range.createContextualFragment(html);
+ el.parentNode.insertBefore(frag, el);
return el.previousSibling;
- case "afterbegin":
- el.insertAdjacentHTML('AfterBegin', html);
- return el.firstChild;
+ case "afterbegin":
+ if(el.firstChild){
+ range.setStartBefore(el.firstChild);
+ frag = range.createContextualFragment(html);
+ el.insertBefore(frag, el.firstChild);
+ return el.firstChild;
+ }else{
+ el.innerHTML = html;
+ return el.firstChild;
+ }
case "beforeend":
- el.insertAdjacentHTML('BeforeEnd', html);
- return el.lastChild;
+ if(el.lastChild){
+ range.setStartAfter(el.lastChild);
+ frag = range.createContextualFragment(html);
+ el.appendChild(frag);
+ return el.lastChild;
+ }else{
+ el.innerHTML = html;
+ return el.lastChild;
+ }
case "afterend":
- el.insertAdjacentHTML('AfterEnd', html);
- return el.nextSibling;
- }
- throw 'Illegal insertion point -> "' + where + '"';
- }
- var range = el.ownerDocument.createRange();
- var frag;
- switch(where){
- case "beforebegin":
- range.setStartBefore(el);
- frag = range.createContextualFragment(html);
- el.parentNode.insertBefore(frag, el);
- return el.previousSibling;
- case "afterbegin":
- if(el.firstChild){
- range.setStartBefore(el.firstChild);
+ range.setStartAfter(el);
frag = range.createContextualFragment(html);
- el.insertBefore(frag, el.firstChild);
- return el.firstChild;
- }else{
- el.innerHTML = html;
- return el.firstChild;
+ el.parentNode.insertBefore(frag, el.nextSibling);
+ return el.nextSibling;
}
- case "beforeend":
- if(el.lastChild){
- range.setStartAfter(el.lastChild);
- frag = range.createContextualFragment(html);
- el.appendChild(frag);
- return el.lastChild;
- }else{
- el.innerHTML = html;
- return el.lastChild;
+ throw 'Illegal insertion point -> "' + where + '"';
+ },
+
+ /**
+ * Creates new Dom element(s) and inserts them before el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ insertBefore : function(el, o, returnElement){
+ return this.doInsert(el, o, returnElement, "beforeBegin");
+ },
+
+ /**
+ * Creates new Dom element(s) and inserts them after el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object} o The Dom object spec (and children)
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ insertAfter : function(el, o, returnElement){
+ return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
+ },
+
+ /**
+ * Creates new Dom element(s) and inserts them as the first child of el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ insertFirst : function(el, o, returnElement){
+ return this.doInsert(el, o, returnElement, "afterBegin");
+ },
+
+ // private
+ doInsert : function(el, o, returnElement, pos, sibling){
+ el = Roo.getDom(el);
+ var newNode;
+ if(this.useDom || o.ns){
+ newNode = createDom(o, null);
+ el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
+ }else{
+ var html = createHtml(o);
+ newNode = this.insertHtml(pos, el, html);
+ }
+ return returnElement ? Roo.get(newNode, true) : newNode;
+ },
+
+ /**
+ * Creates new Dom element(s) and appends them to el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ append : function(el, o, returnElement){
+ el = Roo.getDom(el);
+ var newNode;
+ if(this.useDom || o.ns){
+ newNode = createDom(o, null);
+ el.appendChild(newNode);
+ }else{
+ var html = createHtml(o);
+ newNode = this.insertHtml("beforeEnd", el, html);
+ }
+ return returnElement ? Roo.get(newNode, true) : newNode;
+ },
+
+ /**
+ * Creates new Dom element(s) and overwrites the contents of el with them
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ overwrite : function(el, o, returnElement)
+ {
+ el = Roo.getDom(el);
+ if (o.ns) {
+
+ while (el.childNodes.length) {
+ el.removeChild(el.firstChild);
}
- case "afterend":
- range.setStartAfter(el);
- frag = range.createContextualFragment(html);
- el.parentNode.insertBefore(frag, el.nextSibling);
- return el.nextSibling;
+ createDom(o, el);
+ } else {
+ el.innerHTML = createHtml(o);
}
- throw 'Illegal insertion point -> "' + where + '"';
- },
-
- /**
- * Creates new Dom element(s) and inserts them before el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- insertBefore : function(el, o, returnElement){
- return this.doInsert(el, o, returnElement, "beforeBegin");
- },
-
- /**
- * Creates new Dom element(s) and inserts them after el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object} o The Dom object spec (and children)
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- insertAfter : function(el, o, returnElement){
- return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
- },
-
- /**
- * Creates new Dom element(s) and inserts them as the first child of el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- insertFirst : function(el, o, returnElement){
- return this.doInsert(el, o, returnElement, "afterBegin");
- },
-
- // private
- doInsert : function(el, o, returnElement, pos, sibling){
- el = Roo.getDom(el);
- var newNode;
- if(this.useDom || o.ns){
- newNode = createDom(o, null);
- el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
- }else{
- var html = createHtml(o);
- newNode = this.insertHtml(pos, el, html);
- }
- return returnElement ? Roo.get(newNode, true) : newNode;
- },
-
- /**
- * Creates new Dom element(s) and appends them to el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- append : function(el, o, returnElement){
- el = Roo.getDom(el);
- var newNode;
- if(this.useDom || o.ns){
- newNode = createDom(o, null);
- el.appendChild(newNode);
- }else{
+
+ return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
+ },
+
+ /**
+ * Creates a new Roo.DomHelper.Template from the Dom object spec
+ * @param {Object} o The Dom object spec (and children)
+ * @return {Roo.DomHelper.Template} The new template
+ */
+ createTemplate : function(o){
var html = createHtml(o);
- newNode = this.insertHtml("beforeEnd", el, html);
- }
- return returnElement ? Roo.get(newNode, true) : newNode;
- },
-
- /**
- * Creates new Dom element(s) and overwrites the contents of el with them
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- overwrite : function(el, o, returnElement){
- el = Roo.getDom(el);
- if (o.ns) {
-
- while (el.childNodes.length) {
- el.removeChild(el.firstChild);
- }
- createDom(o, el);
- } else {
- el.innerHTML = createHtml(o);
+ return new Roo.Template(html);
+ },
+ /**
+ * Updates the first element with the spec from the o (replacing if necessary)
+ * This iterates through the children, and updates attributes / children etc..
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ */
+
+ update : function(el, o)
+ {
+ updateNode(Roo.getDom(el), createDom(o));
+
}
- return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
- },
-
- /**
- * Creates a new Roo.DomHelper.Template from the Dom object spec
- * @param {Object} o The Dom object spec (and children)
- * @return {Roo.DomHelper.Template} The new template
- */
- createTemplate : function(o){
- var html = createHtml(o);
- return new Roo.Template(html);
- }
+
};
}();
/*
<li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
<li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
</ul>
- * @singleton
+ * @static
*/
Roo.DomQuery = function(){
var cache = {}, simpleCache = {}, valueCache = {};
* Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
* several useful events directly.
* See {@link Roo.EventObject} for more details on normalized event objects.
- * @singleton
+ * @static
*/
Roo.EventManager = function(){
var docReadyEvent, docReadyProcId, docReadyState = false;
* @param {Object} scope An object that becomes the scope of the handler
* @param {boolean} options
*/
- onWindowResize : function(fn, scope, options){
+ onWindowResize : function(fn, scope, options)
+ {
if(!resizeEvent){
resizeEvent = new Roo.util.Event();
resizeTask = new Roo.util.DelayedTask(function(){
resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
});
- E.on(window, "resize", function(){
- if(Roo.isIE){
+ E.on(window, "resize", function()
+ {
+ if (Roo.isIE) {
resizeTask.delay(50);
- }else{
+ } else {
resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
}
});
Roo.EventManager.on("myDiv", 'click', handleClick);
Roo.EventManager.addListener("myDiv", 'click', handleClick);
</code></pre>
- * @singleton
+ * @static
*/
Roo.EventObject = function(){
* Puts a mask over this element to disable user interaction. Requires core.css.
* This method can only be applied to elements which accept child nodes.
* @param {String} msg (optional) A message to display in the mask
- * @param {String} msgCls (optional) A css class to apply to the msg element
+ * @param {String} msgCls (optional) A css class to apply to the msg element - use no-spinner to hide the spinner on bootstrap
* @return {Element} The mask element
*/
mask : function(msg, msgCls)
* Fork - LGPL
* <script type="text/javascript">
*/
-
+/**
+ * @class Roo.util.TaskRunner
+ * Manage background tasks - not sure why this is better that setInterval?
+ * @static
+ *
+ */
Roo.util.TaskRunner = function(interval){
interval = interval || 10;
/**
* Queues a new task.
* @param {Object} task
+ *
+ * Task property : interval = how frequent to run.
+ * Task object should implement
+ * function run()
+ * Task object may implement
+ * function onStop()
*/
this.start = function(task){
tasks.push(task);
startThread();
return task;
};
-
+ /**
+ * Stop new task.
+ * @param {Object} task
+ */
this.stop = function(task){
removeTask(task);
return task;
};
-
+ /**
+ * Stop all Tasks
+ */
this.stopAll = function(){
stopThread();
for(var i = 0, len = tasks.length; i < len; i++){
* Modified version of Douglas Crockford"s json.js that doesn"t
* mess with the Object prototype
* http://www.json.org/js.html
- * @singleton
+ * @static
*/
Roo.util.JSON = new (function(){
var useHasOwn = {}.hasOwnProperty ? true : false;
/**
* @class Roo.util.Format
* Reusable data formatting functions
- * @singleton
+ * @static
*/
Roo.util.Format = function(){
var trimRe = /^\s+|\s+$/g;
/**
* @class Roo.util.CSS
* Utility class for manipulating CSS rules
- * @singleton
+ * @static
+
*/
Roo.util.CSS = function(){
var rules = null;
* @class Roo.util.TextMetrics
* Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
* wide, in pixels, a given block of text will be.
- * @singleton
+ * @static
*/
Roo.util.TextMetrics = function(){
var shared;
};
}();
-
+/**
+ * @class Roo.util.TextMetrics.Instance
+ * Instance of TextMetrics Calcuation
+ * @constructor
+ * Create a new TextMetrics Instance
+ * @param {Object} bindto
+ * @param {Boolean} fixedWidth
+ */
-Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth){
+Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth)
+{
var ml = new Roo.Element(document.createElement('div'));
document.body.appendChild(ml.dom);
ml.position('absolute');
var instance = {
/**
* Returns the size of the specified text based on the internal element's style and width properties
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String} text The text to measure
* @return {Object} An object containing the text's size {width: (width), height: (height)}
*/
/**
* Binds this TextMetrics instance to an element from which to copy existing CSS styles
* that can affect the size of the rendered text
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String/HTMLElement} el The element, dom node or id
*/
bind : function(el){
/**
* Sets a fixed width on the internal measurement element. If the text will be multiline, you have
* to set a fixed width in order to accurately measure the text height.
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {Number} width The width to set on the element
*/
setFixedWidth : function(width){
/**
* Returns the measured width of the specified text
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String} text The text to measure
* @return {Number} width The width in pixels
*/
/**
* Returns the measured height of the specified text. For multiline text, be sure to call
* {@link #setFixedWidth} if necessary.
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String} text The text to measure
* @return {Number} height The height in pixels
*/
var dialog = new Roo.BasicDialog(...);
dialog.restoreState();
</code></pre>
- * @singleton
+ * @static
*/
Roo.state.Manager = function(){
var provider = new Roo.state.Provider();
/**
* @class Roo.ComponentMgr
* Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
- * @singleton
+ * @static
*/
Roo.ComponentMgr = function(){
var all = new Roo.util.MixedCollection();
*/
actionMode : "el",
+ /**
+ * @cfg {String} style
+ * css styles to add to component
+ * eg. text-align:right;
+ */
+ style : false,
+
/** @private */
getActionEl : function(){
return this[this.actionMode];
* all DragDrop items in the window. Generally, you will not call
* this class directly, but it does have helper methods that could
* be useful in your DragDrop implementations.
- * @singleton
+ * @static
*/
Roo.dd.DragDropMgr = function() {
* @class Roo.dd.ScrollManager
* Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
* <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
- * @singleton
+ * @static
*/
Roo.dd.ScrollManager = function(){
var ddm = Roo.dd.DragDropMgr;
* @class Roo.dd.Registry
* Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
* directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
- * @singleton
+ * @static
*/
Roo.dd.Registry = function(){
var elements = {};
/**
* @class Roo.data.SortTypes
- * @singleton
+ * @static
* Defines the default sorting (casting?) comparison functions used when sorting data.
*/
Roo.data.SortTypes = {
* <p>
* @param {Object} options An object containing properties which control loading options:<ul>
* <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
+ * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
+ * <pre>
+ {
+ data : data, // array of key=>value data like JsonReader
+ total : data.length,
+ success : true
+
+ }
+ </pre>
+ }.</li>
* <li>callback {Function} A function to be called after the Records have been loaded. The callback is
* passed the following arguments:<ul>
* <li>r : Roo.data.Record[]</li>
// private
// Called as a callback by the Reader during a load operation.
loadRecords : function(o, options, success){
- if(!o || success === false){
+
+ if(!o){
if(success !== false){
this.fireEvent("load", this, [], options, o);
}
*/
/**
* @class Roo.data.MemoryProxy
+ * @extends Roo.data.DataProxy
* An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
* to the Reader when its load method is called.
* @constructor
- * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
+ * @param {Object} config A config object containing the objects needed for the Store to access data,
*/
-Roo.data.MemoryProxy = function(data){
- if (data.data) {
- data = data.data;
+Roo.data.MemoryProxy = function(config){
+ var data = config;
+ if (typeof(config) != 'undefined' && typeof(config.data) != 'undefined') {
+ data = config.data;
}
Roo.data.MemoryProxy.superclass.constructor.call(this);
this.data = data;
Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
+ /**
+ * @cfg {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
+ */
/**
* Load data from the requested source (in this case an in-memory
* data object passed to the constructor), read the data object into
try {
result = o.reader.read(response);
}catch(e){
+ o.success = false;
+ o.raw = { errorMsg : response.responseText };
this.fireEvent("loadexception", this, o, response, e);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
+ o.request.callback.call(o.request.scope, o, o.request.arg, false);
return;
}
}
var records = [];
for(var i = 0; i < c; i++){
- var n = root[i];
+ var n = root[i];
var values = {};
var id = this.getId(n);
for(var j = 0; j < fl; j++){
f = fi[j];
- var v = this.ef[j](n);
- if (!f.convert) {
- Roo.log('missing convert for ' + f.name);
- Roo.log(f);
- continue;
- }
- values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
- }
+ var v = this.ef[j](n);
+ if (!f.convert) {
+ Roo.log('missing convert for ' + f.name);
+ Roo.log(f);
+ continue;
+ }
+ values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
+ }
+ if (!Record) {
+ return {
+ raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
+ success : false,
+ records : [],
+ totalRecords : 0
+ };
+ }
var record = new Record(values, id);
record.json = n;
records[i] = record;
this.hide();
}
},
-
+ /**
+ * Similar to toggle, but does not trigger event.
+ * @param {Boolean} state [required] Force a particular state
+ */
+ setPressed : function(state)
+ {
+ if(state != this.pressed){
+ if(state){
+ this.el.addClass("x-btn-pressed");
+ this.pressed = true;
+ }else{
+ this.el.removeClass("x-btn-pressed");
+ this.pressed = false;
+ }
+ }
+ },
+
/**
* If a state it passed, it becomes the pressed state otherwise the current state is toggled.
* @param {Boolean} state (optional) Force a particular state
}
},
+
+
/**
* Focus the button
*/
/**
* @class Roo.Toolbar
- * @children Roo.Toolbar.Item Roo.form.Field
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
* Basic Toolbar class.
* @constructor
* Creates a new Toolbar
enable:Roo.emptyFn,
disable:Roo.emptyFn,
- focus:Roo.emptyFn
+ focus:Roo.emptyFn,
+ /**
+ * Shows this button
+ */
+ show: function(){
+ this.hidden = false;
+ this.el.style.display = "";
+ },
+
+ /**
+ * Hides this button
+ */
+ hide: function(){
+ this.hidden = true;
+ this.el.style.display = "none";
+ }
+
});
/**
/**
* @class Roo.PagingToolbar
* @extends Roo.Toolbar
- * @children Roo.Toolbar.Item Roo.form.Field
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
* A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
* @constructor
* Create a new PagingToolbar
this.loading.disable();
}
},
-
+ /**
+ * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
+ * @param {String} which (first|prev|next|last|refresh) which button to press.
+ *
+ */
// private
onClick : function(which){
var ds = this.ds;
/**
* @class Roo.BasicDialog
* @extends Roo.util.Observable
+ * @parent none builder
* Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
* <pre><code>
var dlg = new Roo.BasicDialog("my-dlg", {
* @class Roo.LayoutDialog
* @extends Roo.BasicDialog
* @children Roo.ContentPanel
- * @builder-top
+ * @parent builder none
* Dialog which provides adjustments for working with a layout in a Dialog.
* Add your necessary layout config options to the dialog's config.<br>
* Example usage (including a nested layout):
/**
* @class Roo.MessageBox
+ * @static
* Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
* Example usage:
*<pre><code>
animEl: 'elId'
});
</code></pre>
- * @singleton
+ * @static
*/
Roo.MessageBox = function(){
var dlg, opt, mask, waitTimer;
}
}
});
+
dlg.on("hide", handleHide);
mask = dlg.mask;
dlg.addKeyListener(27, handleEsc);
d.animateTarget = null;
d.show(options.animEl);
}
+ dlg.toFront();
return this;
},
/**
* @class Roo.QuickTips
* Provides attractive and customizable tooltips for any element.
- * @singleton
+ * @static
*/
Roo.QuickTips = function(){
var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
/**
* @class Roo.menu.Menu
* @extends Roo.util.Observable
- * @children Roo.menu.BaseItem
+ * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
* A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class
* when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
* @constructor
/**
* @class Roo.menu.MenuMgr
* Provides a common registry of all menu items on a page so that they can be easily accessed by id.
- * @singleton
+ * @static
*/
Roo.menu.MenuMgr = function(){
var menus, active, groups = {}, attached = false, lastShow = new Date();
*/
text: '',
/**
- * @cfg {String} HTML to render in menu
+ * @cfg {String} html to render in menu
* The text to show on the menu item (HTML version).
*/
html: '',
* The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
*/
disabledDatesText : "Disabled",
+
+
+ /**
+ * @cfg {Date/String} zeroValue
+ * if the date is less that this number, then the field is rendered as empty
+ * default is 1800
+ */
+ zeroValue : '1800-01-01',
+
+
/**
* @cfg {Date/String} minValue
* The minimum allowed date. Can be either a Javascript date object or a string date in a
// private
parseDate : function(value){
+
+ if (value instanceof Date) {
+ if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ return '';
+ }
+ return value;
+ }
+
+
if(!value || value instanceof Date){
return value;
}
v = Date.parseDate(value, this.altFormatsArray[i]);
}
}
+ if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ v = '';
+ }
return v;
},
this.fireEvent('check', this, state);
}
this.inSetChecked = true;
- this.el.dom.value = state ? this.inputValue : this.valueOff;
+
+ this.el.dom.value = state ? this.inputValue : this.valueOff;
+
this.inSetChecked = false;
},
this.el.dom.checked = 'checked' ;
}
+ },
+ /**
+ * Sets the checked state of the checkbox.
+ * On is always based on a string comparison between inputValue and the param.
+ * @param {Boolean/String} value - the value to set
+ * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
+ */
+ setValue : function(v,suppressEvent){
+
+
+ //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ //if(this.el && this.el.dom){
+ // this.el.dom.checked = this.checked;
+ // this.el.dom.defaultChecked = this.checked;
+ //}
+ this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+
+ this.el.dom.form[this.name].value = v;
+
+ //this.fireEvent("check", this, this.checked);
+ },
+ // private..
+ setChecked : function(state,suppressEvent)
+ {
+
+ if(this.wrap){
+ this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+ }
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent('check', this, state);
+ }
+
+
+
+
+ },
+ reset : function(){
+ // this.setValue(this.resetValue);
+ //this.originalValue = this.getValue();
+ this.clearInvalid();
}
-
-});//<script type="text/javascript">
-
-/*
- * Based Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * LGPL
- *
- */
-
-/**
- * @class Roo.HtmlEditorCore
- * @extends Roo.Component
- * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
- *
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
- */
+});Roo.rtf = {}; // namespace
+Roo.rtf.Hex = function(hex)
+{
+ this.hexstr = hex;
+};
+Roo.rtf.Paragraph = function(opts)
+{
+ this.content = []; ///??? is that used?
+};Roo.rtf.Span = function(opts)
+{
+ this.value = opts.value;
+};
-Roo.HtmlEditorCore = function(config){
-
-
- Roo.HtmlEditorCore.superclass.constructor.call(this, config);
-
+Roo.rtf.Group = function(parent)
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.content = [];
+ this.cn = [];
+
+
- this.addEvents({
- /**
- * @event initialize
- * Fires when the editor is fully initialized (including the iframe)
- * @param {Roo.HtmlEditorCore} this
- */
- initialize: true,
- /**
- * @event activate
- * Fires when the editor is first receives the focus. Any insertion must wait
- * until after this event.
- * @param {Roo.HtmlEditorCore} this
- */
- activate: true,
- /**
- * @event beforesync
- * Fires before the textarea is updated with content from the editor iframe. Return false
- * to cancel the sync.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- beforesync: true,
- /**
- * @event beforepush
- * Fires before the iframe editor is updated with content from the textarea. Return false
- * to cancel the push.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- beforepush: true,
- /**
- * @event sync
- * Fires when the textarea is updated with content from the editor iframe.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- sync: true,
- /**
- * @event push
- * Fires when the iframe editor is updated with content from the textarea.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- push: true,
+};
+
+Roo.rtf.Group.prototype = {
+ ignorable : false,
+ content: false,
+ cn: false,
+ addContent : function(node) {
+ // could set styles...
+ this.content.push(node);
+ },
+ addChild : function(cn)
+ {
+ this.cn.push(cn);
+ },
+ // only for images really...
+ toDataURL : function()
+ {
+ var mimetype = false;
+ switch(true) {
+ case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0:
+ mimetype = "image/png";
+ break;
+ case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
+ mimetype = "image/jpeg";
+ break;
+ default :
+ return 'about:blank'; // ?? error?
+ }
- /**
- * @event editorevent
- * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
- * @param {Roo.HtmlEditorCore} this
- */
- editorevent: true
- });
-
- // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
+ var hexstring = this.content[this.content.length-1].value;
+
+ return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
+ return String.fromCharCode(parseInt(a, 16));
+ }).join(""));
+ }
- // defaults : white / black...
- this.applyBlacklists();
+};
+// this looks like it's normally the {rtf{ .... }}
+Roo.rtf.Document = function()
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.rtlch = [];
+ this.content = [];
+ this.cn = [];
+};
+Roo.extend(Roo.rtf.Document, Roo.rtf.Group, {
+ addChild : function(cn)
+ {
+ this.cn.push(cn);
+ switch(cn.type) {
+ case 'rtlch': // most content seems to be inside this??
+ case 'listtext':
+ case 'shpinst':
+ this.rtlch.push(cn);
+ return;
+ default:
+ this[cn.type] = cn;
+ }
+
+ },
+ getElementsByType : function(type)
+ {
+ var ret = [];
+ this._getElementsByType(type, ret, this.cn, 'rtf');
+ return ret;
+ },
+ _getElementsByType : function (type, ret, search_array, path)
+ {
+ search_array.forEach(function(n,i) {
+ if (n.type == type) {
+ n.path = path + '/' + n.type + ':' + i;
+ ret.push(n);
+ }
+ if (n.cn.length > 0) {
+ this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
+ }
+ },this);
+ }
+});
+
+Roo.rtf.Ctrl = function(opts)
+{
+ this.value = opts.value;
+ this.param = opts.param;
};
+/**
+ *
+ *
+ * based on this https://github.com/iarna/rtf-parser
+ * it's really only designed to extract pict from pasted RTF
+ *
+ * usage:
+ *
+ * var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
+ *
+ *
+ */
+
-Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
- /**
- * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
- */
+Roo.rtf.Parser = function(text) {
+ //super({objectMode: true})
+ this.text = '';
+ this.parserState = this.parseText;
- owner : false,
+ // these are for interpeter...
+ this.doc = {};
+ ///this.parserState = this.parseTop
+ this.groupStack = [];
+ this.hexStore = [];
+ this.doc = false;
- /**
- * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
- * Roo.resizable.
- */
- resizable : false,
- /**
- * @cfg {Number} height (in pixels)
- */
- height: 300,
- /**
- * @cfg {Number} width (in pixels)
- */
- width: 500,
+ this.groups = []; // where we put the return.
- /**
- * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
- *
- */
- stylesheets: false,
+ for (var ii = 0; ii < text.length; ++ii) {
+ ++this.cpos;
+
+ if (text[ii] === '\n') {
+ ++this.row;
+ this.col = 1;
+ } else {
+ ++this.col;
+ }
+ this.parserState(text[ii]);
+ }
- /**
- * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
- */
- allowComments: false,
- // id of frame..
- frameId: false,
- // private properties
- validationEvent : false,
- deferHeight: true,
- initialized : false,
- activated : false,
- sourceEditMode : false,
- onFocus : Roo.emptyFn,
- iframePad:3,
- hideMode:'offsets',
- clearUp: true,
+};
+Roo.rtf.Parser.prototype = {
+ text : '', // string being parsed..
+ controlWord : '',
+ controlWordParam : '',
+ hexChar : '',
+ doc : false,
+ group: false,
+ groupStack : false,
+ hexStore : false,
- // blacklist + whitelisted elements..
- black: false,
- white: false,
-
- bodyCls : '',
+
+ cpos : 0,
+ row : 1, // reportin?
+ col : 1, //
- /**
- * Protected method that will not generally be called directly. It
- * is called when the editor initializes the iframe with HTML contents. Override this method if you
- * want to change the initialization markup of the iframe (e.g. to add stylesheets).
- */
- getDocMarkup : function(){
- // body styles..
- var st = '';
-
- // inherit styels from page...??
- if (this.stylesheets === false) {
-
- Roo.get(document.head).select('style').each(function(node) {
- st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
- });
-
- Roo.get(document.head).select('link').each(function(node) {
- st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
- });
-
- } else if (!this.stylesheets.length) {
- // simple..
- st = '<style type="text/css">' +
- 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
- '</style>';
- } else {
- for (var i in this.stylesheets) {
- st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
- }
-
+
+ push : function (el)
+ {
+ var m = 'cmd'+ el.type;
+ if (typeof(this[m]) == 'undefined') {
+ Roo.log('invalid cmd:' + el.type);
+ return;
+ }
+ this[m](el);
+ //Roo.log(el);
+ },
+ flushHexStore : function()
+ {
+ if (this.hexStore.length < 1) {
+ return;
}
+ var hexstr = this.hexStore.map(
+ function(cmd) {
+ return cmd.value;
+ }).join('');
- st += '<style type="text/css">' +
- 'IMG { cursor: pointer } ' +
- '</style>';
-
- var cls = 'roo-htmleditor-body';
+ this.group.addContent( new Roo.rtf.Hex( hexstr ));
+
+
+ this.hexStore.splice(0)
- if(this.bodyCls.length){
- cls += ' ' + this.bodyCls;
+ },
+
+ cmdgroupstart : function()
+ {
+ this.flushHexStore();
+ if (this.group) {
+ this.groupStack.push(this.group);
}
-
- return '<html><head>' + st +
- //<style type="text/css">' +
- //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
- //'</style>' +
- ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
+ // parent..
+ if (this.doc === false) {
+ this.group = this.doc = new Roo.rtf.Document();
+ return;
+
+ }
+ this.group = new Roo.rtf.Group(this.group);
},
-
- // private
- onRender : function(ct, position)
+ cmdignorable : function()
{
- var _t = this;
- //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
- this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
-
-
- this.el.dom.style.border = '0 none';
- this.el.dom.setAttribute('tabIndex', -1);
- this.el.addClass('x-hidden hide');
-
+ this.flushHexStore();
+ this.group.ignorable = true;
+ },
+ cmdendparagraph : function()
+ {
+ this.flushHexStore();
+ this.group.addContent(new Roo.rtf.Paragraph());
+ },
+ cmdgroupend : function ()
+ {
+ this.flushHexStore();
+ var endingGroup = this.group;
- if(Roo.isIE){ // fix IE 1px bogus margin
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
+ this.group = this.groupStack.pop();
+ if (this.group) {
+ this.group.addChild(endingGroup);
}
-
-
- this.frameId = Roo.id();
-
-
-
- var iframe = this.owner.wrap.createChild({
- tag: 'iframe',
- cls: 'form-control', // bootstrap..
- id: this.frameId,
- name: this.frameId,
- frameBorder : 'no',
- 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
- }, this.el
- );
-
- this.iframe = iframe.dom;
-
- this.assignDocWin();
- this.doc.designMode = 'on';
-
- this.doc.open();
- this.doc.write(this.getDocMarkup());
- this.doc.close();
-
- var task = { // must defer to wait for browser to be ready
- run : function(){
- //console.log("run task?" + this.doc.readyState);
- this.assignDocWin();
- if(this.doc.body || this.doc.readyState == 'complete'){
- try {
- this.doc.designMode="on";
- } catch (e) {
- return;
- }
- Roo.TaskMgr.stop(task);
- this.initEditor.defer(10, this);
- }
- },
- interval : 10,
- duration: 10000,
- scope: this
- };
- Roo.TaskMgr.start(task);
-
+ var doc = this.group || this.doc;
+ //if (endingGroup instanceof FontTable) {
+ // doc.fonts = endingGroup.table
+ //} else if (endingGroup instanceof ColorTable) {
+ // doc.colors = endingGroup.table
+ //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
+ if (endingGroup.ignorable === false) {
+ //code
+ this.groups.push(endingGroup);
+ // Roo.log( endingGroup );
+ }
+ //Roo.each(endingGroup.content, function(item)) {
+ // doc.addContent(item);
+ //}
+ //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
+ //}
},
-
- // private
- onResize : function(w, h)
+ cmdtext : function (cmd)
{
- Roo.log('resize: ' +w + ',' + h );
- //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
- if(!this.iframe){
- return;
+ this.flushHexStore();
+ if (!this.group) { // an RTF fragment, missing the {\rtf1 header
+ //this.group = this.doc
+ return; // we really don't care about stray text...
}
- if(typeof w == 'number'){
-
- this.iframe.style.width = w + 'px';
+ this.group.addContent(new Roo.rtf.Span(cmd));
+ },
+ cmdcontrolword : function (cmd)
+ {
+ this.flushHexStore();
+ if (!this.group.type) {
+ this.group.type = cmd.value;
+ return;
}
- if(typeof h == 'number'){
-
- this.iframe.style.height = h + 'px';
- if(this.doc){
- (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
- }
+ this.group.addContent(new Roo.rtf.Ctrl(cmd));
+ // we actually don't care about ctrl words...
+ return ;
+ /*
+ var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
+ if (this[method]) {
+ this[method](cmd.param)
+ } else {
+ if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
}
-
+ */
},
-
- /**
- * Toggles the editor between standard and source edit mode.
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
- */
- toggleSourceEdit : function(sourceEditMode){
-
- this.sourceEditMode = sourceEditMode === true;
-
- if(this.sourceEditMode){
-
- Roo.get(this.iframe).addClass(['x-hidden','hide']); //FIXME - what's the BS styles for these
-
- }else{
- Roo.get(this.iframe).removeClass(['x-hidden','hide']);
- //this.iframe.className = '';
- this.deferFocus();
+ cmdhexchar : function(cmd) {
+ this.hexStore.push(cmd);
+ },
+ cmderror : function(cmd) {
+ throw cmd.value;
+ },
+
+ /*
+ _flush (done) {
+ if (this.text !== '\u0000') this.emitText()
+ done()
+ }
+ */
+
+
+ parseText : function(c)
+ {
+ if (c === '\\') {
+ this.parserState = this.parseEscapes;
+ } else if (c === '{') {
+ this.emitStartGroup();
+ } else if (c === '}') {
+ this.emitEndGroup();
+ } else if (c === '\x0A' || c === '\x0D') {
+ // cr/lf are noise chars
+ } else {
+ this.text += c;
}
- //this.setSize(this.owner.wrap.getSize());
- //this.fireEvent('editmodechange', this, this.sourceEditMode);
},
-
-
-
- /**
- * Protected method that will not generally be called directly. If you need/want
- * custom HTML cleanup, this is the method you should override.
- * @param {String} html The HTML to be cleaned
- * return {String} The cleaned HTML
- */
- cleanHtml : function(html){
- html = String(html);
- if(html.length > 5){
- if(Roo.isSafari){ // strip safari nonsense
- html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
- }
+ parseEscapes: function (c)
+ {
+ if (c === '\\' || c === '{' || c === '}') {
+ this.text += c;
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlSymbol;
+ this.parseControlSymbol(c);
}
- if(html == ' '){
- html = '';
+ },
+ parseControlSymbol: function(c)
+ {
+ if (c === '~') {
+ this.text += '\u00a0'; // nbsp
+ this.parserState = this.parseText
+ } else if (c === '-') {
+ this.text += '\u00ad'; // soft hyphen
+ } else if (c === '_') {
+ this.text += '\u2011'; // non-breaking hyphen
+ } else if (c === '*') {
+ this.emitIgnorable();
+ this.parserState = this.parseText;
+ } else if (c === "'") {
+ this.parserState = this.parseHexChar;
+ } else if (c === '|') { // formula cacter
+ this.emitFormula();
+ this.parserState = this.parseText;
+ } else if (c === ':') { // subentry in an index entry
+ this.emitIndexSubEntry();
+ this.parserState = this.parseText;
+ } else if (c === '\x0a') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else if (c === '\x0d') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlWord;
+ this.parseControlWord(c);
}
- return html;
},
-
- /**
- * HTML Editor -> Textarea
- * Protected method that will not generally be called directly. Syncs the contents
- * of the editor iframe with the textarea.
- */
- syncValue : function(){
- if(this.initialized){
- var bd = (this.doc.body || this.doc.documentElement);
- //this.cleanUpPaste(); -- this is done else where and causes havoc..
- var html = bd.innerHTML;
- if(Roo.isSafari){
- var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
- var m = bs ? bs.match(/text-align:(.*?);/i) : false;
- if(m && m[1]){
- html = '<div style="'+m[0]+'">' + html + '</div>';
- }
+ parseHexChar: function (c)
+ {
+ if (/^[A-Fa-f0-9]$/.test(c)) {
+ this.hexChar += c;
+ if (this.hexChar.length >= 2) {
+ this.emitHexChar();
+ this.parserState = this.parseText;
}
- html = this.cleanHtml(html);
- // fix up the special chars.. normaly like back quotes in word...
- // however we do not want to do this with chinese..
- html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
-
- var cc = match.charCodeAt();
-
- // Get the character value, handling surrogate pairs
- if (match.length == 2) {
- // It's a surrogate pair, calculate the Unicode code point
- var high = match.charCodeAt(0) - 0xD800;
- var low = match.charCodeAt(1) - 0xDC00;
- cc = (high * 0x400) + low + 0x10000;
- } else if (
- (cc >= 0x4E00 && cc < 0xA000 ) ||
- (cc >= 0x3400 && cc < 0x4E00 ) ||
- (cc >= 0xf900 && cc < 0xfb00 )
- ) {
- return match;
- }
-
- // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
- return "&#" + cc + ";";
-
-
+ return;
+ }
+ this.emitError("Invalid character \"" + c + "\" in hex literal.");
+ this.parserState = this.parseText;
+
+ },
+ parseControlWord : function(c)
+ {
+ if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else if (/^[-\d]$/.test(c)) {
+ this.parserState = this.parseControlWordParam;
+ this.controlWordParam += c;
+ } else if (/^[A-Za-z]$/.test(c)) {
+ this.controlWord += c;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
+ }
+ },
+ parseControlWordParam : function (c) {
+ if (/^\d$/.test(c)) {
+ this.controlWordParam += c;
+ } else if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
+ }
+ },
+
+
+
+
+ emitText : function () {
+ if (this.text === '') {
+ return;
+ }
+ this.push({
+ type: 'text',
+ value: this.text,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.text = ''
+ },
+ emitControlWord : function ()
+ {
+ this.emitText();
+ if (this.controlWord === '') {
+ // do we want to track this - it seems just to cause problems.
+ //this.emitError('empty control word');
+ } else {
+ this.push({
+ type: 'controlword',
+ value: this.controlWord,
+ param: this.controlWordParam !== '' && Number(this.controlWordParam),
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
});
-
-
-
- if(this.owner.fireEvent('beforesync', this, html) !== false){
- this.el.dom.value = html;
- this.owner.fireEvent('sync', this, html);
- }
}
+ this.controlWord = '';
+ this.controlWordParam = '';
+ },
+ emitStartGroup : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'groupstart',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitEndGroup : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'groupend',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitIgnorable : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'ignorable',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitHexChar : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'hexchar',
+ value: this.hexChar,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.hexChar = ''
+ },
+ emitError : function (message)
+ {
+ this.emitText();
+ this.push({
+ type: 'error',
+ value: message,
+ row: this.row,
+ col: this.col,
+ char: this.cpos //,
+ //stack: new Error().stack
+ });
},
+ emitEndParagraph : function () {
+ this.emitText();
+ this.push({
+ type: 'endparagraph',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ }
+
+} ;
+Roo.htmleditor = {};
+
+/**
+ * @class Roo.htmleditor.Filter
+ * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
+ * @cfg {DomElement} node The node to iterate and filter
+ * @cfg {boolean|String|Array} tag Tags to replace
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
- /**
- * Protected method that will not generally be called directly. Pushes the value of the textarea
- * into the iframe editor.
- */
- pushValue : function(){
- if(this.initialized){
- var v = this.el.dom.value.trim();
-
-// if(v.length < 1){
-// v = ' ';
-// }
-
- if(this.owner.fireEvent('beforepush', this, v) !== false){
- var d = (this.doc.body || this.doc.documentElement);
- d.innerHTML = v;
- this.cleanUpPaste();
- this.el.dom.value = d.innerHTML;
- this.owner.fireEvent('push', this, v);
+
+
+Roo.htmleditor.Filter = function(cfg) {
+ Roo.apply(this.cfg);
+ // this does not actually call walk as it's really just a abstract class
+}
+
+
+Roo.htmleditor.Filter.prototype = {
+
+ node: false,
+
+ tag: false,
+
+ // overrride to do replace comments.
+ replaceComment : false,
+
+ // overrride to do replace or do stuff with tags..
+ replaceTag : false,
+
+ walk : function(dom)
+ {
+ Roo.each( Array.from(dom.childNodes), function( e ) {
+ switch(true) {
+
+ case e.nodeType == 8 && this.replaceComment !== false: // comment
+ this.replaceComment(e);
+ return;
+
+ case e.nodeType != 1: //not a node.
+ return;
+
+ case this.tag === true: // everything
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
+ case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
+ case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
+ if (this.replaceTag && false === this.replaceTag(e)) {
+ return;
+ }
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
+ return;
+
+ default: // tags .. that do not match.
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
}
- }
+
+ }, this);
+
},
+
+
+ removeNodeKeepChildren : function( node)
+ {
+
+ ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+
+ }
+ node.parentNode.removeChild(node);
+ }
+};
- // private
- deferFocus : function(){
- this.focus.defer(10, this);
- },
+/**
+ * @class Roo.htmleditor.FilterAttributes
+ * clean attributes and styles including http:// etc.. in attribute
+ * @constructor
+* Run a new Attribute Filter
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterAttributes = function(cfg)
+{
+ Roo.apply(this, cfg);
+ this.attrib_black = this.attrib_black || [];
+ this.attrib_white = this.attrib_white || [];
- // doc'ed in Field
- focus : function(){
- if(this.win && !this.sourceEditMode){
- this.win.focus();
- }else{
- this.el.focus();
- }
- },
+ this.attrib_clean = this.attrib_clean || [];
+ this.style_white = this.style_white || [];
+ this.style_black = this.style_black || [];
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
+{
+ tag: true, // all tags
- assignDocWin: function()
+ attrib_black : false, // array
+ attrib_clean : false,
+ attrib_white : false,
+
+ style_white : false,
+ style_black : false,
+
+
+ replaceTag : function(node)
{
- var iframe = this.iframe;
+ if (!node.attributes || !node.attributes.length) {
+ return true;
+ }
- if(Roo.isIE){
- this.doc = iframe.contentWindow.document;
- this.win = iframe.contentWindow;
- } else {
-// if (!Roo.get(this.frameId)) {
-// return;
-// }
-// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
-// this.win = Roo.get(this.frameId).dom.contentWindow;
+ for (var i = node.attributes.length-1; i > -1 ; i--) {
+ var a = node.attributes[i];
+ //console.log(a);
+ if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
+ node.removeAttribute(a.name);
+ continue;
+ }
- if (!Roo.get(this.frameId) && !iframe.contentDocument) {
- return;
+
+
+ if (a.name.toLowerCase().substr(0,2)=='on') {
+ node.removeAttribute(a.name);
+ continue;
}
- this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
- this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
+
+ if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
+ node.removeAttribute(a.name);
+ continue;
+ }
+ if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
+ this.cleanAttr(node,a.name,a.value); // fixme..
+ continue;
+ }
+ if (a.name == 'style') {
+ this.cleanStyle(node,a.name,a.value);
+ continue;
+ }
+ /// clean up MS crap..
+ // tecnically this should be a list of valid class'es..
+
+
+ if (a.name == 'class') {
+ if (a.value.match(/^Mso/)) {
+ node.removeAttribute('class');
+ }
+
+ if (a.value.match(/^body$/)) {
+ node.removeAttribute('class');
+ }
+ continue;
+ }
+
+
+ // style cleanup!?
+ // class cleanup?
+
}
+ return true; // clean children
},
-
- // private
- initEditor : function(){
- //console.log("INIT EDITOR");
- this.assignDocWin();
-
-
-
- this.doc.designMode="on";
- this.doc.open();
- this.doc.write(this.getDocMarkup());
- this.doc.close();
- var dbody = (this.doc.body || this.doc.documentElement);
- //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
- // this copies styles from the containing element into thsi one..
- // not sure why we need all of this..
- //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+ cleanAttr: function(node, n,v)
+ {
- //var ss = this.el.getStyles( 'background-image', 'background-repeat');
- //ss['background-attachment'] = 'fixed'; // w3c
- dbody.bgProperties = 'fixed'; // ie
- //Roo.DomHelper.applyStyles(dbody, ss);
- Roo.EventManager.on(this.doc, {
- //'mousedown': this.onEditorEvent,
- 'mouseup': this.onEditorEvent,
- 'dblclick': this.onEditorEvent,
- 'click': this.onEditorEvent,
- 'keyup': this.onEditorEvent,
- buffer:100,
- scope: this
- });
- if(Roo.isGecko){
- Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
+ if (v.match(/^\./) || v.match(/^\//)) {
+ return;
}
- if(Roo.isIE || Roo.isSafari || Roo.isOpera){
- Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
+ if (v.match(/^(http|https):\/\//)
+ || v.match(/^mailto:/)
+ || v.match(/^ftp:/)
+ || v.match(/^data:/)
+ ) {
+ return;
}
- this.initialized = true;
-
- this.owner.fireEvent('initialize', this);
- this.pushValue();
- },
-
- // private
- onDestroy : function(){
+ if (v.match(/^#/)) {
+ return;
+ }
+ if (v.match(/^\{/)) { // allow template editing.
+ return;
+ }
+// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
+ node.removeAttribute(n);
+ },
+ cleanStyle : function(node, n,v)
+ {
+ if (v.match(/expression/)) { //XSS?? should we even bother..
+ node.removeAttribute(n);
+ return;
+ }
+ var parts = v.split(/;/);
+ var clean = [];
- if(this.rendered){
+ Roo.each(parts, function(p) {
+ p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (!p.length) {
+ return true;
+ }
+ var l = p.split(':').shift().replace(/\s+/g,'');
+ l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
- //for (var i =0; i < this.toolbars.length;i++) {
- // // fixme - ask toolbars for heights?
- // this.toolbars[i].onDestroy();
- // }
+ if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
+ return true;
+ }
+ //Roo.log()
+ // only allow 'c whitelisted system attributes'
+ if ( this.style_white.length && style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
+ return true;
+ }
- //this.wrap.dom.innerHTML = '';
- //this.wrap.remove();
+
+ clean.push(p);
+ return true;
+ },this);
+ if (clean.length) {
+ node.setAttribute(n, clean.join(';'));
+ } else {
+ node.removeAttribute(n);
}
- },
-
- // private
- onFirstFocus : function(){
- this.assignDocWin();
+ }
+
- this.activated = true;
-
- if(Roo.isGecko){ // prevent silly gecko errors
- this.win.focus();
- var s = this.win.getSelection();
- if(!s.focusNode || s.focusNode.nodeType != 3){
- var r = s.getRangeAt(0);
- r.selectNodeContents((this.doc.body || this.doc.documentElement));
- r.collapse(true);
- this.deferFocus();
- }
- try{
- this.execCmd('useCSS', true);
- this.execCmd('styleWithCSS', false);
- }catch(e){}
- }
- this.owner.fireEvent('activate', this);
- },
+});/**
+ * @class Roo.htmleditor.FilterBlack
+ * remove blacklisted elements.
+ * @constructor
+ * Run a new Blacklisted Filter
+ * @param {Object} config Configuration options
+ */
- // private
- adjustFont: function(btn){
- var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
- //if(Roo.isSafari){ // safari
- // adjust *= 2;
- // }
- var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
- if(Roo.isSafari){ // safari
- var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
- v = (v < 10) ? 10 : v;
- v = (v > 48) ? 48 : v;
- v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
-
- }
-
-
- v = Math.max(1, v+adjust);
-
- this.execCmd('FontSize', v );
- },
+Roo.htmleditor.FilterBlack = function(cfg)
+{
+ Roo.apply(this, cfg);
+ this.walk(cfg.node);
+}
- onEditorEvent : function(e)
+Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
+{
+ tag : true, // all elements.
+
+ replaceTag : function(n)
{
- this.owner.fireEvent('editorevent', this, e);
- // this.updateToolbar();
- this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
- },
+ n.parentNode.removeChild(n);
+ }
+});
+/**
+ * @class Roo.htmleditor.FilterComment
+ * remove comments.
+ * @constructor
+* Run a new Comments Filter
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterComment = function(cfg)
+{
+ this.walk(cfg.node);
+}
- insertTag : function(tg)
+Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
+{
+
+ replaceComment : function(n)
{
- // could be a bit smarter... -> wrap the current selected tRoo..
- if (tg.toLowerCase() == 'span' ||
- tg.toLowerCase() == 'code' ||
- tg.toLowerCase() == 'sup' ||
- tg.toLowerCase() == 'sub'
- ) {
-
- range = this.createRange(this.getSelection());
- var wrappingNode = this.doc.createElement(tg.toLowerCase());
- wrappingNode.appendChild(range.extractContents());
- range.insertNode(wrappingNode);
+ n.parentNode.removeChild(n);
+ }
+});/**
+ * @class Roo.htmleditor.FilterKeepChildren
+ * remove tags but keep children
+ * @constructor
+ * Run a new Keep Children Filter
+ * @param {Object} config Configuration options
+ */
- return;
-
-
-
+Roo.htmleditor.FilterKeepChildren = function(cfg)
+{
+ Roo.apply(this, cfg);
+ if (this.tag === false) {
+ return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
+ }
+ // hacky?
+ if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
+ this.cleanNamespace = true;
+ }
+
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
+{
+ cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
+
+ replaceTag : function(node)
+ {
+ // walk children...
+ //Roo.log(node.tagName);
+ var ar = Array.from(node.childNodes);
+ //remove first..
+
+ for (var i = 0; i < ar.length; i++) {
+ var e = ar[i];
+ if (e.nodeType == 1) {
+ if (
+ (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
+ || // array and it matches
+ (typeof(this.tag) == 'string' && this.tag == e.tagName)
+ ||
+ (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
+ ||
+ (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
+ ) {
+ this.replaceTag(ar[i]); // child is blacklisted as well...
+ continue;
+ }
+ }
+ }
+ ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+ if (this.tag !== false) {
+ this.walk(ar[i]);
+
+ }
}
- this.execCmd("formatblock", tg);
+ //Roo.log("REMOVE:" + node.tagName);
+ node.parentNode.removeChild(node);
+ return false; // don't walk children
- },
+
+ }
+});/**
+ * @class Roo.htmleditor.FilterParagraph
+ * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
+ * like on 'push' to remove the <p> tags and replace them with line breaks.
+ * @constructor
+ * Run a new Paragraph Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterParagraph = function(cfg)
+{
+ // no need to apply config.
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
+{
- insertText : function(txt)
+
+ tag : 'P',
+
+
+ replaceTag : function(node)
{
+ if (node.childNodes.length == 1 &&
+ node.childNodes[0].nodeType == 3 &&
+ node.childNodes[0].textContent.trim().length < 1
+ ) {
+ // remove and replace with '<BR>';
+ node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
+ return false; // no need to walk..
+ }
+ var ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+ }
+ // now what about this?
+ // <p> </p>
+
+ // double BR.
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.removeChild(node);
- var range = this.createRange();
- range.deleteContents();
- //alert(Sender.getAttribute('label'));
-
- range.insertNode(this.doc.createTextNode(txt));
- } ,
+ return false;
+
+ }
-
+});/**
+ * @class Roo.htmleditor.FilterSpan
+ * filter span's with no attributes out..
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
- /**
- * Executes a Midas editor command on the editor document and performs necessary focus and
- * toolbar updates. <b>This should only be called after the editor is initialized.</b>
- * @param {String} cmd The Midas command
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
- */
- relayCmd : function(cmd, value){
- this.win.focus();
- this.execCmd(cmd, value);
- this.owner.fireEvent('editorevent', this);
- //this.updateToolbar();
- this.owner.deferFocus();
- },
+Roo.htmleditor.FilterSpan = function(cfg)
+{
+ // no need to apply config.
+ this.walk(cfg.node);
+}
- /**
- * Executes a Midas editor command directly on the editor document.
- * For visual commands, you should use {@link #relayCmd} instead.
- * <b>This should only be called after the editor is initialized.</b>
- * @param {String} cmd The Midas command
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
- */
- execCmd : function(cmd, value){
- this.doc.execCommand(cmd, false, value === undefined ? null : value);
- this.syncValue();
- },
-
+Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
+{
+
+ tag : 'SPAN',
+
-
- /**
- * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
- * to insert tRoo.
- * @param {String} text | dom node..
- */
- insertAtCursor : function(text)
+ replaceTag : function(node)
{
+ if (node.attributes && node.attributes.length > 0) {
+ return true; // walk if there are any.
+ }
+ Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
+ return false;
+
+ }
+
+});/**
+ * @class Roo.htmleditor.FilterTableWidth
+ try and remove table width data - as that frequently messes up other stuff.
+ *
+ * was cleanTableWidths.
+ *
+ * Quite often pasting from word etc.. results in tables with column and widths.
+ * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
+ *
+ * @constructor
+ * Run a new Table Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterTableWidth = function(cfg)
+{
+ // no need to apply config.
+ this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+{
+
+
+
+ replaceTag: function(node) {
- if(!this.activated){
- return;
+
+
+ if (node.hasAttribute('width')) {
+ node.removeAttribute('width');
}
- /*
- if(Roo.isIE){
- this.win.focus();
- var r = this.doc.selection.createRange();
- if(r){
- r.collapse(true);
- r.pasteHTML(text);
- this.syncValue();
- this.deferFocus();
+
+
+ if (node.hasAttribute("style")) {
+ // pretty basic...
- }
- return;
- }
- */
- if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
- this.win.focus();
-
-
- // from jquery ui (MIT licenced)
- var range, node;
- var win = this.win;
-
- if (win.getSelection && win.getSelection().getRangeAt) {
- range = win.getSelection().getRangeAt(0);
- node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
- range.insertNode(node);
- } else if (win.document.selection && win.document.selection.createRange) {
- // no firefox support
- var txt = typeof(text) == 'string' ? text : text.outerHTML;
- win.document.selection.createRange().pasteHTML(txt);
- } else {
- // no firefox support
- var txt = typeof(text) == 'string' ? text : text.outerHTML;
- this.execCmd('InsertHTML', txt);
- }
-
- this.syncValue();
-
- this.deferFocus();
- }
- },
- // private
- mozKeyPress : function(e){
- if(e.ctrlKey){
- var c = e.getCharCode(), cmd;
-
- if(c > 0){
- c = String.fromCharCode(c).toLowerCase();
- switch(c){
- case 'b':
- cmd = 'bold';
- break;
- case 'i':
- cmd = 'italic';
- break;
-
- case 'u':
- cmd = 'underline';
- break;
-
- case 'v':
- this.cleanUpPaste.defer(100, this);
- return;
-
- }
- if(cmd){
- this.win.focus();
- this.execCmd(cmd);
- this.deferFocus();
- e.preventDefault();
- }
-
- }
- }
- },
-
- // private
- fixKeys : function(){ // load time branching for fastest keydown performance
- if(Roo.isIE){
- return function(e){
- var k = e.getKey(), r;
- if(k == e.TAB){
- e.stopEvent();
- r = this.doc.selection.createRange();
- if(r){
- r.collapse(true);
- r.pasteHTML('    ');
- this.deferFocus();
- }
- return;
- }
-
- if(k == e.ENTER){
- r = this.doc.selection.createRange();
- if(r){
- var target = r.parentElement();
- if(!target || target.tagName.toLowerCase() != 'li'){
- e.stopEvent();
- r.pasteHTML('<br />');
- r.collapse(false);
- r.select();
- }
- }
- }
- if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- this.cleanUpPaste.defer(100, this);
- return;
- }
-
-
- };
- }else if(Roo.isOpera){
- return function(e){
- var k = e.getKey();
- if(k == e.TAB){
- e.stopEvent();
- this.win.focus();
- this.execCmd('InsertHTML','    ');
- this.deferFocus();
- }
- if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- this.cleanUpPaste.defer(100, this);
- return;
- }
-
- };
- }else if(Roo.isSafari){
- return function(e){
- var k = e.getKey();
-
- if(k == e.TAB){
- e.stopEvent();
- this.execCmd('InsertText','\t');
- this.deferFocus();
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
return;
}
- if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- this.cleanUpPaste.defer(100, this);
+ var kv = s.split(":");
+ if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
return;
}
-
- };
- }
- }(),
-
- getAllAncestors: function()
- {
- var p = this.getSelectedNode();
- var a = [];
- if (!p) {
- a.push(p); // push blank onto stack..
- p = this.getParentElement();
- }
-
-
- while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
- a.push(p);
- p = p.parentNode;
- }
- a.push(this.doc.body);
- return a;
- },
- lastSel : false,
- lastSelNode : false,
-
-
- getSelection : function()
- {
- this.assignDocWin();
- return Roo.isIE ? this.doc.selection : this.win.getSelection();
- },
-
- getSelectedNode: function()
- {
- // this may only work on Gecko!!!
-
- // should we cache this!!!!
-
-
-
-
- var range = this.createRange(this.getSelection()).cloneRange();
-
- if (Roo.isIE) {
- var parent = range.parentElement();
- while (true) {
- var testRange = range.duplicate();
- testRange.moveToElementText(parent);
- if (testRange.inRange(range)) {
- break;
- }
- if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
- break;
- }
- parent = parent.parentElement;
- }
- return parent;
- }
-
- // is ancestor a text element.
- var ac = range.commonAncestorContainer;
- if (ac.nodeType == 3) {
- ac = ac.parentNode;
- }
-
- var ar = ac.childNodes;
-
- var nodes = [];
- var other_nodes = [];
- var has_other_nodes = false;
- for (var i=0;i<ar.length;i++) {
- if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
- continue;
- }
- // fullly contained node.
-
- if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
- nodes.push(ar[i]);
- continue;
- }
-
- // probably selected..
- if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
- other_nodes.push(ar[i]);
- continue;
- }
- // outer..
- if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
- continue;
- }
-
-
- has_other_nodes = true;
- }
- if (!nodes.length && other_nodes.length) {
- nodes= other_nodes;
- }
- if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
- return false;
- }
-
- return nodes[0];
- },
- createRange: function(sel)
- {
- // this has strange effects when using with
- // top toolbar - not sure if it's a great idea.
- //this.editor.contentWindow.focus();
- if (typeof sel != "undefined") {
- try {
- return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
- } catch(e) {
- return this.doc.createRange();
- }
- } else {
- return this.doc.createRange();
- }
- },
- getParentElement: function()
- {
-
- this.assignDocWin();
- var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
-
- var range = this.createRange(sel);
-
- try {
- var p = range.commonAncestorContainer;
- while (p.nodeType == 3) { // text node
- p = p.parentNode;
+ // what ever is left... we allow.
+ nstyle.push(s);
+ });
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
}
- return p;
- } catch (e) {
- return null;
- }
-
- },
- /***
- *
- * Range intersection.. the hard stuff...
- * '-1' = before
- * '0' = hits..
- * '1' = after.
- * [ -- selected range --- ]
- * [fail] [fail]
- *
- * basically..
- * if end is before start or hits it. fail.
- * if start is after end or hits it fail.
- *
- * if either hits (but other is outside. - then it's not
- *
- *
- **/
-
-
- // @see http://www.thismuchiknow.co.uk/?p=64.
- rangeIntersectsNode : function(range, node)
- {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
- }
-
- var rangeStartRange = range.cloneRange();
- rangeStartRange.collapse(true);
-
- var rangeEndRange = range.cloneRange();
- rangeEndRange.collapse(false);
-
- var nodeStartRange = nodeRange.cloneRange();
- nodeStartRange.collapse(true);
-
- var nodeEndRange = nodeRange.cloneRange();
- nodeEndRange.collapse(false);
-
- return rangeStartRange.compareBoundaryPoints(
- Range.START_TO_START, nodeEndRange) == -1 &&
- rangeEndRange.compareBoundaryPoints(
- Range.START_TO_START, nodeStartRange) == 1;
-
-
- },
- rangeCompareNode : function(range, node)
- {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
- }
-
-
- range.collapse(true);
-
- nodeRange.collapse(true);
-
- var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
- var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
-
- //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
-
- var nodeIsBefore = ss == 1;
- var nodeIsAfter = ee == -1;
-
- if (nodeIsBefore && nodeIsAfter) {
- return 0; // outer
- }
- if (!nodeIsBefore && nodeIsAfter) {
- return 1; //right trailed.
}
- if (nodeIsBefore && !nodeIsAfter) {
- return 2; // left trailed.
- }
- // fully contined.
- return 3;
- },
+ return true; // continue doing children..
+ }
+});/**
+ * @class Roo.htmleditor.FilterWord
+ * try and clean up all the mess that Word generates.
+ *
+ * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters
+
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
- // private? - in a new class?
- cleanUpPaste : function()
- {
- // cleans up the whole document..
- Roo.log('cleanuppaste');
-
- this.cleanUpChildren(this.doc.body);
- var clean = this.cleanWordChars(this.doc.body.innerHTML);
- if (clean != this.doc.body.innerHTML) {
- this.doc.body.innerHTML = clean;
- }
-
- },
-
- cleanWordChars : function(input) {// change the chars to hex code
- var he = Roo.HtmlEditorCore;
-
- var output = input;
- Roo.each(he.swapCodes, function(sw) {
- var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
-
- output = output.replace(swapper, sw[1]);
- });
-
- return output;
- },
-
-
- cleanUpChildren : function (n)
- {
- if (!n.childNodes.length) {
- return;
- }
- for (var i = n.childNodes.length-1; i > -1 ; i--) {
- this.cleanUpChild(n.childNodes[i]);
- }
- },
+Roo.htmleditor.FilterWord = function(cfg)
+{
+ // no need to apply config.
+ this.replaceDocBullets(cfg.node);
+ this.replaceAname(cfg.node);
+ // this is disabled as the removal is done by other filters;
+ // this.walk(cfg.node);
-
- cleanUpChild : function (node)
- {
- var ed = this;
- //console.log(node);
- if (node.nodeName == "#text") {
- // clean up silly Windows -- stuff?
- return;
- }
- if (node.nodeName == "#comment") {
- if (!this.allowComments) {
- node.parentNode.removeChild(node);
- }
- // clean up silly Windows -- stuff?
- return;
- }
- var lcname = node.tagName.toLowerCase();
- // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
- // whitelist of tags..
-
- if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
- // remove node.
- node.parentNode.removeChild(node);
- return;
-
- }
-
- var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
-
- // spans with no attributes - just remove them..
- if ((!node.attributes || !node.attributes.length) && lcname == 'span') {
- remove_keep_children = true;
- }
-
- // remove <a name=....> as rendering on yahoo mailer is borked with this.
- // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
-
- //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
- // remove_keep_children = true;
- //}
-
- if (remove_keep_children) {
- this.cleanUpChildren(node);
- // inserts everything just before this node...
- while (node.childNodes.length) {
- var cn = node.childNodes[0];
- node.removeChild(cn);
- node.parentNode.insertBefore(cn, node);
- }
- node.parentNode.removeChild(node);
- return;
- }
-
- if (!node.attributes || !node.attributes.length) {
-
-
-
-
- this.cleanUpChildren(node);
- return;
- }
-
- function cleanAttr(n,v)
- {
-
- if (v.match(/^\./) || v.match(/^\//)) {
- return;
- }
- if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/) || v.match(/^ftp:/)) {
- return;
- }
- if (v.match(/^#/)) {
- return;
- }
- if (v.match(/^\{/)) { // allow template editing.
- return;
- }
-// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
- node.removeAttribute(n);
-
- }
-
- var cwhite = this.cwhite;
- var cblack = this.cblack;
-
- function cleanStyle(n,v)
- {
- if (v.match(/expression/)) { //XSS?? should we even bother..
- node.removeAttribute(n);
- return;
- }
-
- var parts = v.split(/;/);
- var clean = [];
-
- Roo.each(parts, function(p) {
- p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if (!p.length) {
- return true;
- }
- var l = p.split(':').shift().replace(/\s+/g,'');
- l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
-
- if ( cwhite.length && cblack.indexOf(l) > -1) {
-// Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
- //node.removeAttribute(n);
- return true;
- }
- //Roo.log()
- // only allow 'c whitelisted system attributes'
- if ( cwhite.length && cwhite.indexOf(l) < 0) {
-// Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
- //node.removeAttribute(n);
- return true;
- }
-
-
-
-
- clean.push(p);
- return true;
- });
- if (clean.length) {
- node.setAttribute(n, clean.join(';'));
- } else {
- node.removeAttribute(n);
- }
-
- }
-
-
- for (var i = node.attributes.length-1; i > -1 ; i--) {
- var a = node.attributes[i];
- //console.log(a);
-
- if (a.name.toLowerCase().substr(0,2)=='on') {
- node.removeAttribute(a.name);
- continue;
- }
- if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
- node.removeAttribute(a.name);
- continue;
- }
- if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
- cleanAttr(a.name,a.value); // fixme..
- continue;
- }
- if (a.name == 'style') {
- cleanStyle(a.name,a.value);
- continue;
- }
- /// clean up MS crap..
- // tecnically this should be a list of valid class'es..
-
-
- if (a.name == 'class') {
- if (a.value.match(/^Mso/)) {
- node.removeAttribute('class');
- }
-
- if (a.value.match(/^body$/)) {
- node.removeAttribute('class');
- }
- continue;
- }
-
- // style cleanup!?
- // class cleanup?
-
- }
-
-
- this.cleanUpChildren(node);
-
-
- },
+}
+
+Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
+{
+ tag: true,
+
/**
* Clean up MS wordisms...
*/
- cleanWord : function(node)
+ replaceTag : function(node)
{
- if (!node) {
- this.cleanWord(this.doc.body);
- return;
- }
-
+
+ // no idea what this does - span with text, replaceds with just text.
if(
node.nodeName == 'SPAN' &&
!node.hasAttributes() &&
if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
}
+
node.parentNode.removeChild(node);
+ return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
}
- if (node.nodeName == "#text") {
- // clean up silly Windows -- stuff?
- return;
- }
- if (node.nodeName == "#comment") {
- node.parentNode.removeChild(node);
- // clean up silly Windows -- stuff?
- return;
- }
+
if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
node.parentNode.removeChild(node);
- return;
+ return false; // dont do chidlren
}
//Roo.log(node.tagName);
// remove - but keep children..
node.removeChild(cn);
node.parentNode.insertBefore(cn, node);
// move node to parent - and clean it..
- this.cleanWord(cn);
+ if (cn.nodeType == 1) {
+ this.replaceTag(cn);
+ }
+
}
node.parentNode.removeChild(node);
/// no need to iterate chidlren = it's got none..
//this.iterateChildren(node, this.cleanWord);
- return;
+ return false; // no need to iterate children.
}
// clean styles
if (node.className.length) {
node.removeAttribute('style');
}
}
- this.iterateChildren(node, this.cleanWord);
+ return true; // do children
},
- /**
- * iterateChildren of a Node, calling fn each time, using this as the scole..
- * @param {DomNode} node node to iterate children of.
- * @param {Function} fn method of this class to call on each item.
- */
- iterateChildren : function(node, fn)
+
+ styleToObject: function(node)
{
- if (!node.childNodes.length) {
+ var styles = (node.getAttribute("style") || '').split(";");
+ var ret = {};
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
return;
+ }
+ var kv = s.split(":");
+
+ // what ever is left... we allow.
+ ret[kv[0].trim()] = kv[1];
+ });
+ return ret;
+ },
+
+
+ replaceAname : function (doc)
+ {
+ // replace all the a/name without..
+ var aa = Array.from(doc.getElementsByTagName('a'));
+ for (var i = 0; i < aa.length; i++) {
+ var a = aa[i];
+ if (a.hasAttribute("name")) {
+ a.removeAttribute("name");
+ }
+ if (a.hasAttribute("href")) {
+ continue;
+ }
+ // reparent children.
+ this.removeNodeKeepChildren(a);
+
}
- for (var i = node.childNodes.length-1; i > -1 ; i--) {
- fn.call(this, node.childNodes[i])
- }
+
+
+
},
+
- /**
- * cleanTableWidths.
- *
- * Quite often pasting from word etc.. results in tables with column and widths.
- * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
- *
- */
- cleanTableWidths : function(node)
+ replaceDocBullets : function(doc)
{
-
-
- if (!node) {
- this.cleanTableWidths(this.doc.body);
- return;
+ // this is a bit odd - but it appears some indents use ql-indent-1
+ //Roo.log(doc.innerHTML);
+
+ var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
- // ignore list...
- if (node.nodeName == "#text" || node.nodeName == "#comment") {
- return;
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
- Roo.log(node.tagName);
- if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
- this.iterateChildren(node, this.cleanTableWidths);
- return;
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
- if (node.hasAttribute('width')) {
- node.removeAttribute('width');
+ listpara = Array.from(doc.getElementsByClassName('ql-indent-1'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
-
- if (node.hasAttribute("style")) {
- // pretty basic...
+ // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
+ var htwo = Array.from(doc.getElementsByTagName('h2'));
+ for( var i = 0; i < htwo.length; i ++) {
+ if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
+ htwo[i].className = "MsoListParagraph";
+ }
+ }
+ listpara = Array.from(doc.getElementsByClassName('MsoNormal'));
+ for( var i = 0; i < listpara.length; i ++) {
+ if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
+ listpara[i].className = "MsoListParagraph";
+ } else {
+ listpara[i].className = "MsoNormalx";
+ }
+ }
+
+ listpara = doc.getElementsByClassName('MsoListParagraph');
+ // Roo.log(doc.innerHTML);
+
+
+
+ while(listpara.length) {
- var styles = node.getAttribute("style").split(";");
- var nstyle = [];
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
+ this.replaceDocBullet(listpara.item(0));
+ }
+
+ },
+
+
+
+ replaceDocBullet : function(p)
+ {
+ // gather all the siblings.
+ var ns = p,
+ parent = p.parentNode,
+ doc = parent.ownerDocument,
+ items = [];
+
+ var listtype = 'ul';
+ while (ns) {
+ if (ns.nodeType != 1) {
+ ns = ns.nextSibling;
+ continue;
+ }
+ if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
+ break;
+ }
+ var spans = ns.getElementsByTagName('span');
+ if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
+ items.push(ns);
+ ns = ns.nextSibling;
+ has_list = true;
+ if (spans.length && spans[0].hasAttribute('style')) {
+ var style = this.styleToObject(spans[0]);
+ if (typeof(style['font-family']) != 'undefined' && !style['font-family'].match(/Symbol/)) {
+ listtype = 'ol';
+ }
}
- var kv = s.split(":");
- if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
- return;
+
+ continue;
+ }
+ var spans = ns.getElementsByTagName('span');
+ if (!spans.length) {
+ break;
+ }
+ var has_list = false;
+ for(var i = 0; i < spans.length; i++) {
+ if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
+ has_list = true;
+ break;
}
- // what ever is left... we allow.
- nstyle.push(s);
- });
- node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
- if (!nstyle.length) {
- node.removeAttribute('style');
}
+ if (!has_list) {
+ break;
+ }
+ items.push(ns);
+ ns = ns.nextSibling;
+
+
+ }
+ if (!items.length) {
+ ns.className = "";
+ return;
}
- this.iterateChildren(node, this.cleanTableWidths);
+ var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
+ parent.insertBefore(ul, p);
+ var lvl = 0;
+ var stack = [ ul ];
+ var last_li = false;
+ var margin_to_depth = {};
+ max_margins = -1;
- },
+ items.forEach(function(n, ipos) {
+ //Roo.log("got innertHMLT=" + n.innerHTML);
+
+ var spans = n.getElementsByTagName('span');
+ if (!spans.length) {
+ //Roo.log("No spans found");
+
+ parent.removeChild(n);
+
+
+ return; // skip it...
+ }
+
+
+ var num = 1;
+ var style = {};
+ for(var i = 0; i < spans.length; i++) {
+
+ style = this.styleToObject(spans[i]);
+ if (typeof(style['mso-list']) == 'undefined') {
+ continue;
+ }
+ if (listtype == 'ol') {
+ num = spans[i].innerText.replace(/[^0-9]+]/g,'') * 1;
+ }
+ spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
+ break;
+ }
+ //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
+ style = this.styleToObject(n); // mo-list is from the parent node.
+ if (typeof(style['mso-list']) == 'undefined') {
+ //Roo.log("parent is missing level");
+
+ parent.removeChild(n);
+
+ return;
+ }
+
+ var margin = style['margin-left'];
+ if (typeof(margin_to_depth[margin]) == 'undefined') {
+ max_margins++;
+ margin_to_depth[margin] = max_margins;
+ }
+ nlvl = margin_to_depth[margin] ;
+
+ if (nlvl > lvl) {
+ //new indent
+ var nul = doc.createElement(listtype); // what about number lists...
+ if (!last_li) {
+ last_li = doc.createElement('li');
+ stack[lvl].appendChild(last_li);
+ }
+ last_li.appendChild(nul);
+ stack[nlvl] = nul;
+
+ }
+ lvl = nlvl;
+
+ // not starting at 1..
+ if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
+ stack[nlvl].setAttribute("start", num);
+ }
+
+ var nli = stack[nlvl].appendChild(doc.createElement('li'));
+ last_li = nli;
+ nli.innerHTML = n.innerHTML;
+ //Roo.log("innerHTML = " + n.innerHTML);
+ parent.removeChild(n);
+
+
+
+
+ },this);
+
+
+
+
+ }
+});
+/**
+ * @class Roo.htmleditor.FilterStyleToTag
+ * part of the word stuff... - certain 'styles' should be converted to tags.
+ * eg.
+ * font-weight: bold -> bold
+ * ?? super / subscrit etc..
+ *
+ * @constructor
+* Run a new style to tag filter.
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterStyleToTag = function(cfg)
+{
- domToHTML : function(currentElement, depth, nopadtext) {
+ this.tags = {
+ B : [ 'fontWeight' , 'bold'],
+ I : [ 'fontStyle' , 'italic'],
+ //pre : [ 'font-style' , 'italic'],
+ // h1.. h6 ?? font-size?
+ SUP : [ 'verticalAlign' , 'super' ],
+ SUB : [ 'verticalAlign' , 'sub' ]
+
- depth = depth || 0;
- nopadtext = nopadtext || false;
+ };
- if (!currentElement) {
- return this.domToHTML(this.doc.body);
- }
+ Roo.apply(this, cfg);
+
+
+ this.walk(cfg.node);
+
+
+
+}
+
+
+Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
+{
+ tag: true, // all tags
+
+ tags : false,
+
+
+ replaceTag : function(node)
+ {
- //Roo.log(currentElement);
- var j;
- var allText = false;
- var nodeName = currentElement.nodeName;
- var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
- if (nodeName == '#text') {
-
- return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
+ if (node.getAttribute("style") === null) {
+ return true;
}
-
-
- var ret = '';
- if (nodeName != 'BODY') {
-
- var i = 0;
- // Prints the node tagName, such as <A>, <IMG>, etc
- if (tagName) {
- var attr = [];
- for(i = 0; i < currentElement.attributes.length;i++) {
- // quoting?
- var aname = currentElement.attributes.item(i).name;
- if (!currentElement.attributes.item(i).value.length) {
- continue;
- }
- attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
- }
-
- ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
- }
- else {
-
- // eack
+ var inject = [];
+ for (var k in this.tags) {
+ if (node.style[this.tags[k][0]] == this.tags[k][1]) {
+ inject.push(k);
+ node.style.removeProperty(this.tags[k][0]);
}
- } else {
- tagName = false;
}
- if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
- return ret;
+ if (!inject.length) {
+ return true;
}
- if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
- nopadtext = true;
+ var cn = Array.from(node.childNodes);
+ var nn = node;
+ Roo.each(inject, function(t) {
+ var nc = node.ownerDocument.createElement(t);
+ nn.appendChild(nc);
+ nn = nc;
+ });
+ for(var i = 0;i < cn.length;cn++) {
+ node.removeChild(cn[i]);
+ nn.appendChild(cn[i]);
}
+ return true /// iterate thru
+ }
+
+})/**
+ * @class Roo.htmleditor.FilterLongBr
+ * BR/BR/BR - keep a maximum of 2...
+ * @constructor
+ * Run a new Long BR Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterLongBr = function(cfg)
+{
+ // no need to apply config.
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
+{
+
+
+ tag : 'BR',
+
+
+ replaceTag : function(node)
+ {
+ var ps = node.nextSibling;
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.nextSibling;
+ }
- // Traverse the tree
- i = 0;
- var currentElementChild = currentElement.childNodes.item(i);
- var allText = true;
- var innerHTML = '';
- lastnode = '';
- while (currentElementChild) {
- // Formatting code (indent the tree so it looks nice on the screen)
- var nopad = nopadtext;
- if (lastnode == 'SPAN') {
- nopad = true;
- }
- // text
- if (currentElementChild.nodeName == '#text') {
- var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
- toadd = nopadtext ? toadd : toadd.trim();
- if (!nopad && toadd.length > 80) {
- innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
- }
- innerHTML += toadd;
-
- i++;
- currentElementChild = currentElement.childNodes.item(i);
- lastNode = '';
- continue;
- }
- allText = false;
-
- innerHTML += nopad ? '' : "\n" + (new Array( depth + 1 )).join( " " );
-
- // Recursively traverse the tree structure of the child node
- innerHTML += this.domToHTML(currentElementChild, depth+1, nopadtext);
- lastnode = currentElementChild.nodeName;
- i++;
- currentElementChild=currentElement.childNodes.item(i);
+ if (!ps && [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) {
+ node.parentNode.removeChild(node); // remove last BR inside one fo these tags
+ return false;
}
- ret += innerHTML;
+ if (!ps || ps.nodeType != 1) {
+ return false;
+ }
- if (!allText) {
- // The remaining code is mostly for formatting the tree
- ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
+ if (!ps || ps.tagName != 'BR') {
+
+ return false;
}
- if (tagName) {
- ret+= "</"+tagName+">";
+
+
+
+ if (!node.previousSibling) {
+ return false;
}
- return ret;
+ var ps = node.previousSibling;
- },
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.previousSibling;
+ }
+ if (!ps || ps.nodeType != 1) {
+ return false;
+ }
+ // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
+ if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
+ return false;
+ }
- applyBlacklists : function()
+ node.parentNode.removeChild(node); // remove me...
+
+ return false; // no need to do children
+
+ }
+
+});
+
+/**
+ * @class Roo.htmleditor.FilterBlock
+ * removes id / data-block and contenteditable that are associated with blocks
+ * usage should be done on a cloned copy of the dom
+ * @constructor
+* Run a new Attribute Filter { node : xxxx }}
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterBlock = function(cfg)
+{
+ Roo.apply(this, cfg);
+ var qa = cfg.node.querySelectorAll;
+ this.removeAttributes('data-block');
+ this.removeAttributes('contenteditable');
+ this.removeAttributes('id');
+
+}
+
+Roo.apply(Roo.htmleditor.FilterBlock.prototype,
+{
+ node: true, // all tags
+
+
+ removeAttributes : function(attr)
{
- var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
- var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
+ var ar = this.node.querySelectorAll('*[' + attr + ']');
+ for (var i =0;i<ar.length;i++) {
+ ar[i].removeAttribute(attr);
+ }
+ }
- this.white = [];
- this.black = [];
- Roo.each(Roo.HtmlEditorCore.white, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- this.white.push(tag);
-
- }, this);
- Roo.each(w, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- if (this.white.indexOf(tag) > -1) {
- return;
+
+
+});
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidySerializer
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ * @constructor
+ * @method Serializer
+ * @param {Object} settings Name/value settings object.
+ */
+
+
+Roo.htmleditor.TidySerializer = function(settings)
+{
+ Roo.apply(this, settings);
+
+ this.writer = new Roo.htmleditor.TidyWriter(settings);
+
+
+
+};
+Roo.htmleditor.TidySerializer.prototype = {
+
+ /**
+ * @param {boolean} inner do the inner of the node.
+ */
+ inner : false,
+
+ writer : false,
+
+ /**
+ * Serializes the specified node into a string.
+ *
+ * @example
+ * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
+ * @method serialize
+ * @param {DomElement} node Node instance to serialize.
+ * @return {String} String with HTML based on DOM tree.
+ */
+ serialize : function(node) {
+
+ // = settings.validate;
+ var writer = this.writer;
+ var self = this;
+ this.handlers = {
+ // #text
+ 3: function(node) {
+
+ writer.text(node.nodeValue, node);
+ },
+ // #comment
+ 8: function(node) {
+ writer.comment(node.nodeValue);
+ },
+ // Processing instruction
+ 7: function(node) {
+ writer.pi(node.name, node.nodeValue);
+ },
+ // Doctype
+ 10: function(node) {
+ writer.doctype(node.nodeValue);
+ },
+ // CDATA
+ 4: function(node) {
+ writer.cdata(node.nodeValue);
+ },
+ // Document fragment
+ 11: function(node) {
+ node = node.firstChild;
+ if (!node) {
+ return;
+ }
+ while(node) {
+ self.walk(node);
+ node = node.nextSibling
+ }
}
- this.white.push(tag);
+ };
+ writer.reset();
+ 1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
+ return writer.getContent();
+ },
+
+ walk: function(node)
+ {
+ var attrName, attrValue, sortedAttrs, i, l, elementRule,
+ handler = this.handlers[node.nodeType];
- }, this);
+ if (handler) {
+ handler(node);
+ return;
+ }
+
+ var name = node.nodeName;
+ var isEmpty = node.childNodes.length < 1;
+
+ var writer = this.writer;
+ var attrs = node.attributes;
+ // Sort attributes
+ writer.start(node.nodeName, attrs, isEmpty, node);
+ if (isEmpty) {
+ return;
+ }
+ node = node.firstChild;
+ if (!node) {
+ writer.end(name);
+ return;
+ }
+ while (node) {
+ this.walk(node);
+ node = node.nextSibling;
+ }
+ writer.end(name);
- Roo.each(Roo.HtmlEditorCore.black, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- this.black.push(tag);
-
- }, this);
+
+ }
+ // Serialize element and treat all non elements as fragments
+
+};
+
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyWriter
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Known issues?
+ * - not tested much with 'PRE' formated elements.
+ *
+ *
+ *
+ */
+
+Roo.htmleditor.TidyWriter = function(settings)
+{
+
+ // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
+ Roo.apply(this, settings);
+ this.html = [];
+ this.state = [];
+
+ this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
+
+}
+Roo.htmleditor.TidyWriter.prototype = {
+
+
+ state : false,
+
+ indent : ' ',
+
+ // part of state...
+ indentstr : '',
+ in_pre: false,
+ in_inline : false,
+ last_inline : false,
+ encode : false,
+
+
+ /**
+ * Writes the a start element such as <p id="a">.
+ *
+ * @method start
+ * @param {String} name Name of the element.
+ * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
+ * @param {Boolean} empty Optional empty state if the tag should end like <br />.
+ */
+ start: function(name, attrs, empty, node)
+ {
+ var i, l, attr, value;
- Roo.each(b, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- if (this.black.indexOf(tag) > -1) {
- return;
- }
- this.black.push(tag);
-
- }, this);
+ // there are some situations where adding line break && indentation will not work. will not work.
+ // <span / b / i ... formating?
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+ var in_pre = this.in_pre || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
- w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
- b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
+ var is_short = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
- this.cwhite = [];
- this.cblack = [];
- Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- this.cwhite.push(tag);
-
- }, this);
+ var add_lb = name == 'BR' ? false : in_inline;
- Roo.each(w, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- if (this.cwhite.indexOf(tag) > -1) {
- return;
- }
- this.cwhite.push(tag);
-
- }, this);
+ if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
+ i_inline = false;
+ }
+
+ var indentstr = this.indentstr;
+ // e_inline = elements that can be inline, but still allow \n before and after?
+ // only 'BR' ??? any others?
- Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
+ // ADD LINE BEFORE tage
+ if (!this.in_pre) {
+ if (in_inline) {
+ //code
+ if (name == 'BR') {
+ this.addLine();
+ } else if (this.lastElementEndsWS()) {
+ this.addLine();
+ } else{
+ // otherwise - no new line. (and dont indent.)
+ indentstr = '';
+ }
+
+ } else {
+ this.addLine();
}
- this.cblack.push(tag);
-
- }, this);
+ } else {
+ indentstr = '';
+ }
- Roo.each(b, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
+ this.html.push(indentstr + '<', name.toLowerCase());
+
+ if (attrs) {
+ for (i = 0, l = attrs.length; i < l; i++) {
+ attr = attrs[i];
+ this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
}
- if (this.cblack.indexOf(tag) > -1) {
- return;
+ }
+
+ if (empty) {
+ if (is_short) {
+ this.html[this.html.length] = '/>';
+ } else {
+ this.html[this.html.length] = '></' + name.toLowerCase() + '>';
}
- this.cblack.push(tag);
-
- }, this);
- },
-
- setStylesheets : function(stylesheets)
- {
- if(typeof(stylesheets) == 'string'){
- Roo.get(this.iframe.contentDocument.head).createChild({
- tag : 'link',
- rel : 'stylesheet',
- type : 'text/css',
- href : stylesheets
- });
+ var e_inline = name == 'BR' ? false : this.in_inline;
+ if (!e_inline && !this.in_pre) {
+ this.addLine();
+ }
return;
+
}
- var _this = this;
-
- Roo.each(stylesheets, function(s) {
- if(!s.length){
- return;
+ // not empty..
+ this.html[this.html.length] = '>';
+
+ // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+ /*
+ if (!in_inline && !in_pre) {
+ var cn = node.firstChild;
+ while(cn) {
+ if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
+ in_inline = true
+ break;
+ }
+ cn = cn.nextSibling;
}
-
- Roo.get(_this.iframe.contentDocument.head).createChild({
- tag : 'link',
- rel : 'stylesheet',
- type : 'text/css',
- href : s
- });
+
+ }
+ */
+
+
+ this.pushState({
+ indentstr : in_pre ? '' : (this.indentstr + this.indent),
+ in_pre : in_pre,
+ in_inline : in_inline
});
-
+ // add a line after if we are not in a
+
+ if (!in_inline && !in_pre) {
+ this.addLine();
+ }
+
+
+
},
- removeStylesheets : function()
+ lastElementEndsWS : function()
{
- var _this = this;
+ var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
+ if (value === false) {
+ return true;
+ }
+ return value.match(/\s+$/);
- Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
- s.remove();
- });
},
- setStyle : function(style)
- {
- Roo.get(this.iframe.contentDocument.head).createChild({
- tag : 'style',
- type : 'text/css',
- html : style
- });
-
- return;
- }
-
- // hide stuff that is not compatible
- /**
- * @event blur
- * @hide
- */
- /**
- * @event change
- * @hide
- */
/**
- * @event focus
- * @hide
+ * Writes the a end element such as </p>.
+ *
+ * @method end
+ * @param {String} name Name of the element.
*/
+ end: function(name) {
+ var value;
+ this.popState();
+ var indentstr = '';
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+
+ if (!this.in_pre && !in_inline) {
+ this.addLine();
+ indentstr = this.indentstr;
+ }
+ this.html.push(indentstr + '</', name.toLowerCase(), '>');
+ this.last_inline = in_inline;
+
+ // pop the indent state..
+ },
/**
- * @event specialkey
- * @hide
+ * Writes a text node.
+ *
+ * In pre - we should not mess with the contents.
+ *
+ *
+ * @method text
+ * @param {String} text String to write out.
+ * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
*/
+ text: function(in_text, node)
+ {
+ // if not in whitespace critical
+ if (in_text.length < 1) {
+ return;
+ }
+ var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
+
+ if (this.in_pre) {
+ this.html[this.html.length] = text;
+ return;
+ }
+
+ if (this.in_inline) {
+ text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
+ if (text != ' ') {
+ text = text.replace(/\s+/,' '); // all white space to single white space
+
+
+ // if next tag is '<BR>', then we can trim right..
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ node.nextSibling.nodeName == 'BR' )
+ {
+ text = text.replace(/\s+$/g,'');
+ }
+ // if previous tag was a BR, we can also trim..
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ node.previousSibling.nodeName == 'BR' )
+ {
+ text = this.indentstr + text.replace(/^\s+/g,'');
+ }
+ if (text.match(/\n/)) {
+ text = text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\n\s+$/,'');
+ }
+ // repace long lines
+
+ }
+
+ this.html[this.html.length] = text;
+ return;
+ }
+ // see if previous element was a inline element.
+ var indentstr = this.indentstr;
+
+ text = text.replace(/\s+/g," "); // all whitespace into single white space.
+
+ // should trim left?
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
+ {
+ indentstr = '';
+
+ } else {
+ this.addLine();
+ text = text.replace(/^\s+/,''); // trim left
+
+ }
+ // should trim right?
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
+ {
+ // noop
+
+ } else {
+ text = text.replace(/\s+$/,''); // trim right
+ }
+
+
+
+
+
+ if (text.length < 1) {
+ return;
+ }
+ if (!text.match(/\n/)) {
+ this.html.push(indentstr + text);
+ return;
+ }
+
+ text = this.indentstr + text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\s+$/,'');
+
+ this.html.push(text);
+
+ // split and indent..
+
+
+ },
/**
- * @cfg {String} fieldClass @hide
+ * Writes a cdata node such as <![CDATA[data]]>.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the cdata.
*/
+ cdata: function(text) {
+ this.html.push('<![CDATA[', text, ']]>');
+ },
/**
- * @cfg {String} focusClass @hide
- */
+ * Writes a comment node such as <!-- Comment -->.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the comment.
+ */
+ comment: function(text) {
+ this.html.push('<!--', text, '-->');
+ },
/**
- * @cfg {String} autoCreate @hide
+ * Writes a PI node such as <?xml attr="value" ?>.
+ *
+ * @method pi
+ * @param {String} name Name of the pi.
+ * @param {String} text String to write out inside the pi.
*/
+ pi: function(name, text) {
+ text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
+ this.indent != '' && this.html.push('\n');
+ },
/**
- * @cfg {String} inputType @hide
+ * Writes a doctype node such as <!DOCTYPE data>.
+ *
+ * @method doctype
+ * @param {String} text String to write out inside the doctype.
*/
+ doctype: function(text) {
+ this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
+ },
/**
- * @cfg {String} invalidClass @hide
- */
+ * Resets the internal buffer if one wants to reuse the writer.
+ *
+ * @method reset
+ */
+ reset: function() {
+ this.html.length = 0;
+ this.state = [];
+ this.pushState({
+ indentstr : '',
+ in_pre : false,
+ in_inline : false
+ })
+ },
/**
- * @cfg {String} invalidText @hide
+ * Returns the contents that got serialized.
+ *
+ * @method getContent
+ * @return {String} HTML contents that got written down.
*/
- /**
- * @cfg {String} msgFx @hide
- */
- /**
- * @cfg {String} validateOnBlur @hide
- */
-});
-
-Roo.HtmlEditorCore.white = [
- 'area', 'br', 'img', 'input', 'hr', 'wbr',
+ getContent: function() {
+ return this.html.join('').replace(/\n$/, '');
+ },
+
+ pushState : function(cfg)
+ {
+ this.state.push(cfg);
+ Roo.apply(this, cfg);
+ },
+
+ popState : function()
+ {
+ if (this.state.length < 1) {
+ return; // nothing to push
+ }
+ var cfg = {
+ in_pre: false,
+ indentstr : ''
+ };
+ this.state.pop();
+ if (this.state.length > 0) {
+ cfg = this.state[this.state.length-1];
+ }
+ Roo.apply(this, cfg);
+ },
+
+ addLine: function()
+ {
+ if (this.html.length < 1) {
+ return;
+ }
- 'address', 'blockquote', 'center', 'dd', 'dir', 'div',
- 'dl', 'dt', 'h1', 'h2', 'h3', 'h4',
- 'h5', 'h6', 'hr', 'isindex', 'listing', 'marquee',
- 'menu', 'multicol', 'ol', 'p', 'plaintext', 'pre',
- 'table', 'ul', 'xmp',
-
- 'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th',
- 'thead', 'tr',
-
- 'dir', 'menu', 'ol', 'ul', 'dl',
-
- 'embed', 'object'
-];
-
+
+ var value = this.html[this.html.length - 1];
+ if (value.length > 0 && '\n' !== value) {
+ this.html.push('\n');
+ }
+ }
+
+
+//'pre script noscript style textarea video audio iframe object code'
+// shortended... 'area base basefont br col frame hr img input isindex link meta param embed source wbr track');
+// inline
+};
-Roo.HtmlEditorCore.black = [
- // 'embed', 'object', // enable - backend responsiblity to clean thiese
- 'applet', //
- 'base', 'basefont', 'bgsound', 'blink', 'body',
- 'frame', 'frameset', 'head', 'html', 'ilayer',
- 'iframe', 'layer', 'link', 'meta', 'object',
- 'script', 'style' ,'title', 'xml' // clean later..
+Roo.htmleditor.TidyWriter.inline_elements = [
+ 'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
+ 'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
];
-Roo.HtmlEditorCore.clean = [
- 'script', 'style', 'title', 'xml'
+Roo.htmleditor.TidyWriter.shortend_elements = [
+ 'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
+ 'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
];
-Roo.HtmlEditorCore.remove = [
- 'font'
-];
-// attributes..
-Roo.HtmlEditorCore.ablack = [
- 'on'
-];
+Roo.htmleditor.TidyWriter.whitespace_elements = [
+ 'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
+];/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyEntities
+ * @static
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Not 100% sure this is actually used or needed.
+ */
+
+Roo.htmleditor.TidyEntities = {
-Roo.HtmlEditorCore.aclean = [
- 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
-];
+ /**
+ * initialize data..
+ */
+ init : function (){
+
+ this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
+
+ },
-// protocols..
-Roo.HtmlEditorCore.pwhite= [
- 'http', 'https', 'mailto'
-];
-// white listed style attributes.
-Roo.HtmlEditorCore.cwhite= [
- // 'text-align', /// default is to allow most things..
-
+ buildEntitiesLookup: function(items, radix) {
+ var i, chr, entity, lookup = {};
+ if (!items) {
+ return {};
+ }
+ items = typeof(items) == 'string' ? items.split(',') : items;
+ radix = radix || 10;
+ // Build entities lookup table
+ for (i = 0; i < items.length; i += 2) {
+ chr = String.fromCharCode(parseInt(items[i], radix));
+ // Only add non base entities
+ if (!this.baseEntities[chr]) {
+ entity = '&' + items[i + 1] + ';';
+ lookup[chr] = entity;
+ lookup[entity] = chr;
+ }
+ }
+ return lookup;
+
+ },
+
+ asciiMap : {
+ 128: '€',
+ 130: '‚',
+ 131: 'ƒ',
+ 132: '„',
+ 133: '…',
+ 134: '†',
+ 135: '‡',
+ 136: 'ˆ',
+ 137: '‰',
+ 138: 'Š',
+ 139: '‹',
+ 140: 'Œ',
+ 142: 'Ž',
+ 145: '‘',
+ 146: '’',
+ 147: '“',
+ 148: '”',
+ 149: '•',
+ 150: '–',
+ 151: '—',
+ 152: '˜',
+ 153: '™',
+ 154: 'š',
+ 155: '›',
+ 156: 'œ',
+ 158: 'ž',
+ 159: 'Ÿ'
+ },
+ // Raw entities
+ baseEntities : {
+ '"': '"',
+ // Needs to be escaped since the YUI compressor would otherwise break the code
+ '\'': ''',
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '`': '`'
+ },
+ // Reverse lookup table for raw entities
+ reverseEntities : {
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '"': '"',
+ ''': '\''
+ },
+
+ attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ rawCharsRegExp : /[<>&\"\']/g,
+ entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
+ namedEntities : false,
+ namedEntitiesData : [
+ '50',
+ 'nbsp',
+ '51',
+ 'iexcl',
+ '52',
+ 'cent',
+ '53',
+ 'pound',
+ '54',
+ 'curren',
+ '55',
+ 'yen',
+ '56',
+ 'brvbar',
+ '57',
+ 'sect',
+ '58',
+ 'uml',
+ '59',
+ 'copy',
+ '5a',
+ 'ordf',
+ '5b',
+ 'laquo',
+ '5c',
+ 'not',
+ '5d',
+ 'shy',
+ '5e',
+ 'reg',
+ '5f',
+ 'macr',
+ '5g',
+ 'deg',
+ '5h',
+ 'plusmn',
+ '5i',
+ 'sup2',
+ '5j',
+ 'sup3',
+ '5k',
+ 'acute',
+ '5l',
+ 'micro',
+ '5m',
+ 'para',
+ '5n',
+ 'middot',
+ '5o',
+ 'cedil',
+ '5p',
+ 'sup1',
+ '5q',
+ 'ordm',
+ '5r',
+ 'raquo',
+ '5s',
+ 'frac14',
+ '5t',
+ 'frac12',
+ '5u',
+ 'frac34',
+ '5v',
+ 'iquest',
+ '60',
+ 'Agrave',
+ '61',
+ 'Aacute',
+ '62',
+ 'Acirc',
+ '63',
+ 'Atilde',
+ '64',
+ 'Auml',
+ '65',
+ 'Aring',
+ '66',
+ 'AElig',
+ '67',
+ 'Ccedil',
+ '68',
+ 'Egrave',
+ '69',
+ 'Eacute',
+ '6a',
+ 'Ecirc',
+ '6b',
+ 'Euml',
+ '6c',
+ 'Igrave',
+ '6d',
+ 'Iacute',
+ '6e',
+ 'Icirc',
+ '6f',
+ 'Iuml',
+ '6g',
+ 'ETH',
+ '6h',
+ 'Ntilde',
+ '6i',
+ 'Ograve',
+ '6j',
+ 'Oacute',
+ '6k',
+ 'Ocirc',
+ '6l',
+ 'Otilde',
+ '6m',
+ 'Ouml',
+ '6n',
+ 'times',
+ '6o',
+ 'Oslash',
+ '6p',
+ 'Ugrave',
+ '6q',
+ 'Uacute',
+ '6r',
+ 'Ucirc',
+ '6s',
+ 'Uuml',
+ '6t',
+ 'Yacute',
+ '6u',
+ 'THORN',
+ '6v',
+ 'szlig',
+ '70',
+ 'agrave',
+ '71',
+ 'aacute',
+ '72',
+ 'acirc',
+ '73',
+ 'atilde',
+ '74',
+ 'auml',
+ '75',
+ 'aring',
+ '76',
+ 'aelig',
+ '77',
+ 'ccedil',
+ '78',
+ 'egrave',
+ '79',
+ 'eacute',
+ '7a',
+ 'ecirc',
+ '7b',
+ 'euml',
+ '7c',
+ 'igrave',
+ '7d',
+ 'iacute',
+ '7e',
+ 'icirc',
+ '7f',
+ 'iuml',
+ '7g',
+ 'eth',
+ '7h',
+ 'ntilde',
+ '7i',
+ 'ograve',
+ '7j',
+ 'oacute',
+ '7k',
+ 'ocirc',
+ '7l',
+ 'otilde',
+ '7m',
+ 'ouml',
+ '7n',
+ 'divide',
+ '7o',
+ 'oslash',
+ '7p',
+ 'ugrave',
+ '7q',
+ 'uacute',
+ '7r',
+ 'ucirc',
+ '7s',
+ 'uuml',
+ '7t',
+ 'yacute',
+ '7u',
+ 'thorn',
+ '7v',
+ 'yuml',
+ 'ci',
+ 'fnof',
+ 'sh',
+ 'Alpha',
+ 'si',
+ 'Beta',
+ 'sj',
+ 'Gamma',
+ 'sk',
+ 'Delta',
+ 'sl',
+ 'Epsilon',
+ 'sm',
+ 'Zeta',
+ 'sn',
+ 'Eta',
+ 'so',
+ 'Theta',
+ 'sp',
+ 'Iota',
+ 'sq',
+ 'Kappa',
+ 'sr',
+ 'Lambda',
+ 'ss',
+ 'Mu',
+ 'st',
+ 'Nu',
+ 'su',
+ 'Xi',
+ 'sv',
+ 'Omicron',
+ 't0',
+ 'Pi',
+ 't1',
+ 'Rho',
+ 't3',
+ 'Sigma',
+ 't4',
+ 'Tau',
+ 't5',
+ 'Upsilon',
+ 't6',
+ 'Phi',
+ 't7',
+ 'Chi',
+ 't8',
+ 'Psi',
+ 't9',
+ 'Omega',
+ 'th',
+ 'alpha',
+ 'ti',
+ 'beta',
+ 'tj',
+ 'gamma',
+ 'tk',
+ 'delta',
+ 'tl',
+ 'epsilon',
+ 'tm',
+ 'zeta',
+ 'tn',
+ 'eta',
+ 'to',
+ 'theta',
+ 'tp',
+ 'iota',
+ 'tq',
+ 'kappa',
+ 'tr',
+ 'lambda',
+ 'ts',
+ 'mu',
+ 'tt',
+ 'nu',
+ 'tu',
+ 'xi',
+ 'tv',
+ 'omicron',
+ 'u0',
+ 'pi',
+ 'u1',
+ 'rho',
+ 'u2',
+ 'sigmaf',
+ 'u3',
+ 'sigma',
+ 'u4',
+ 'tau',
+ 'u5',
+ 'upsilon',
+ 'u6',
+ 'phi',
+ 'u7',
+ 'chi',
+ 'u8',
+ 'psi',
+ 'u9',
+ 'omega',
+ 'uh',
+ 'thetasym',
+ 'ui',
+ 'upsih',
+ 'um',
+ 'piv',
+ '812',
+ 'bull',
+ '816',
+ 'hellip',
+ '81i',
+ 'prime',
+ '81j',
+ 'Prime',
+ '81u',
+ 'oline',
+ '824',
+ 'frasl',
+ '88o',
+ 'weierp',
+ '88h',
+ 'image',
+ '88s',
+ 'real',
+ '892',
+ 'trade',
+ '89l',
+ 'alefsym',
+ '8cg',
+ 'larr',
+ '8ch',
+ 'uarr',
+ '8ci',
+ 'rarr',
+ '8cj',
+ 'darr',
+ '8ck',
+ 'harr',
+ '8dl',
+ 'crarr',
+ '8eg',
+ 'lArr',
+ '8eh',
+ 'uArr',
+ '8ei',
+ 'rArr',
+ '8ej',
+ 'dArr',
+ '8ek',
+ 'hArr',
+ '8g0',
+ 'forall',
+ '8g2',
+ 'part',
+ '8g3',
+ 'exist',
+ '8g5',
+ 'empty',
+ '8g7',
+ 'nabla',
+ '8g8',
+ 'isin',
+ '8g9',
+ 'notin',
+ '8gb',
+ 'ni',
+ '8gf',
+ 'prod',
+ '8gh',
+ 'sum',
+ '8gi',
+ 'minus',
+ '8gn',
+ 'lowast',
+ '8gq',
+ 'radic',
+ '8gt',
+ 'prop',
+ '8gu',
+ 'infin',
+ '8h0',
+ 'ang',
+ '8h7',
+ 'and',
+ '8h8',
+ 'or',
+ '8h9',
+ 'cap',
+ '8ha',
+ 'cup',
+ '8hb',
+ 'int',
+ '8hk',
+ 'there4',
+ '8hs',
+ 'sim',
+ '8i5',
+ 'cong',
+ '8i8',
+ 'asymp',
+ '8j0',
+ 'ne',
+ '8j1',
+ 'equiv',
+ '8j4',
+ 'le',
+ '8j5',
+ 'ge',
+ '8k2',
+ 'sub',
+ '8k3',
+ 'sup',
+ '8k4',
+ 'nsub',
+ '8k6',
+ 'sube',
+ '8k7',
+ 'supe',
+ '8kl',
+ 'oplus',
+ '8kn',
+ 'otimes',
+ '8l5',
+ 'perp',
+ '8m5',
+ 'sdot',
+ '8o8',
+ 'lceil',
+ '8o9',
+ 'rceil',
+ '8oa',
+ 'lfloor',
+ '8ob',
+ 'rfloor',
+ '8p9',
+ 'lang',
+ '8pa',
+ 'rang',
+ '9ea',
+ 'loz',
+ '9j0',
+ 'spades',
+ '9j3',
+ 'clubs',
+ '9j5',
+ 'hearts',
+ '9j6',
+ 'diams',
+ 'ai',
+ 'OElig',
+ 'aj',
+ 'oelig',
+ 'b0',
+ 'Scaron',
+ 'b1',
+ 'scaron',
+ 'bo',
+ 'Yuml',
+ 'm6',
+ 'circ',
+ 'ms',
+ 'tilde',
+ '802',
+ 'ensp',
+ '803',
+ 'emsp',
+ '809',
+ 'thinsp',
+ '80c',
+ 'zwnj',
+ '80d',
+ 'zwj',
+ '80e',
+ 'lrm',
+ '80f',
+ 'rlm',
+ '80j',
+ 'ndash',
+ '80k',
+ 'mdash',
+ '80o',
+ 'lsquo',
+ '80p',
+ 'rsquo',
+ '80q',
+ 'sbquo',
+ '80s',
+ 'ldquo',
+ '80t',
+ 'rdquo',
+ '80u',
+ 'bdquo',
+ '810',
+ 'dagger',
+ '811',
+ 'Dagger',
+ '81g',
+ 'permil',
+ '81p',
+ 'lsaquo',
+ '81q',
+ 'rsaquo',
+ '85c',
+ 'euro'
+ ],
+
-// 'font-size'//??
-];
+ /**
+ * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
+ *
+ * @method encodeRaw
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
+ */
+ encodeRaw: function(text, attr)
+ {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
+ },
+ /**
+ * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
+ * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
+ * and is exposed as the DOMUtils.encode function.
+ *
+ * @method encodeAllRaw
+ * @param {String} text Text to encode.
+ * @return {String} Entity encoded text.
+ */
+ encodeAllRaw: function(text) {
+ var t = this;
+ return ('' + text).replace(this.rawCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
+ },
+ /**
+ * Encodes the specified string using numeric entities. The core entities will be
+ * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
+ *
+ * @method encodeNumeric
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
+ */
+ encodeNumeric: function(text, attr) {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ // Multi byte sequence convert it to a single entity
+ if (chr.length > 1) {
+ return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
+ }
+ return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
+ });
+ },
+ /**
+ * Encodes the specified string using named entities. The core entities will be encoded
+ * as named ones but all non lower ascii characters will be encoded into named entities.
+ *
+ * @method encodeNamed
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @param {Object} entities Optional parameter with entities to use.
+ * @return {String} Entity encoded text.
+ */
+ encodeNamed: function(text, attr, entities) {
+ var t = this;
+ entities = entities || this.namedEntities;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || chr;
+ });
+ },
+ /**
+ * Returns an encode function based on the name(s) and it's optional entities.
+ *
+ * @method getEncodeFunc
+ * @param {String} name Comma separated list of encoders for example named,numeric.
+ * @param {String} entities Optional parameter with entities to use instead of the built in set.
+ * @return {function} Encode function to be used.
+ */
+ getEncodeFunc: function(name, entities) {
+ entities = this.buildEntitiesLookup(entities) || this.namedEntities;
+ var t = this;
+ function encodeNamedAndNumeric(text, attr) {
+ return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
+ });
+ }
-// black listed style attributes.
-Roo.HtmlEditorCore.cblack= [
- // 'font-size' -- this can be set by the project
-];
+ function encodeCustomNamed(text, attr) {
+ return t.encodeNamed(text, attr, entities);
+ }
+ // Replace + with , to be compatible with previous TinyMCE versions
+ name = this.makeMap(name.replace(/\+/g, ','));
+ // Named and numeric encoder
+ if (name.named && name.numeric) {
+ return this.encodeNamedAndNumeric;
+ }
+ // Named encoder
+ if (name.named) {
+ // Custom names
+ if (entities) {
+ return encodeCustomNamed;
+ }
+ return this.encodeNamed;
+ }
+ // Numeric
+ if (name.numeric) {
+ return this.encodeNumeric;
+ }
+ // Raw encoder
+ return this.encodeRaw;
+ },
+ /**
+ * Decodes the specified string, this will replace entities with raw UTF characters.
+ *
+ * @method decode
+ * @param {String} text Text to entity decode.
+ * @return {String} Entity decoded string.
+ */
+ decode: function(text)
+ {
+ var t = this;
+ return text.replace(this.entityRegExp, function(all, numeric) {
+ if (numeric) {
+ numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
+ // Support upper UTF
+ if (numeric > 65535) {
+ numeric -= 65536;
+ return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
+ }
+ return t.asciiMap[numeric] || String.fromCharCode(numeric);
+ }
+ return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+ });
+ },
+ nativeDecode : function (text) {
+ return text;
+ },
+ makeMap : function (items, delim, map) {
+ var i;
+ items = items || [];
+ delim = delim || ',';
+ if (typeof items == "string") {
+ items = items.split(delim);
+ }
+ map = map || {};
+ i = items.length;
+ while (i--) {
+ map[items[i]] = {};
+ }
+ return map;
+ }
+};
+
+
+
+Roo.htmleditor.TidyEntities.init();
+/**
+ * @class Roo.htmleditor.KeyEnter
+ * Handle Enter press..
+ * @cfg {Roo.HtmlEditorCore} core the editor.
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
-Roo.HtmlEditorCore.swapCodes =[
- [ 8211, "–" ],
- [ 8212, "—" ],
- [ 8216, "'" ],
- [ 8217, "'" ],
- [ 8220, '"' ],
- [ 8221, '"' ],
- [ 8226, "*" ],
- [ 8230, "..." ]
-];
- //<script type="text/javascript">
-/*
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * Licence LGPL
- *
- */
-
+
+Roo.htmleditor.KeyEnter = function(cfg) {
+ Roo.apply(this, cfg);
+ // this does not actually call walk as it's really just a abstract class
-Roo.form.HtmlEditor = function(config){
-
+ Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
+}
+
+//Roo.htmleditor.KeyEnter.i = 0;
+
+
+Roo.htmleditor.KeyEnter.prototype = {
+ core : false,
- Roo.form.HtmlEditor.superclass.constructor.call(this, config);
+ keypress : function(e)
+ {
+ if (e.charCode != 13 && e.charCode != 10) {
+ Roo.log([e.charCode,e]);
+ return true;
+ }
+ e.preventDefault();
+ // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
+ var doc = this.core.doc;
+ //add a new line
+
- if (!this.toolbars) {
- this.toolbars = [];
- }
- this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+ var sel = this.core.getSelection();
+ var range = sel.getRangeAt(0);
+ var n = range.commonAncestorContainer;
+ var pc = range.closest([ 'ol', 'ul']);
+ var pli = range.closest('li');
+ if (!pc || e.ctrlKey) {
+ // on it list, or ctrl pressed.
+ if (!e.ctrlKey) {
+ sel.insertNode('br', 'after');
+ } else {
+ // only do this if we have ctrl key..
+ var br = doc.createElement('br');
+ br.className = 'clear';
+ br.setAttribute('style', 'clear: both');
+ sel.insertNode(br, 'after');
+ }
+
+
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+ return false;
+ }
+
+ // deal with <li> insetion
+ if (pli.innerText.trim() == '' &&
+ pli.previousSibling &&
+ pli.previousSibling.nodeName == 'LI' &&
+ pli.previousSibling.innerText.trim() == '') {
+ pli.parentNode.removeChild(pli.previousSibling);
+ sel.cursorAfter(pc);
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+ return false;
+ }
+ var li = doc.createElement('LI');
+ li.innerHTML = ' ';
+ if (!pli || !pli.firstSibling) {
+ pc.appendChild(li);
+ } else {
+ pli.parentNode.insertBefore(li, pli.firstSibling);
+ }
+ sel.cursorText (li.firstChild);
+
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+
+ return false;
+
+
+
+
+ }
};
+
+/**
+ * @class Roo.htmleditor.Block
+ * Base class for html editor blocks - do not use it directly .. extend it..
+ * @cfg {DomElement} node The node to apply stuff to.
+ * @cfg {String} friendly_name the name that appears in the context bar about this block
+ * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
+
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+Roo.htmleditor.Block = function(cfg)
+{
+ // do nothing .. should not be called really.
+}
/**
- * @class Roo.form.HtmlEditor
- * @extends Roo.form.Field
- * Provides a lightweight HTML Editor component.
- *
- * This has been tested on Fireforx / Chrome.. IE may not be so great..
- *
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
- * supported by this editor.</b><br/><br/>
- * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ * factory method to get the block from an element (using cache if necessary)
+ * @static
+ * @param {HtmlElement} the dom element
*/
-Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
- /**
- * @cfg {Boolean} clearUp
- */
- clearUp : true,
- /**
- * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
- */
- toolbars : false,
-
- /**
- * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
- * Roo.resizable.
- */
- resizable : false,
- /**
- * @cfg {Number} height (in pixels)
- */
- height: 300,
- /**
- * @cfg {Number} width (in pixels)
- */
- width: 500,
+Roo.htmleditor.Block.factory = function(node)
+{
+ var cc = Roo.htmleditor.Block.cache;
+ var id = Roo.get(node).id;
+ if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
+ Roo.htmleditor.Block.cache[id].readElement(node);
+ return Roo.htmleditor.Block.cache[id];
+ }
+ var db = node.getAttribute('data-block');
+ if (!db) {
+ db = node.nodeName.toLowerCase().toUpperCaseFirst();
+ }
+ var cls = Roo.htmleditor['Block' + db];
+ if (typeof(cls) == 'undefined') {
+ //Roo.log(node.getAttribute('data-block'));
+ Roo.log("OOps missing block : " + 'Block' + db);
+ return false;
+ }
+ Roo.htmleditor.Block.cache[id] = new cls({ node: node });
+ return Roo.htmleditor.Block.cache[id]; /// should trigger update element
+};
+
+/**
+ * initalize all Elements from content that are 'blockable'
+ * @static
+ * @param the body element
+ */
+Roo.htmleditor.Block.initAll = function(body, type)
+{
+ if (typeof(type) == 'undefined') {
+ var ia = Roo.htmleditor.Block.initAll;
+ ia(body,'table');
+ ia(body,'td');
+ ia(body,'figure');
+ return;
+ }
+ Roo.each(Roo.get(body).query(type), function(e) {
+ Roo.htmleditor.Block.factory(e);
+ },this);
+};
+// question goes here... do we need to clear out this cache sometimes?
+// or show we make it relivant to the htmleditor.
+Roo.htmleditor.Block.cache = {};
+
+Roo.htmleditor.Block.prototype = {
- /**
- * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
- *
- */
- stylesheets: false,
+ node : false,
+ // used by context menu
+ friendly_name : 'Based Block',
- /**
- * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
- *
- */
- cblack: false,
+ // text for button to delete this element
+ deleteTitle : false,
+
+ context : false,
/**
- * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
- *
+ * Update a node with values from this object
+ * @param {DomElement} node
*/
- cwhite: false,
-
+ updateElement : function(node)
+ {
+ Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
+ },
/**
- * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
- *
+ * convert to plain HTML for calling insertAtCursor..
*/
- black: false,
+ toHTML : function()
+ {
+ return Roo.DomHelper.markup(this.toObject());
+ },
/**
- * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
- *
+ * used by readEleemnt to extract data from a node
+ * may need improving as it's pretty basic
+
+ * @param {DomElement} node
+ * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
+ * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
+ * @param {String} style the style property - eg. text-align
*/
- white: false,
+ getVal : function(node, tag, attr, style)
+ {
+ var n = node;
+ if (tag !== true && n.tagName != tag.toUpperCase()) {
+ // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+ // but kiss for now.
+ n = node.getElementsByTagName(tag).item(0);
+ }
+ if (!n) {
+ return '';
+ }
+ if (attr === false) {
+ return n;
+ }
+ if (attr == 'html') {
+ return n.innerHTML;
+ }
+ if (attr == 'style') {
+ return n.style[style];
+ }
+
+ return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
+
+ },
/**
- * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * (override this)
*/
- allowComments: false,
+ toObject : function()
+ {
+ return {};
+ },
+ /**
+ * Read a node that has a 'data-block' property - and extract the values from it.
+ * @param {DomElement} node - the node
+ */
+ readElement : function(node)
+ {
+
+ }
- // id of frame..
- frameId: false,
- // private properties
- validationEvent : false,
- deferHeight: true,
- initialized : false,
- activated : false,
+};
+
+
+
+/**
+ * @class Roo.htmleditor.BlockFigure
+ * Block that has an image and a figcaption
+ * @cfg {String} image_src the url for the image
+ * @cfg {String} align (left|right) alignment for the block default left
+ * @cfg {String} caption the text to appear below (and in the alt tag)
+ * @cfg {String} caption_display (block|none) display or not the caption
+ * @cfg {String|number} image_width the width of the image number or %?
+ * @cfg {String|number} image_height the height of the image number or %?
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+}
+Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
+
- onFocus : Roo.emptyFn,
- iframePad:3,
- hideMode:'offsets',
+ // setable values.
+ image_src: '',
+ align: 'center',
+ caption : '',
+ caption_display : 'block',
+ width : '100%',
+ cls : '',
+ href: '',
+ video_url : '',
- actionMode : 'container', // defaults to hiding it...
+ // margin: '2%', not used
- defaultAutoCreate : { // modified by initCompnoent..
- tag: "textarea",
- style:"width:500px;height:300px;",
- autocomplete: "new-password"
- },
+ text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
- // private
- initComponent : function(){
- this.addEvents({
- /**
- * @event initialize
- * Fires when the editor is fully initialized (including the iframe)
- * @param {HtmlEditor} this
- */
- initialize: true,
- /**
- * @event activate
- * Fires when the editor is first receives the focus. Any insertion must wait
- * until after this event.
- * @param {HtmlEditor} this
- */
- activate: true,
- /**
- * @event beforesync
- * Fires before the textarea is updated with content from the editor iframe. Return false
- * to cancel the sync.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- beforesync: true,
- /**
- * @event beforepush
- * Fires before the iframe editor is updated with content from the textarea. Return false
- * to cancel the push.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- beforepush: true,
- /**
- * @event sync
- * Fires when the textarea is updated with content from the editor iframe.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- sync: true,
- /**
- * @event push
- * Fires when the iframe editor is updated with content from the textarea.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- push: true,
- /**
- * @event editmodechange
- * Fires when the editor switches edit modes
- * @param {HtmlEditor} this
- * @param {Boolean} sourceEdit True if source edit, false if standard editing.
- */
- editmodechange: true,
- /**
- * @event editorevent
- * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
- * @param {HtmlEditor} this
- */
- editorevent: true,
- /**
- * @event firstfocus
- * Fires when on first focus - needed by toolbars..
- * @param {HtmlEditor} this
- */
- firstfocus: true,
- /**
- * @event autosave
- * Auto save the htmlEditor value as a file into Events
- * @param {HtmlEditor} this
- */
- autosave: true,
- /**
- * @event savedpreview
- * preview the saved version of htmlEditor
- * @param {HtmlEditor} this
- */
- savedpreview: true,
-
- /**
- * @event stylesheetsclick
- * Fires when press the Sytlesheets button
- * @param {Roo.HtmlEditorCore} this
- */
- stylesheetsclick: true
- });
- this.defaultAutoCreate = {
- tag: "textarea",
- style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
- autocomplete: "new-password"
+
+ // used by context menu
+ friendly_name : 'Image with caption',
+ deleteTitle : "Delete Image and Caption",
+
+ contextMenu : function(toolbar)
+ {
+
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
};
- },
-
- /**
- * Protected method that will not generally be called directly. It
- * is called when the editor creates its toolbar. Override this method if you need to
- * add custom toolbar buttons.
- * @param {HtmlEditor} editor
- */
- createToolbar : function(editor){
- Roo.log("create toolbars");
- if (!editor.toolbars || !editor.toolbars.length) {
- editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
- }
- for (var i =0 ; i < editor.toolbars.length;i++) {
- editor.toolbars[i] = Roo.factory(
- typeof(editor.toolbars[i]) == 'string' ?
- { xtype: editor.toolbars[i]} : editor.toolbars[i],
- Roo.form.HtmlEditor);
- editor.toolbars[i].init(editor);
- }
-
- },
-
-
- // private
- onRender : function(ct, position)
- {
- var _t = this;
- Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- this.wrap = this.el.wrap({
- cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
- });
+ var syncValue = toolbar.editorcore.syncValue;
- this.editorcore.onRender(ct, position);
+ var fields = {};
+
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Source: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'Button',
+ text: 'Change Image URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Image Source URL",
+ msg : "Enter the url for the image",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.image_src = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.image_src
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
- if (this.resizable) {
- this.resizeEl = new Roo.Resizable(this.wrap, {
- pinned : true,
- wrap: true,
- dynamic : true,
- minHeight : this.height,
- height: this.height,
- handles : this.resizable,
- width: this.width,
+ {
+ xtype : 'Button',
+ text: 'Change Link URL',
+
listeners : {
- resize : function(r, w, h) {
- _t.onResize(w,h); // -something
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Link URL",
+ msg : "Enter the url for the link - leave blank to have no link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.href = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.href
+ });
}
- }
- });
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: 'Show Video URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ Roo.MessageBox.alert("Video URL",
+ block().video_url == '' ? 'This image is not linked ot a video' :
+ 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
+ }
+ },
+ xns : rooui.Toolbar
+ },
- }
- this.createToolbar(this);
-
-
- if(!this.width){
- this.setSize(this.wrap.getSize());
- }
- if (this.resizeEl) {
- this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
- // should trigger onReize..
- }
-
- this.keyNav = new Roo.KeyNav(this.el, {
- "tab" : function(e){
- e.preventDefault();
-
- var value = this.getValue();
-
- var start = this.el.dom.selectionStart;
- var end = this.el.dom.selectionEnd;
-
- if(!e.shiftKey){
-
- this.setValue(value.substring(0, start) + "\t" + value.substring(end));
- this.el.dom.setSelectionRange(end + 1, end + 1);
- return;
- }
-
- var f = value.substring(0, start).split("\t");
-
- if(f.pop().length != 0){
- return;
- }
-
- this.setValue(f.join("\t") + value.substring(end));
- this.el.dom.setSelectionRange(start - 1, start - 1);
-
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
},
-
- "home" : function(e){
- e.preventDefault();
-
- var curr = this.el.dom.selectionStart;
- var lines = this.getValue().split("\n");
-
- if(!lines.length){
- return;
- }
-
- if(e.ctrlKey){
- this.el.dom.setSelectionRange(0, 0);
- return;
- }
-
- var pos = 0;
-
- for (var i = 0; i < lines.length;i++) {
- pos += lines[i].length;
-
- if(i != 0){
- pos += 1;
- }
-
- if(pos < curr){
- continue;
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
}
-
- pos -= lines[i].length;
-
- break;
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['80%'],
+ ['50%'],
+ ['20%'],
+ ['10%']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
}
-
- if(!e.shiftKey){
- this.el.dom.setSelectionRange(pos, pos);
- return;
+ },
+ {
+ xtype : 'TextItem',
+ text : "Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'align',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.align = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['left'],
+ ['right'],
+ ['center']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
}
-
- this.el.dom.selectionStart = pos;
- this.el.dom.selectionEnd = curr;
},
- "end" : function(e){
- e.preventDefault();
-
- var curr = this.el.dom.selectionStart;
- var lines = this.getValue().split("\n");
-
- if(!lines.length){
- return;
- }
+
+ {
+ xtype : 'Button',
+ text: 'Hide Caption',
+ name : 'caption_display',
+ pressed : false,
+ enableToggle : true,
+ setValue : function(v) {
+ // this trigger toggle.
+
+ this.setText(v ? "Hide Caption" : "Show Caption");
+ this.setPressed(v != 'block');
+ },
+ listeners : {
+ toggle: function (btn, state)
+ {
+ var b = block();
+ b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
+ this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+ ];
+
+ },
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ */
+ toObject : function()
+ {
+ var d = document.createElement('div');
+ d.innerHTML = this.caption;
+
+ var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0;
+
+ var iw = this.align == 'center' ? this.width : '100%';
+ var img = {
+ tag : 'img',
+ contenteditable : 'false',
+ src : this.image_src,
+ alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
+ style: {
+ width : iw,
+ maxWidth : iw + ' !important', // this is not getting rendered?
+ margin : m
- if(e.ctrlKey){
- this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
- return;
- }
+ }
+ };
+ /*
+ '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
+ '<a href="{2}">' +
+ '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
+ '</a>' +
+ '</div>',
+ */
- var pos = 0;
+ if (this.href.length > 0) {
+ img = {
+ tag : 'a',
+ href: this.href,
+ contenteditable : 'true',
+ cn : [
+ img
+ ]
+ };
+ }
+
+
+ if (this.video_url.length > 0) {
+ img = {
+ tag : 'div',
+ cls : this.cls,
+ frameborder : 0,
+ allowfullscreen : true,
+ width : 420, // these are for video tricks - that we replace the outer
+ height : 315,
+ src : this.video_url,
+ cn : [
+ img
+ ]
+ };
+ }
+ // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+ var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
+
+
+ var ret = {
+ tag: 'figure',
+ 'data-block' : 'Figure',
+ 'data-width' : this.width,
+ contenteditable : 'false',
+
+ style : {
+ display: 'block',
+ float : this.align ,
+ maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'),
+ width : this.align == 'center' ? '100%' : this.width,
+ margin: '0px',
+ padding: this.align == 'center' ? '0' : '0 10px' ,
+ textAlign : this.align // seems to work for email..
- for (var i = 0; i < lines.length;i++) {
-
- pos += lines[i].length;
-
- if(i != 0){
- pos += 1;
- }
+ },
+
+
+ align : this.align,
+ cn : [
+ img,
+
+ {
+ tag: 'figcaption',
+ 'data-display' : this.caption_display,
+ style : {
+ textAlign : 'left',
+ fontSize : '16px',
+ lineHeight : '24px',
+ display : this.caption_display,
+ maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important',
+ margin: m,
+ width: this.align == 'center' ? this.width : '100%'
- if(pos < curr){
- continue;
- }
+
+ },
+ cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
+ cn : [
+ {
+ tag: 'div',
+ style : {
+ marginTop : '16px',
+ textAlign : 'left'
+ },
+ align: 'left',
+ cn : [
+ {
+ // we can not rely on yahoo syndication to use CSS elements - so have to use '<i>' to encase stuff.
+ tag : 'i',
+ contenteditable : true,
+ html : captionhtml
+ }
+
+ ]
+ }
+
+ ]
- break;
- }
-
- if(!e.shiftKey){
- this.el.dom.setSelectionRange(pos, pos);
- return;
}
-
- this.el.dom.selectionStart = curr;
- this.el.dom.selectionEnd = pos;
- },
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
- },
+ ]
+ };
+ return ret;
+
+ },
+
+ readElement : function(node)
+ {
+ // this should not really come from the link...
+ this.video_url = this.getVal(node, 'div', 'src');
+ this.cls = this.getVal(node, 'div', 'class');
+ this.href = this.getVal(node, 'a', 'href');
+
+
+ this.image_src = this.getVal(node, 'img', 'src');
+
+ this.align = this.getVal(node, 'figure', 'align');
+ var figcaption = this.getVal(node, 'figcaption', false);
+ if (figcaption !== '') {
+ this.caption = this.getVal(figcaption, 'i', 'html');
+ }
+
- forceKeyDown: true
- });
+ this.caption_display = this.getVal(node, 'figcaption', 'data-display');
+ //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+ this.width = this.getVal(node, true, 'data-width');
+ //this.margin = this.getVal(node, 'figure', 'style', 'margin');
-// if(this.autosave && this.w){
-// this.autoSaveFn = setInterval(this.autosave, 1000);
-// }
},
+ removeNode : function()
+ {
+ return this.node;
+ }
+
+
+
+
+
+
+
+
+})
- // private
- onResize : function(w, h)
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+ if (!cfg.node) {
+ this.rows = [];
+ for(var r = 0; r < this.no_row; r++) {
+ this.rows[r] = [];
+ for(var c = 0; c < this.no_col; c++) {
+ this.rows[r][c] = this.emptyCell();
+ }
+ }
+ }
+
+
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+
+ rows : false,
+ no_col : 1,
+ no_row : 1,
+
+
+ width: '100%',
+
+ // used by context menu
+ friendly_name : 'Table',
+ deleteTitle : 'Delete Table',
+ // context menu is drawn once..
+
+ contextMenu : function(toolbar)
{
- Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
- var ew = false;
- var eh = false;
- if(this.el ){
- if(typeof w == 'number'){
- var aw = w - this.wrap.getFrameWidth('lr');
- this.el.setWidth(this.adjustWidth('textarea', aw));
- ew = aw;
- }
- if(typeof h == 'number'){
- var tbh = 0;
- for (var i =0; i < this.toolbars.length;i++) {
- // fixme - ask toolbars for heights?
- tbh += this.toolbars[i].tb.el.getHeight();
- if (this.toolbars[i].footer) {
- tbh += this.toolbars[i].footer.el.getHeight();
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
}
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['auto']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
}
-
-
-
-
- var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
- ah -= 5; // knock a few pixes off for look..
-// Roo.log(ah);
- this.el.setHeight(this.adjustWidth('textarea', ah));
- var eh = ah;
- }
- }
- Roo.log('onResize:' + [w,h,ew,eh].join(',') );
- this.editorcore.onResize(ew,eh);
+ },
+ // -------- Cols
+
+ {
+ xtype : 'TextItem',
+ text : "Columns: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().addColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'TextItem',
+ text : "Rows: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ block().addRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'Button',
+ text: 'Reset Column Widths',
+ listeners : {
+
+ click : function (_self, e)
+ {
+ block().resetWidths();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+
+
+
+ ];
},
-
- /**
- * Toggles the editor between standard and source edit mode.
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+
+
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
*/
- toggleSourceEdit : function(sourceEditMode)
+ toObject : function()
{
- this.editorcore.toggleSourceEdit(sourceEditMode);
- if(this.editorcore.sourceEditMode){
- Roo.log('editor - showing textarea');
-
-// Roo.log('in');
-// Roo.log(this.syncValue());
- this.editorcore.syncValue();
- this.el.removeClass('x-hidden');
- this.el.dom.removeAttribute('tabIndex');
- this.el.focus();
+ var ret = {
+ tag : 'table',
+ contenteditable : 'false', // this stops cell selection from picking the table.
+ 'data-block' : 'Table',
+ style : {
+ width: this.width,
+ border : 'solid 1px #000', // ??? hard coded?
+ 'border-collapse' : 'collapse'
+ },
+ cn : [
+ { tag : 'tbody' , cn : [] }
+ ]
+ };
+
+ // do we have a head = not really
+ var ncols = 0;
+ Roo.each(this.rows, function( row ) {
+ var tr = {
+ tag: 'tr',
+ style : {
+ margin: '6px',
+ border : 'solid 1px #000',
+ textAlign : 'left'
+ },
+ cn : [ ]
+ };
- for (var i = 0; i < this.toolbars.length; i++) {
- if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
- this.toolbars[i].tb.hide();
- this.toolbars[i].footer.hide();
+ ret.cn[0].cn.push(tr);
+ // does the row have any properties? ?? height?
+ var nc = 0;
+ Roo.each(row, function( cell ) {
+
+ var td = {
+ tag : 'td',
+ contenteditable : 'true',
+ 'data-block' : 'Td',
+ html : cell.html,
+ style : cell.style
+ };
+ if (cell.colspan > 1) {
+ td.colspan = cell.colspan ;
+ nc += cell.colspan;
+ } else {
+ nc++;
}
- }
+ if (cell.rowspan > 1) {
+ td.rowspan = cell.rowspan ;
+ }
+
+
+ // widths ?
+ tr.cn.push(td);
+
+
+ }, this);
+ ncols = Math.max(nc, ncols);
- }else{
- Roo.log('editor - hiding textarea');
-// Roo.log('out')
-// Roo.log(this.pushValue());
- this.editorcore.pushValue();
- this.el.addClass('x-hidden');
- this.el.dom.setAttribute('tabIndex', -1);
+ }, this);
+ // add the header row..
+
+ ncols++;
+
+
+ return ret;
+
+ },
+
+ readElement : function(node)
+ {
+ node = node ? node : this.node ;
+ this.width = this.getVal(node, true, 'style', 'width') || '100%';
+
+ this.rows = [];
+ this.no_row = 0;
+ var trs = Array.from(node.rows);
+ trs.forEach(function(tr) {
+ var row = [];
+ this.rows.push(row);
- for (var i = 0; i < this.toolbars.length; i++) {
- if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
- this.toolbars[i].tb.show();
- this.toolbars[i].footer.show();
- }
- }
+ this.no_row++;
+ var no_column = 0;
+ Array.from(tr.cells).forEach(function(td) {
+
+ var add = {
+ colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+ rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
+ style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+ html : td.innerHTML
+ };
+ no_column += add.colspan;
+
+
+ row.push(add);
+
+
+ },this);
+ this.no_col = Math.max(this.no_col, no_column);
- //this.deferFocus();
- }
+
+ },this);
- this.setSize(this.wrap.getSize());
- this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
- this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
},
-
- // private (for BoxComponent)
- adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
- // private (for BoxComponent)
- getResizeEl : function(){
- return this.wrap;
+ normalizeRows: function()
+ {
+ var ret= [];
+ var rid = -1;
+ this.rows.forEach(function(row) {
+ rid++;
+ ret[rid] = [];
+ row = this.normalizeRow(row);
+ var cid = 0;
+ row.forEach(function(c) {
+ while (typeof(ret[rid][cid]) != 'undefined') {
+ cid++;
+ }
+ if (typeof(ret[rid]) == 'undefined') {
+ ret[rid] = [];
+ }
+ ret[rid][cid] = c;
+ c.row = rid;
+ c.col = cid;
+ if (c.rowspan < 2) {
+ return;
+ }
+
+ for(var i = 1 ;i < c.rowspan; i++) {
+ if (typeof(ret[rid+i]) == 'undefined') {
+ ret[rid+i] = [];
+ }
+ ret[rid+i][cid] = c;
+ }
+ });
+ }, this);
+ return ret;
+
},
-
- // private (for BoxComponent)
- getPositionEl : function(){
- return this.wrap;
+
+ normalizeRow: function(row)
+ {
+ var ret= [];
+ row.forEach(function(c) {
+ if (c.colspan < 2) {
+ ret.push(c);
+ return;
+ }
+ for(var i =0 ;i < c.colspan; i++) {
+ ret.push(c);
+ }
+ });
+ return ret;
+
},
-
- // private
- initEvents : function(){
- this.originalValue = this.getValue();
+
+ deleteColumn : function(sel)
+ {
+ if (!sel || sel.type != 'col') {
+ return;
+ }
+ if (this.no_col < 2) {
+ return;
+ }
+
+ this.rows.forEach(function(row) {
+ var cols = this.normalizeRow(row);
+ var col = cols[sel.col];
+ if (col.colspan > 1) {
+ col.colspan --;
+ } else {
+ row.remove(col);
+ }
+
+ }, this);
+ this.no_col--;
+
},
-
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
- */
- markInvalid : Roo.emptyFn,
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
- */
- clearInvalid : Roo.emptyFn,
-
- setValue : function(v){
- Roo.form.HtmlEditor.superclass.setValue.call(this, v);
- this.editorcore.pushValue();
+ removeColumn : function()
+ {
+ this.deleteColumn({
+ type: 'col',
+ col : this.no_col-1
+ });
+ this.updateElement();
},
-
+
- // private
- deferFocus : function(){
- this.focus.defer(10, this);
- },
-
- // doc'ed in Field
- focus : function(){
- this.editorcore.focus();
+ addColumn : function()
+ {
+ this.rows.forEach(function(row) {
+ row.push(this.emptyCell());
+
+ }, this);
+ this.updateElement();
},
-
-
- // private
- onDestroy : function(){
+
+ deleteRow : function(sel)
+ {
+ if (!sel || sel.type != 'row') {
+ return;
+ }
+ if (this.no_row < 2) {
+ return;
+ }
+ var rows = this.normalizeRows();
- if(this.rendered){
-
- for (var i =0; i < this.toolbars.length;i++) {
- // fixme - ask toolbars for heights?
- this.toolbars[i].onDestroy();
+
+ rows[sel.row].forEach(function(col) {
+ if (col.rowspan > 1) {
+ col.rowspan--;
+ } else {
+ col.remove = 1; // flage it as removed.
}
- this.wrap.dom.innerHTML = '';
- this.wrap.remove();
- }
- },
-
- // private
- onFirstFocus : function(){
- //Roo.log("onFirstFocus");
- this.editorcore.onFirstFocus();
- for (var i =0; i < this.toolbars.length;i++) {
- this.toolbars[i].onFirstFocus();
- }
+ }, this);
+ var newrows = [];
+ this.rows.forEach(function(row) {
+ newrow = [];
+ row.forEach(function(c) {
+ if (typeof(c.remove) == 'undefined') {
+ newrow.push(c);
+ }
+
+ });
+ if (newrow.length > 0) {
+ newrows.push(row);
+ }
+ });
+ this.rows = newrows;
+
+
+
+ this.no_row--;
+ this.updateElement();
},
-
- // private
- syncValue : function()
+ removeRow : function()
{
- this.editorcore.syncValue();
+ this.deleteRow({
+ type: 'row',
+ row : this.no_row-1
+ });
+
},
- pushValue : function()
+
+ addRow : function()
{
- this.editorcore.pushValue();
+
+ var row = [];
+ for (var i = 0; i < this.no_col; i++ ) {
+
+ row.push(this.emptyCell());
+
+ }
+ this.rows.push(row);
+ this.updateElement();
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return (new Roo.htmleditor.BlockTd({})).toObject();
+
+
},
- setStylesheets : function(stylesheets)
+ removeNode : function()
{
- this.editorcore.setStylesheets(stylesheets);
+ return this.node;
},
- removeStylesheets : function()
+
+
+ resetWidths : function()
{
- this.editorcore.removeStylesheets();
+ Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+ var nn = Roo.htmleditor.Block.factory(n);
+ nn.width = '';
+ nn.updateElement(n);
+ });
+ }
+
+
+
+
+})
+
+/**
+ *
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ * add/remove cols
+ * adjust the width +/-
+ * reset the width...
+ *
+ *
+ */
+
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTd = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
}
+ Roo.apply(this, cfg);
- // hide stuff that is not compatible
- /**
- * @event blur
- * @hide
- */
- /**
- * @event change
- * @hide
- */
- /**
- * @event focus
- * @hide
- */
- /**
- * @event specialkey
- * @hide
- */
- /**
- * @cfg {String} fieldClass @hide
- */
- /**
- * @cfg {String} focusClass @hide
- */
- /**
- * @cfg {String} autoCreate @hide
- */
- /**
- * @cfg {String} inputType @hide
- */
- /**
- * @cfg {String} invalidClass @hide
- */
- /**
- * @cfg {String} invalidText @hide
- */
- /**
- * @cfg {String} msgFx @hide
- */
- /**
- * @cfg {String} validateOnBlur @hide
- */
-});
-
- // <script type="text/javascript">
-/*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
-
- */
-
-/**
- * @class Roo.form.HtmlEditorToolbar1
- * Basic Toolbar
- *
- * Usage:
- *
- new Roo.form.HtmlEditor({
- ....
- toolbars : [
- new Roo.form.HtmlEditorToolbar1({
- disable : { fonts: 1 , format: 1, ..., ... , ...],
- btns : [ .... ]
- })
- }
-
- *
- * @cfg {Object} disable List of elements to disable..
- * @cfg {Array} btns List of additional buttons.
- *
- *
- * NEEDS Extra CSS?
- * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
- */
-
-Roo.form.HtmlEditor.ToolbarStandard = function(config)
-{
- Roo.apply(this, config);
+}
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
+
+ node : false,
- // default disabled, based on 'good practice'..
- this.disable = this.disable || {};
- Roo.applyIf(this.disable, {
- fontSize : true,
- colors : true,
- specialElements : true
- });
+ width: '',
+ textAlign : 'left',
+ valign : 'top',
+ colspan : 1,
+ rowspan : 1,
- //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
- // dont call parent... till later.
-}
-
-Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype, {
- tb: false,
+ // used by context menu
+ friendly_name : 'Table Cell',
+ deleteTitle : false, // use our customer delete
- rendered: false,
+ // context menu is drawn once..
- editor : false,
- editorcore : false,
- /**
- * @cfg {Object} disable List of toolbar elements to disable
-
- */
- disable : false,
+ contextMenu : function(toolbar)
+ {
+
+ var cell = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+ var table = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+ };
+
+ var lr = false;
+ var saveSel = function()
+ {
+ lr = toolbar.editorcore.getSelection().getRangeAt(0);
+ }
+ var restoreSel = function()
+ {
+ if (lr) {
+ (function() {
+ toolbar.editorcore.focus();
+ var cr = toolbar.editorcore.getSelection();
+ cr.removeAllRanges();
+ cr.addRange(lr);
+ toolbar.editorcore.onEditorEvent();
+ }).defer(10, this);
+
+
+ }
+ }
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'Button',
+ text : 'Edit Table',
+ listeners : {
+ click : function() {
+ var t = toolbar.tb.selectedNode.closest('table');
+ toolbar.editorcore.selectNode(t);
+ toolbar.editorcore.onEditorEvent();
+ }
+ }
+
+ },
+
+
+
+ {
+ xtype : 'TextItem',
+ text : "Column Width: ",
+ xns : rooui.Toolbar
+
+ },
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().shrinkColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Vertical Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'valign',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = cell();
+ b.valign = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['top'],
+ ['middle'],
+ ['bottom'] // there are afew more...
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Merge Cells: ",
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Right',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeRight();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Below',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeBelow();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'TextItem',
+ text : "| ",
+ xns : rooui.Toolbar
+
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Split',
+ listeners : {
+ click : function (_self, e)
+ {
+ //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().split();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Fill',
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Delete',
+
+ xns : rooui.Toolbar,
+ menu : {
+ xtype : 'Menu',
+ xns : rooui.menu,
+ items : [
+ {
+ xtype : 'Item',
+ html: 'Column',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+
+ cell().deleteColumn();
+ syncValue();
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Row',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ cell().deleteRow();
+ syncValue();
+
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Separator',
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Table',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ var nn = t.node.nextSibling || t.node.previousSibling;
+ t.node.parentNode.removeChild(t.node);
+ if (nn) {
+ toolbar.editorcore.selectNode(nn, true);
+ }
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ }
+ ]
+ }
+ }
+
+ // align... << fixme
+
+ ];
+
+ },
- /**
- * @cfg {String} createLinkText The default text for the create link prompt
- */
- createLinkText : 'Please enter the URL for the link:',
- /**
- * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
*/
- defaultLinkValue : 'http:/'+'/',
-
-
- /**
- * @cfg {Array} fontFamilies An array of available font families
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
*/
- fontFamilies : [
- 'Arial',
- 'Courier New',
- 'Tahoma',
- 'Times New Roman',
- 'Verdana'
- ],
-
- specialChars : [
- "©",
- "®",
- "™",
- "£" ,
- // "—",
- "…",
- "÷" ,
- // "á" , ?? a acute?
- "€" , //Euro
- // "“" ,
- // "”" ,
- // "•" ,
- "°" // , // degrees
-
- // "é" , // e ecute
- // "ú" , // u ecute?
- ],
+ toObject : function()
+ {
+ var ret = {
+ tag : 'td',
+ contenteditable : 'true', // this stops cell selection from picking the table.
+ 'data-block' : 'Td',
+ valign : this.valign,
+ style : {
+ 'text-align' : this.textAlign,
+ border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+ 'border-collapse' : 'collapse',
+ padding : '6px', // 8 for desktop / 4 for mobile
+ 'vertical-align': this.valign
+ },
+ html : this.html
+ };
+ if (this.width != '') {
+ ret.width = this.width;
+ ret.style.width = this.width;
+ }
+
+
+ if (this.colspan > 1) {
+ ret.colspan = this.colspan ;
+ }
+ if (this.rowspan > 1) {
+ ret.rowspan = this.rowspan ;
+ }
+
+
+
+ return ret;
+
+ },
- specialElements : [
- {
- text: "Insert Table",
- xtype: 'MenuItem',
- xns : Roo.Menu,
- ihtml : '<table><tr><td>Cell</td></tr></table>'
-
- },
- {
- text: "Insert Image",
- xtype: 'MenuItem',
- xns : Roo.Menu,
- ihtml : '<img src="about:blank"/>'
-
+ readElement : function(node)
+ {
+ node = node ? node : this.node ;
+ this.width = node.style.width;
+ this.colspan = Math.max(1,1*node.getAttribute('colspan'));
+ this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
+ this.html = node.innerHTML;
+ if (node.style.textAlign != '') {
+ this.textAlign = node.style.textAlign;
}
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return {
+ colspan : 1,
+ rowspan : 1,
+ textAlign : 'left',
+ html : " " // is this going to be editable now?
+ };
+
+ },
+
+ removeNode : function()
+ {
+ return this.node.closest('table');
- ],
+ },
+ cellData : false,
- inputElements : [
- "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
- "input:submit", "input:button", "select", "textarea", "label" ],
- formats : [
- ["p"] ,
- ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
- ["pre"],[ "code"],
- ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
- ['div'],['span'],
- ['sup'],['sub']
- ],
+ colWidths : false,
- cleanStyles : [
- "font-size"
- ],
- /**
- * @cfg {String} defaultFont default font to use.
- */
- defaultFont: 'tahoma',
-
- fontSelect : false,
+ toTableArray : function()
+ {
+ var ret = [];
+ var tab = this.node.closest('tr').closest('table');
+ Array.from(tab.rows).forEach(function(r, ri){
+ ret[ri] = [];
+ });
+ var rn = 0;
+ this.colWidths = [];
+ var all_auto = true;
+ Array.from(tab.rows).forEach(function(r, ri){
+
+ var cn = 0;
+ Array.from(r.cells).forEach(function(ce, ci){
+ var c = {
+ cell : ce,
+ row : rn,
+ col: cn,
+ colspan : ce.colSpan,
+ rowspan : ce.rowSpan
+ };
+ if (ce.isEqualNode(this.node)) {
+ this.cellData = c;
+ }
+ // if we have been filled up by a row?
+ if (typeof(ret[rn][cn]) != 'undefined') {
+ while(typeof(ret[rn][cn]) != 'undefined') {
+ cn++;
+ }
+ c.col = cn;
+ }
+
+ if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
+ this.colWidths[cn] = ce.style.width;
+ if (this.colWidths[cn] != '') {
+ all_auto = false;
+ }
+ }
+
+
+ if (c.colspan < 2 && c.rowspan < 2 ) {
+ ret[rn][cn] = c;
+ cn++;
+ return;
+ }
+ for(var j = 0; j < c.rowspan; j++) {
+ if (typeof(ret[rn+j]) == 'undefined') {
+ continue; // we have a problem..
+ }
+ ret[rn+j][cn] = c;
+ for(var i = 0; i < c.colspan; i++) {
+ ret[rn+j][cn+i] = c;
+ }
+ }
+
+ cn += c.colspan;
+ }, this);
+ rn++;
+ }, this);
+
+ // initalize widths.?
+ // either all widths or no widths..
+ if (all_auto) {
+ this.colWidths[0] = false; // no widths flag.
+ }
+
+
+ return ret;
+
+ },
- formatCombo : false,
- init : function(editor)
+
+ mergeRight: function()
{
- this.editor = editor;
- this.editorcore = editor.editorcore ? editor.editorcore : editor;
- var editorcore = this.editorcore;
-
- var _t = this;
+
+ // get the contents of the next cell along..
+ var tr = this.node.closest('tr');
+ var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+ if (i >= tr.childNodes.length - 1) {
+ return; // no cells on right to merge with.
+ }
+ var table = this.toTableArray();
- var fid = editorcore.frameId;
- var etb = this;
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: _t, // was editor...
- handler:handler||_t.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
+ if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+ // right cell - must be same rowspan and on the same row.
+ if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+ return; // right hand side is not same rowspan.
}
- var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
- this.tb = tb;
- // stop form submits
- tb.el.on('click', function(e){
- e.preventDefault(); // what does this do?
- });
+ this.node.innerHTML += ' ' + rc.cell.innerHTML;
+ tr.removeChild(rc.cell);
+ this.colspan += rc.colspan;
+ this.node.setAttribute('colspan', this.colspan);
- if(!this.disable.font) { // && !Roo.isSafari){
- /* why no safari for fonts
- editor.fontSelect = tb.el.createChild({
- tag:'select',
- tabIndex: -1,
- cls:'x-font-select',
- html: this.createFontOptions()
- });
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ this.updateWidths(table);
+ },
+
+
+ mergeBelow : function()
+ {
+ var table = this.toTableArray();
+ if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+ return; // no row below
+ }
+ if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
+
+ if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+ return; // right hand side is not same rowspan.
+ }
+ this.node.innerHTML = this.node.innerHTML + rc.cell.innerHTML ;
+ rc.cell.parentNode.removeChild(rc.cell);
+ this.rowspan += rc.rowspan;
+ this.node.setAttribute('rowspan', this.rowspan);
+ },
+
+ split: function()
+ {
+ if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+ return;
+ }
+ var table = this.toTableArray();
+ var cd = this.cellData;
+ this.rowspan = 1;
+ this.colspan = 1;
+
+ for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+
- editor.fontSelect.on('change', function(){
- var font = editor.fontSelect.dom.value;
- editor.relayCmd('fontname', font);
- editor.deferFocus();
- }, editor);
+ for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+ if (r == cd.row && c == cd.col) {
+ this.node.removeAttribute('rowspan');
+ this.node.removeAttribute('colspan');
+ }
+
+ var ntd = this.node.cloneNode(); // which col/row should be 0..
+ ntd.removeAttribute('id');
+ ntd.style.width = this.colWidths[c];
+ ntd.innerHTML = '';
+ table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 };
+ }
- tb.add(
- editor.fontSelect.dom,
- '-'
- );
- */
+ }
+ this.redrawAllCells(table);
+
+ },
+
+
+
+ redrawAllCells: function(table)
+ {
+
+
+ var tab = this.node.closest('tr').closest('table');
+ var ctr = tab.rows[0].parentNode;
+ Array.from(tab.rows).forEach(function(r, ri){
- };
- if(!this.disable.formats){
- this.formatCombo = new Roo.form.ComboBox({
- store: new Roo.data.SimpleStore({
- id : 'tag',
- fields: ['tag'],
- data : this.formats // from states.js
- }),
- blockFocus : true,
- name : '',
- //autoCreate : {tag: "div", size: "20"},
- displayField:'tag',
- typeAhead: false,
- mode: 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Add tag',
- selectOnFocus:true,
- width:135,
- listeners : {
- 'select': function(c, r, i) {
- editorcore.insertTag(r.get('tag'));
- editor.focus();
- }
- }
-
+ Array.from(r.cells).forEach(function(ce, ci){
+ ce.parentNode.removeChild(ce);
});
- tb.addField(this.formatCombo);
+ r.parentNode.removeChild(r);
+ });
+ for(var r = 0 ; r < table.length; r++) {
+ var re = tab.rows[r];
+ var re = tab.ownerDocument.createElement('tr');
+ ctr.appendChild(re);
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
+
+ re.appendChild(table[r][c].cell);
+
+ table[r][c].cell = false;
+ }
}
- if(!this.disable.format){
- tb.add(
- btn('bold'),
- btn('italic'),
- btn('underline'),
- btn('strikethrough')
- );
- };
- if(!this.disable.fontSize){
- tb.add(
- '-',
-
+ },
+ updateWidths : function(table)
+ {
+ for(var r = 0 ; r < table.length; r++) {
+
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
- btn('increasefontsize', false, editorcore.adjustFont),
- btn('decreasefontsize', false, editorcore.adjustFont)
- );
- };
+ if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ el.width = Math.floor(this.colWidths[c]) +'%';
+ el.updateElement(el.node);
+ }
+ if (this.colWidths[0] != false && table[r][c].colspan > 1) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ var width = 0;
+ for(var i = 0; i < table[r][c].colspan; i ++) {
+ width += Math.floor(this.colWidths[c + i]);
+ }
+ el.width = width +'%';
+ el.updateElement(el.node);
+ }
+ table[r][c].cell = false; // done
+ }
+ }
+ },
+ normalizeWidths : function(table)
+ {
+ if (this.colWidths[0] === false) {
+ var nw = 100.0 / this.colWidths.length;
+ this.colWidths.forEach(function(w,i) {
+ this.colWidths[i] = nw;
+ },this);
+ return;
+ }
+
+ var t = 0, missing = [];
+ this.colWidths.forEach(function(w,i) {
+ //if you mix % and
+ this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+ var add = this.colWidths[i];
+ if (add > 0) {
+ t+=add;
+ return;
+ }
+ missing.push(i);
+
+
+ },this);
+ var nc = this.colWidths.length;
+ if (missing.length) {
+ var mult = (nc - missing.length) / (1.0 * nc);
+ var t = mult * t;
+ var ew = (100 -t) / (1.0 * missing.length);
+ this.colWidths.forEach(function(w,i) {
+ if (w > 0) {
+ this.colWidths[i] = w * mult;
+ return;
+ }
+
+ this.colWidths[i] = ew;
+ }, this);
+ // have to make up numbers..
+
+ }
+ // now we should have all the widths..
- if(!this.disable.colors){
- tb.add(
- '-', {
- id:editorcore.frameId +'-forecolor',
- cls:'x-btn-icon x-edit-forecolor',
- clickEvent:'mousedown',
- tooltip: this.buttonTips['forecolor'] || undefined,
- tabIndex:-1,
- menu : new Roo.menu.ColorMenu({
- allowReselect: true,
- focus: Roo.emptyFn,
- value:'000000',
- plain:true,
- selectHandler: function(cp, color){
- editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- },
- scope: editorcore,
- clickEvent:'mousedown'
- })
- }, {
- id:editorcore.frameId +'backcolor',
- cls:'x-btn-icon x-edit-backcolor',
- clickEvent:'mousedown',
- tooltip: this.buttonTips['backcolor'] || undefined,
- tabIndex:-1,
- menu : new Roo.menu.ColorMenu({
- focus: Roo.emptyFn,
- value:'FFFFFF',
- plain:true,
- allowReselect: true,
- selectHandler: function(cp, color){
- if(Roo.isGecko){
- editorcore.execCmd('useCSS', false);
- editorcore.execCmd('hilitecolor', color);
- editorcore.execCmd('useCSS', true);
- editor.deferFocus();
- }else{
- editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
- Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- }
- },
- scope:editorcore,
- clickEvent:'mousedown'
- })
- }
- );
- };
- // now add all the items...
-
-
- if(!this.disable.alignments){
- tb.add(
- '-',
- btn('justifyleft'),
- btn('justifycenter'),
- btn('justifyright')
- );
- };
-
- //if(!Roo.isSafari){
- if(!this.disable.links){
- tb.add(
- '-',
- btn('createlink', false, this.createLink) /// MOVE TO HERE?!!?!?!?!
- );
- };
-
- if(!this.disable.lists){
- tb.add(
- '-',
- btn('insertorderedlist'),
- btn('insertunorderedlist')
- );
- }
- if(!this.disable.sourceEdit){
- tb.add(
- '-',
- btn('sourceedit', true, function(btn){
- this.toggleSourceEdit(btn.pressed);
- })
- );
- }
- //}
-
- var smenu = { };
- // special menu.. - needs to be tidied up..
- if (!this.disable.special) {
- smenu = {
- text: "©",
- cls: 'x-edit-none',
-
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.specialChars.length; i++) {
- smenu.menu.items.push({
-
- html: this.specialChars[i],
- handler: function(a,b) {
- editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
- //editor.insertAtCursor(a.html);
-
- },
- tabIndex:-1
- });
- }
-
-
- tb.add(smenu);
-
-
+
+ },
+
+ shrinkColumn : function()
+ {
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 0.8;
+ if (nw < 5) {
+ return;
}
-
- var cmenu = { };
- if (!this.disable.cleanStyles) {
- cmenu = {
- cls: 'x-btn-icon x-btn-clear',
-
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.cleanStyles.length; i++) {
- cmenu.menu.items.push({
- actiontype : this.cleanStyles[i],
- html: 'Remove ' + this.cleanStyles[i],
- handler: function(a,b) {
-// Roo.log(a);
-// Roo.log(b);
- var c = Roo.get(editorcore.doc.body);
- c.select('[style]').each(function(s) {
- s.dom.style.removeProperty(a.actiontype);
- });
- editorcore.syncValue();
- },
- tabIndex:-1
- });
+ var otherAdd = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
}
- cmenu.menu.items.push({
- actiontype : 'tablewidths',
- html: 'Remove Table Widths',
- handler: function(a,b) {
- editorcore.cleanTableWidths();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
- cmenu.menu.items.push({
- actiontype : 'word',
- html: 'Remove MS Word Formating',
- handler: function(a,b) {
- editorcore.cleanWord();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
-
- cmenu.menu.items.push({
- actiontype : 'all',
- html: 'Remove All Styles',
- handler: function(a,b) {
-
- var c = Roo.get(editorcore.doc.body);
- c.select('[style]').each(function(s) {
- s.dom.removeAttribute('style');
- });
- editorcore.syncValue();
- },
- tabIndex:-1
- });
-
- cmenu.menu.items.push({
- actiontype : 'all',
- html: 'Remove All CSS Classes',
- handler: function(a,b) {
-
- var c = Roo.get(editorcore.doc.body);
- c.select('[class]').each(function(s) {
- s.dom.removeAttribute('class');
- });
- editorcore.cleanWord();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
-
- cmenu.menu.items.push({
- actiontype : 'tidy',
- html: 'Tidy HTML Source',
- handler: function(a,b) {
- editorcore.doc.body.innerHTML = editorcore.domToHTML();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
-
-
- tb.add(cmenu);
- }
+ this.colWidths[i] += otherAdd
+ }, this);
+ this.updateWidths(table);
- if (!this.disable.specialElements) {
- var semenu = {
- text: "Other;",
- cls: 'x-edit-none',
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.specialElements.length; i++) {
- semenu.menu.items.push(
- Roo.apply({
- handler: function(a,b) {
- editor.insertAtCursor(this.ihtml);
- }
- }, this.specialElements[i])
- );
-
- }
-
- tb.add(semenu);
-
-
+ },
+ growColumn : function()
+ {
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 1.2;
+ if (nw > 90) {
+ return;
}
+ var otherSub = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] -= otherSub
+ }, this);
+ this.updateWidths(table);
-
- if (this.btns) {
- for(var i =0; i< this.btns.length;i++) {
- var b = Roo.factory(this.btns[i],Roo.form);
- b.cls = 'x-edit-none';
-
- if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
- b.cls += ' x-init-enable';
- }
+ },
+ deleteRow : function()
+ {
+ // delete this rows 'tr'
+ // if any of the cells in this row have a rowspan > 1 && row!= this row..
+ // then reduce the rowspan.
+ var table = this.toTableArray();
+ // this.cellData.row;
+ for (var i =0;i< table[this.cellData.row].length ; i++) {
+ var c = table[this.cellData.row][i];
+ if (c.row != this.cellData.row) {
- b.scope = editorcore;
- tb.add(b);
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ continue;
+ }
+ if (c.rowspan > 1) {
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
}
-
}
+ table.splice(this.cellData.row,1);
+ this.redrawAllCells(table);
+ },
+ deleteColumn : function()
+ {
+ var table = this.toTableArray();
+ for (var i =0;i< table.length ; i++) {
+ var c = table[i][this.cellData.col];
+ if (c.col != this.cellData.col) {
+ table[i][this.cellData.col].colspan--;
+ } else if (c.colspan > 1) {
+ c.colspan--;
+ c.cell.setAttribute('colspan', c.colspan);
+ }
+ table[i].splice(this.cellData.col,1);
+ }
- // disable everything...
+ this.redrawAllCells(table);
+ }
+
+
+
+
+})
+
+//<script type="text/javascript">
+
+/*
+ * Based Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * LGPL
+ *
+ */
+
+/**
+ * @class Roo.HtmlEditorCore
+ * @extends Roo.Component
+ * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
+ *
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+
+Roo.HtmlEditorCore = function(config){
+
+
+ Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+
+
+ this.addEvents({
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {Roo.HtmlEditorCore} this
+ */
+ initialize: true,
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {Roo.HtmlEditorCore} this
+ */
+ activate: true,
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ beforesync: true,
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ beforepush: true,
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ sync: true,
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ push: true,
- this.tb.items.each(function(item){
-
- if(
- item.id != editorcore.frameId+ '-sourceedit' &&
- (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
- ){
-
- item.disable();
- }
- });
- this.rendered = true;
+ /**
+ * @event editorevent
+ * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+ * @param {Roo.HtmlEditorCore} this
+ */
+ editorevent: true
+
- // the all the btns;
- editor.on('editorevent', this.updateToolbar, this);
- // other toolbars need to implement this..
- //editor.on('editmodechange', this.updateToolbar, this);
- },
+ });
+ // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
- relayBtnCmd : function(btn) {
- this.editorcore.relayCmd(btn.cmd);
- },
- // private used internally
- createLink : function(){
- Roo.log("create link?");
- var url = prompt(this.createLinkText, this.defaultLinkValue);
- if(url && url != 'http:/'+'/'){
- this.editorcore.relayCmd('createlink', url);
- }
- },
+ // defaults : white / black...
+ this.applyBlacklists();
+
+
+
+};
+
+
+Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
+
+ /**
+ * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
+ */
+
+ owner : false,
+
+ /**
+ * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
+ * Roo.resizable.
+ */
+ resizable : false,
+ /**
+ * @cfg {Number} height (in pixels)
+ */
+ height: 300,
+ /**
+ * @cfg {Number} width (in pixels)
+ */
+ width: 500,
+ /**
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
+ */
+ autoClean: true,
/**
- * Protected method that will not generally be called directly. It triggers
- * a toolbar update by reading the markup state of the current selection in the editor.
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
*/
- updateToolbar: function(){
-
- if(!this.editorcore.activated){
- this.editor.onFirstFocus();
- return;
- }
-
- var btns = this.tb.items.map,
- doc = this.editorcore.doc,
- frameId = this.editorcore.frameId;
+ enableBlocks : true,
+ /**
+ * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+ *
+ */
+ stylesheets: false,
+ /**
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
+ */
+ language: 'en',
+
+ /**
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source
+ * - by default they are stripped - if you are editing email you may need this.
+ */
+ allowComments: false,
+ // id of frame..
+ frameId: false,
+
+ // private properties
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
+ sourceEditMode : false,
+ onFocus : Roo.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
+
+ clearUp: true,
+
+ // blacklist + whitelisted elements..
+ black: false,
+ white: false,
+
+ bodyCls : '',
- if(!this.disable.font && !Roo.isSafari){
- /*
- var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
- if(name != this.fontSelect.dom.value){
- this.fontSelect.dom.value = name;
- }
- */
- }
- if(!this.disable.format){
- btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
- btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
- btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
- btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
- }
- if(!this.disable.alignments){
- btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
- btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
- btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
- }
- if(!Roo.isSafari && !this.disable.lists){
- btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
- btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
- }
+
+ undoManager : false,
+ /**
+ * Protected method that will not generally be called directly. It
+ * is called when the editor initializes the iframe with HTML contents. Override this method if you
+ * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+ */
+ getDocMarkup : function(){
+ // body styles..
+ var st = '';
- var ans = this.editorcore.getAllAncestors();
- if (this.formatCombo) {
+ // inherit styels from page...??
+ if (this.stylesheets === false) {
+ Roo.get(document.head).select('style').each(function(node) {
+ st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ });
- var store = this.formatCombo.store;
- this.formatCombo.setValue("");
- for (var i =0; i < ans.length;i++) {
- if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
- // select it..
- this.formatCombo.setValue(ans[i].tagName.toLowerCase());
- break;
+ Roo.get(document.head).select('link').each(function(node) {
+ st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ });
+
+ } else if (!this.stylesheets.length) {
+ // simple..
+ st = '<style type="text/css">' +
+ 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+ '</style>';
+ } else {
+ for (var i in this.stylesheets) {
+ if (typeof(this.stylesheets[i]) != 'string') {
+ continue;
}
+ st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
}
+
}
+ st += '<style type="text/css">' +
+ 'IMG { cursor: pointer } ' +
+ '</style>';
+ st += '<meta name="google" content="notranslate">';
- // hides menus... - so this cant be on a menu...
- Roo.menu.MenuMgr.hideAll();
-
- //this.editorsyncValue();
+ var cls = 'notranslate roo-htmleditor-body';
+
+ if(this.bodyCls.length){
+ cls += ' ' + this.bodyCls;
+ }
+
+ return '<html class="notranslate" translate="no"><head>' + st +
+ //<style type="text/css">' +
+ //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+ //'</style>' +
+ ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
},
-
-
- createFontOptions : function(){
- var buf = [], fs = this.fontFamilies, ff, lc;
+
+ // private
+ onRender : function(ct, position)
+ {
+ var _t = this;
+ //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
+ this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
+ this.el.dom.style.border = '0 none';
+ this.el.dom.setAttribute('tabIndex', -1);
+ this.el.addClass('x-hidden hide');
- for(var i = 0, len = fs.length; i< len; i++){
- ff = fs[i];
- lc = ff.toLowerCase();
- buf.push(
- '<option value="',lc,'" style="font-family:',ff,';"',
- (this.defaultFont == lc ? ' selected="true">' : '>'),
- ff,
- '</option>'
- );
+
+
+ if(Roo.isIE){ // fix IE 1px bogus margin
+ this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
}
- return buf.join('');
+
+
+ this.frameId = Roo.id();
+
+
+
+ var iframe = this.owner.wrap.createChild({
+ tag: 'iframe',
+ cls: 'form-control', // bootstrap..
+ id: this.frameId,
+ name: this.frameId,
+ frameBorder : 'no',
+ 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
+ }, this.el
+ );
+
+
+ this.iframe = iframe.dom;
+
+ this.assignDocWin();
+
+ this.doc.designMode = 'on';
+
+ this.doc.open();
+ this.doc.write(this.getDocMarkup());
+ this.doc.close();
+
+
+ var task = { // must defer to wait for browser to be ready
+ run : function(){
+ //console.log("run task?" + this.doc.readyState);
+ this.assignDocWin();
+ if(this.doc.body || this.doc.readyState == 'complete'){
+ try {
+ this.doc.designMode="on";
+
+ } catch (e) {
+ return;
+ }
+ Roo.TaskMgr.stop(task);
+ this.initEditor.defer(10, this);
+ }
+ },
+ interval : 10,
+ duration: 10000,
+ scope: this
+ };
+ Roo.TaskMgr.start(task);
+
},
-
+
+ // private
+ onResize : function(w, h)
+ {
+ Roo.log('resize: ' +w + ',' + h );
+ //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
+ if(!this.iframe){
+ return;
+ }
+ if(typeof w == 'number'){
+
+ this.iframe.style.width = w + 'px';
+ }
+ if(typeof h == 'number'){
+
+ this.iframe.style.height = h + 'px';
+ if(this.doc){
+ (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
+ }
+ }
+
+ },
+
+ /**
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+ */
toggleSourceEdit : function(sourceEditMode){
- Roo.log("toolbar toogle");
- if(sourceEditMode === undefined){
- sourceEditMode = !this.sourceEditMode;
- }
this.sourceEditMode = sourceEditMode === true;
- var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
- // just toggle the button?
- if(btn.pressed !== this.sourceEditMode){
- btn.toggle(this.sourceEditMode);
- return;
- }
- if(sourceEditMode){
- Roo.log("disabling buttons");
- this.tb.items.each(function(item){
- if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
- item.disable();
- }
- });
-
- }else{
- Roo.log("enabling buttons");
- if(this.editorcore.initialized){
- this.tb.items.each(function(item){
- item.enable();
- });
- }
+ if(this.sourceEditMode){
+
+ Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']); //FIXME - what's the BS styles for these
+ }else{
+ Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
+ //this.iframe.className = '';
+ this.deferFocus();
}
- Roo.log("calling toggole on editor");
- // tell the editor that it's been pressed..
- this.editor.toggleSourceEdit(sourceEditMode);
-
- },
- /**
- * Object collection of toolbar tooltips for the buttons in the editor. The key
- * is the command id associated with that button and the value is a valid QuickTips object.
- * For example:
-<pre><code>
-{
- bold : {
- title: 'Bold (Ctrl+B)',
- text: 'Make the selected text bold.',
- cls: 'x-html-editor-tip'
- },
- italic : {
- title: 'Italic (Ctrl+I)',
- text: 'Make the selected text italic.',
- cls: 'x-html-editor-tip'
+ //this.setSize(this.owner.wrap.getSize());
+ //this.fireEvent('editmodechange', this, this.sourceEditMode);
},
- ...
-</code></pre>
- * @type Object
+
+
+
+
+ /**
+ * Protected method that will not generally be called directly. If you need/want
+ * custom HTML cleanup, this is the method you should override.
+ * @param {String} html The HTML to be cleaned
+ * return {String} The cleaned HTML
*/
- buttonTips : {
- bold : {
- title: 'Bold (Ctrl+B)',
- text: 'Make the selected text bold.',
- cls: 'x-html-editor-tip'
- },
- italic : {
- title: 'Italic (Ctrl+I)',
- text: 'Make the selected text italic.',
- cls: 'x-html-editor-tip'
- },
- underline : {
- title: 'Underline (Ctrl+U)',
- text: 'Underline the selected text.',
- cls: 'x-html-editor-tip'
- },
- strikethrough : {
- title: 'Strikethrough',
- text: 'Strikethrough the selected text.',
- cls: 'x-html-editor-tip'
- },
- increasefontsize : {
- title: 'Grow Text',
- text: 'Increase the font size.',
- cls: 'x-html-editor-tip'
- },
- decreasefontsize : {
- title: 'Shrink Text',
- text: 'Decrease the font size.',
- cls: 'x-html-editor-tip'
- },
- backcolor : {
- title: 'Text Highlight Color',
- text: 'Change the background color of the selected text.',
- cls: 'x-html-editor-tip'
- },
- forecolor : {
- title: 'Font Color',
- text: 'Change the color of the selected text.',
- cls: 'x-html-editor-tip'
- },
- justifyleft : {
- title: 'Align Text Left',
- text: 'Align text to the left.',
- cls: 'x-html-editor-tip'
- },
- justifycenter : {
- title: 'Center Text',
- text: 'Center text in the editor.',
- cls: 'x-html-editor-tip'
- },
- justifyright : {
- title: 'Align Text Right',
- text: 'Align text to the right.',
- cls: 'x-html-editor-tip'
- },
- insertunorderedlist : {
- title: 'Bullet List',
- text: 'Start a bulleted list.',
- cls: 'x-html-editor-tip'
- },
- insertorderedlist : {
- title: 'Numbered List',
- text: 'Start a numbered list.',
- cls: 'x-html-editor-tip'
- },
- createlink : {
- title: 'Hyperlink',
- text: 'Make the selected text a hyperlink.',
- cls: 'x-html-editor-tip'
- },
- sourceedit : {
- title: 'Source Edit',
- text: 'Switch to source editing mode.',
- cls: 'x-html-editor-tip'
+ cleanHtml : function(html)
+ {
+ html = String(html);
+ if(html.length > 5){
+ if(Roo.isSafari){ // strip safari nonsense
+ html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+ }
+ }
+ if(html == ' '){
+ html = '';
}
+ return html;
},
- // private
- onDestroy : function(){
- if(this.rendered){
+
+ /**
+ * HTML Editor -> Textarea
+ * Protected method that will not generally be called directly. Syncs the contents
+ * of the editor iframe with the textarea.
+ */
+ syncValue : function()
+ {
+ //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
+ if(this.initialized){
- this.tb.items.each(function(item){
- if(item.menu){
- item.menu.removeAll();
- if(item.menu.el){
- item.menu.el.destroy();
- }
+ if (this.undoManager) {
+ this.undoManager.addEvent();
+ }
+
+
+ var bd = (this.doc.body || this.doc.documentElement);
+
+
+ var sel = this.win.getSelection();
+
+ var div = document.createElement('div');
+ div.innerHTML = bd.innerHTML;
+ var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
+ if (gtx.length > 0) {
+ var rm = gtx.item(0).parentNode;
+ rm.parentNode.removeChild(rm);
+ }
+
+
+ if (this.enableBlocks) {
+ new Roo.htmleditor.FilterBlock({ node : div });
+ }
+
+ var html = div.innerHTML;
+
+ //?? tidy?
+ if (this.autoClean) {
+
+ new Roo.htmleditor.FilterAttributes({
+ node : div,
+ attrib_white : [
+ 'href',
+ 'src',
+ 'name',
+ 'align',
+ 'colspan',
+ 'rowspan',
+ 'data-display',
+ 'data-width',
+ 'start' ,
+ 'style',
+ // youtube embed.
+ 'class',
+ 'allowfullscreen',
+ 'frameborder',
+ 'width',
+ 'height',
+ 'alt'
+ ],
+ attrib_clean : ['href', 'src' ]
+ });
+
+ var tidy = new Roo.htmleditor.TidySerializer({
+ inner: true
+ });
+ html = tidy.serialize(div);
+
+ }
+
+
+ if(Roo.isSafari){
+ var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+ var m = bs ? bs.match(/text-align:(.*?);/i) : false;
+ if(m && m[1]){
+ html = '<div style="'+m[0]+'">' + html + '</div>';
}
- item.destroy();
+ }
+ html = this.cleanHtml(html);
+ // fix up the special chars.. normaly like back quotes in word...
+ // however we do not want to do this with chinese..
+ html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+
+ var cc = match.charCodeAt();
+
+ // Get the character value, handling surrogate pairs
+ if (match.length == 2) {
+ // It's a surrogate pair, calculate the Unicode code point
+ var high = match.charCodeAt(0) - 0xD800;
+ var low = match.charCodeAt(1) - 0xDC00;
+ cc = (high * 0x400) + low + 0x10000;
+ } else if (
+ (cc >= 0x4E00 && cc < 0xA000 ) ||
+ (cc >= 0x3400 && cc < 0x4E00 ) ||
+ (cc >= 0xf900 && cc < 0xfb00 )
+ ) {
+ return match;
+ }
+
+ // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+ return "&#" + cc + ";";
+
+
});
+
+
+ if(this.owner.fireEvent('beforesync', this, html) !== false){
+ this.el.dom.value = html;
+ this.owner.fireEvent('sync', this, html);
+ }
}
},
- onFirstFocus: function() {
- this.tb.items.each(function(item){
- item.enable();
- });
- }
-});
-
-
-
-// <script type="text/javascript">
-/*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
-
- */
-
-
-/**
- * @class Roo.form.HtmlEditor.ToolbarContext
- * Context Toolbar
- *
- * Usage:
- *
- new Roo.form.HtmlEditor({
- ....
- toolbars : [
- { xtype: 'ToolbarStandard', styles : {} }
- { xtype: 'ToolbarContext', disable : {} }
- ]
-})
-
-
- *
- * @config : {Object} disable List of elements to disable.. (not done yet.)
- * @config : {Object} styles Map of styles available.
- *
- */
-
-Roo.form.HtmlEditor.ToolbarContext = function(config)
-{
-
- Roo.apply(this, config);
- //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
- // dont call parent... till later.
- this.styles = this.styles || {};
-}
-
-
-
-Roo.form.HtmlEditor.ToolbarContext.types = {
- 'IMG' : {
- width : {
- title: "Width",
- width: 40
- },
- height: {
- title: "Height",
- width: 40
- },
- align: {
- title: "Align",
- opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
- width : 80
+ /**
+ * TEXTAREA -> EDITABLE
+ * Protected method that will not generally be called directly. Pushes the value of the textarea
+ * into the iframe editor.
+ */
+ pushValue : function()
+ {
+ //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
+ if(this.initialized){
+ var v = this.el.dom.value.trim();
+
+
+ if(this.owner.fireEvent('beforepush', this, v) !== false){
+ var d = (this.doc.body || this.doc.documentElement);
+ d.innerHTML = v;
+
+ this.el.dom.value = d.innerHTML;
+ this.owner.fireEvent('push', this, v);
+ }
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
+ new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
+ }
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
+ }
+
+ this.updateLanguage();
+
+ var lc = this.doc.body.lastChild;
+ if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
+ // add an extra line at the end.
+ this.doc.body.appendChild(this.doc.createElement('br'));
+ }
- },
- border: {
- title: "Border",
- width: 40
- },
- alt: {
- title: "Alt",
- width: 120
- },
- src : {
- title: "Src",
- width: 220
- }
-
- },
- 'A' : {
- name : {
- title: "Name",
- width: 50
- },
- target: {
- title: "Target",
- width: 120
- },
- href: {
- title: "Href",
- width: 220
- } // border?
-
- },
- 'TABLE' : {
- rows : {
- title: "Rows",
- width: 20
- },
- cols : {
- title: "Cols",
- width: 20
- },
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- border : {
- title: "Border",
- width: 20
- }
- },
- 'TD' : {
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- align: {
- title: "Align",
- opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
- width: 80
- },
- valign: {
- title: "Valign",
- opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
- width: 80
- },
- colspan: {
- title: "Colspan",
- width: 20
- },
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'INPUT' : {
- name : {
- title: "name",
- width: 120
- },
- value : {
- title: "Value",
- width: 120
- },
- width : {
- title: "Width",
- width: 40
- }
- },
- 'LABEL' : {
- 'for' : {
- title: "For",
- width: 120
}
},
- 'TEXTAREA' : {
- name : {
- title: "name",
- width: 120
- },
- rows : {
- title: "Rows",
- width: 20
- },
- cols : {
- title: "Cols",
- width: 20
- }
+
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
},
- 'SELECT' : {
- name : {
- title: "name",
- width: 120
- },
- selectoptions : {
- title: "Options",
- width: 200
+
+ // doc'ed in Field
+ focus : function(){
+ if(this.win && !this.sourceEditMode){
+ this.win.focus();
+ }else{
+ this.el.focus();
}
},
- // should we really allow this??
- // should this just be
- 'BODY' : {
- title : {
- title: "Title",
- width: 200,
- disabled : true
- }
- },
- 'SPAN' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'DIV' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
+ assignDocWin: function()
+ {
+ var iframe = this.iframe;
+
+ if(Roo.isIE){
+ this.doc = iframe.contentWindow.document;
+ this.win = iframe.contentWindow;
+ } else {
+// if (!Roo.get(this.frameId)) {
+// return;
+// }
+// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+// this.win = Roo.get(this.frameId).dom.contentWindow;
+
+ if (!Roo.get(this.frameId) && !iframe.contentDocument) {
+ return;
+ }
+
+ this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+ this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
}
},
- 'P' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
-
- '*' : {
- // empty..
- }
-
-};
-
-// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
-Roo.form.HtmlEditor.ToolbarContext.stores = false;
-
-Roo.form.HtmlEditor.ToolbarContext.options = {
- 'font-family' : [
- [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
- [ 'Courier New', 'Courier New'],
- [ 'Tahoma', 'Tahoma'],
- [ 'Times New Roman,serif', 'Times'],
- [ 'Verdana','Verdana' ]
- ]
-};
-
-// fixme - these need to be configurable..
-
-
-//Roo.form.HtmlEditor.ToolbarContext.types
-
-
-Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
-
- tb: false,
-
- rendered: false,
-
- editor : false,
- editorcore : false,
- /**
- * @cfg {Object} disable List of toolbar elements to disable
-
- */
- disable : false,
- /**
- * @cfg {Object} styles List of styles
- * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
- *
- * These must be defined in the page, so they get rendered correctly..
- * .headline { }
- * TD.underline { }
- *
- */
- styles : false,
- options: false,
-
- toolbars : false,
-
- init : function(editor)
- {
- this.editor = editor;
- this.editorcore = editor.editorcore ? editor.editorcore : editor;
- var editorcore = this.editorcore;
+ // private
+ initEditor : function(){
+ //console.log("INIT EDITOR");
+ this.assignDocWin();
- var fid = editorcore.frameId;
- var etb = this;
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: editorcore, // was editor...
- handler:handler||editorcore.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
- }
- // create a new element.
- var wdiv = editor.wrap.createChild({
- tag: 'div'
- }, editor.wrap.dom.firstChild.nextSibling, true);
- // can we do this more than once??
- // stop form submits
-
-
- // disable everything...
- var ty= Roo.form.HtmlEditor.ToolbarContext.types;
- this.toolbars = {};
-
- for (var i in ty) {
-
- this.toolbars[i] = this.buildToolbar(ty[i],i);
- }
- this.tb = this.toolbars.BODY;
- this.tb.el.show();
- this.buildFooter();
- this.footer.show();
- editor.on('hide', function( ) { this.footer.hide() }, this);
- editor.on('show', function( ) { this.footer.show() }, this);
+ this.doc.designMode="on";
+ this.doc.open();
+ this.doc.write(this.getDocMarkup());
+ this.doc.close();
-
- this.rendered = true;
+ var dbody = (this.doc.body || this.doc.documentElement);
+ //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
+ // this copies styles from the containing element into thsi one..
+ // not sure why we need all of this..
+ //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
- // the all the btns;
- editor.on('editorevent', this.updateToolbar, this);
- // other toolbars need to implement this..
- //editor.on('editmodechange', this.updateToolbar, this);
- },
-
-
-
- /**
- * Protected method that will not generally be called directly. It triggers
- * a toolbar update by reading the markup state of the current selection in the editor.
- *
- * Note you can force an update by calling on('editorevent', scope, false)
- */
- updateToolbar: function(editor,ev,sel){
-
- //Roo.log(ev);
- // capture mouse up - this is handy for selecting images..
- // perhaps should go somewhere else...
- if(!this.editorcore.activated){
- this.editor.onFirstFocus();
- return;
- }
+ //var ss = this.el.getStyles( 'background-image', 'background-repeat');
+ //ss['background-attachment'] = 'fixed'; // w3c
+ dbody.bgProperties = 'fixed'; // ie
+ dbody.setAttribute("translate", "no");
+ //Roo.DomHelper.applyStyles(dbody, ss);
+ Roo.EventManager.on(this.doc, {
+
+ 'mouseup': this.onEditorEvent,
+ 'dblclick': this.onEditorEvent,
+ 'click': this.onEditorEvent,
+ 'keyup': this.onEditorEvent,
+
+ buffer:100,
+ scope: this
+ });
+ Roo.EventManager.on(this.doc, {
+ 'paste': this.onPasteEvent,
+ scope : this
+ });
+ if(Roo.isGecko){
+ Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
+ }
+ //??? needed???
+ if(Roo.isIE || Roo.isSafari || Roo.isOpera){
+ Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
+ }
+ this.initialized = true;
+
+ // initialize special key events - enter
+ new Roo.htmleditor.KeyEnter({core : this});
- // http://developer.yahoo.com/yui/docs/simple-editor.js.html
- // selectNode - might want to handle IE?
- if (ev &&
- (ev.type == 'mouseup' || ev.type == 'click' ) &&
- ev.target && ev.target.tagName == 'IMG') {
- // they have click on an image...
- // let's see if we can change the selection...
- sel = ev.target;
- var nodeRange = sel.ownerDocument.createRange();
- try {
- nodeRange.selectNode(sel);
- } catch (e) {
- nodeRange.selectNodeContents(sel);
- }
- //nodeRange.collapse(true);
- var s = this.editorcore.win.getSelection();
- s.removeAllRanges();
- s.addRange(nodeRange);
- }
-
- var updateFooter = sel ? false : true;
+ this.owner.fireEvent('initialize', this);
+ this.pushValue();
+ },
+ // this is to prevent a href clicks resulting in a redirect?
+
+ onPasteEvent : function(e,v)
+ {
+ // I think we better assume paste is going to be a dirty load of rubish from word..
+ // even pasting into a 'email version' of this widget will have to clean up that mess.
+ var cd = (e.browserEvent.clipboardData || window.clipboardData);
- var ans = this.editorcore.getAllAncestors();
+ // check what type of paste - if it's an image, then handle it differently.
+ if (cd.files && cd.files.length > 0) {
+ // pasting images?
+ var urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+ var url = urlAPI.createObjectURL( cd.files[0]);
+ this.insertAtCursor('<img src=" + url + ">');
+ return false;
+ }
+ if (cd.types.indexOf('text/html') < 0 ) {
+ return false;
+ }
+ var images = [];
+ var html = cd.getData('text/html'); // clipboard event
+ if (cd.types.indexOf('text/rtf') > -1) {
+ var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
+ images = parser.doc ? parser.doc.getElementsByType('pict') : [];
+ }
+ //Roo.log(images);
+ //Roo.log(imgs);
+ // fixme..
+ images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
+ .map(function(g) { return g.toDataURL(); })
+ .filter(function(g) { return g != 'about:blank'; });
- // pick
- var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+ //Roo.log(html);
+ html = this.cleanWordChars(html);
- if (!sel) {
- sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
- sel = sel ? sel : this.editorcore.doc.body;
- sel = sel.tagName.length ? sel : this.editorcore.doc.body;
-
- }
- // pick a menu that exists..
- var tn = sel.tagName.toUpperCase();
- //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
+ var d = (new DOMParser().parseFromString(html, 'text/html')).body;
- tn = sel.tagName.toUpperCase();
- var lastSel = this.tb.selectedNode;
+ var sn = this.getParentElement();
+ // check if d contains a table, and prevent nesting??
+ //Roo.log(d.getElementsByTagName('table'));
+ //Roo.log(sn);
+ //Roo.log(sn.closest('table'));
+ if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
+ e.preventDefault();
+ this.insertAtCursor("You can not nest tables");
+ //Roo.log("prevent?"); // fixme -
+ return false;
+ }
- this.tb.selectedNode = sel;
- // if current menu does not match..
- if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
-
- this.tb.el.hide();
- ///console.log("show: " + tn);
- this.tb = typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
- this.tb.el.show();
- // update name
- this.tb.items.first().el.innerHTML = tn + ': ';
+ if (images.length > 0) {
+ // replace all v:imagedata - with img.
+ var ar = Array.from(d.getElementsByTagName('v:imagedata'));
+ Roo.each(ar, function(node) {
+ node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
+ node.parentNode.removeChild(node);
+ });
- // update attributes
- if (this.tb.fields) {
- this.tb.fields.each(function(e) {
- if (e.stylename) {
- e.setValue(sel.style[e.stylename]);
- return;
- }
- e.setValue(sel.getAttribute(e.attrname));
- });
- }
+ Roo.each(d.getElementsByTagName('img'), function(img, i) {
+ img.setAttribute('src', images[i]);
+ });
+ }
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterWord({ node : d });
- var hasStyles = false;
- for(var i in this.styles) {
- hasStyles = true;
- break;
- }
+ new Roo.htmleditor.FilterStyleToTag({ node : d });
+ new Roo.htmleditor.FilterAttributes({
+ node : d,
+ attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width', 'start'],
+ attrib_clean : ['href', 'src' ]
+ });
+ new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
+ // should be fonts..
+ new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
+ new Roo.htmleditor.FilterParagraph({ node : d });
+ new Roo.htmleditor.FilterSpan({ node : d });
+ new Roo.htmleditor.FilterLongBr({ node : d });
+ new Roo.htmleditor.FilterComment({ node : d });
- // update styles
- if (hasStyles) {
- var st = this.tb.fields.item(0);
-
- st.store.removeAll();
-
-
- var cn = sel.className.split(/\s+/);
+
+ }
+ if (this.enableBlocks) {
- var avs = [];
- if (this.styles['*']) {
-
- Roo.each(this.styles['*'], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
- if (this.styles[tn]) {
- Roo.each(this.styles[tn], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
+ Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+ if (img.closest('figure')) { // assume!! that it's aready
+ return;
}
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : img.src
+ });
+ fig.updateElement(img); // replace it..
- st.store.loadData(avs);
- st.collapse();
- st.setValue(cn);
- }
- // flag our selected Node.
- this.tb.selectedNode = sel;
-
-
- Roo.menu.MenuMgr.hideAll();
-
- }
-
- if (!updateFooter) {
- //this.footDisp.dom.innerHTML = '';
- return;
+ });
}
- // update the footer
- //
- var html = '';
- this.footerEls = ans.reverse();
- Roo.each(this.footerEls, function(a,i) {
- if (!a) { return; }
- html += html.length ? ' > ' : '';
-
- html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
-
- });
-
- //
- var sz = this.footDisp.up('td').getSize();
- this.footDisp.dom.style.width = (sz.width -10) + 'px';
- this.footDisp.dom.style.marginLeft = '5px';
- this.footDisp.dom.style.overflow = 'hidden';
+ this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
+ }
+
- this.footDisp.dom.innerHTML = html;
-
- //this.editorsyncValue();
+ e.preventDefault();
+ return false;
+ // default behaveiour should be our local cleanup paste? (optional?)
+ // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
+ //this.owner.fireEvent('paste', e, v);
},
-
-
-
-
// private
onDestroy : function(){
+
+
+
if(this.rendered){
- this.tb.items.each(function(item){
- if(item.menu){
- item.menu.removeAll();
- if(item.menu.el){
- item.menu.el.destroy();
- }
- }
- item.destroy();
- });
-
+ //for (var i =0; i < this.toolbars.length;i++) {
+ // // fixme - ask toolbars for heights?
+ // this.toolbars[i].onDestroy();
+ // }
+
+ //this.wrap.dom.innerHTML = '';
+ //this.wrap.remove();
}
},
- onFirstFocus: function() {
- // need to do this for all the toolbars..
- this.tb.items.each(function(item){
- item.enable();
- });
- },
- buildToolbar: function(tlist, nm)
- {
- var editor = this.editor;
- var editorcore = this.editorcore;
- // create a new element.
- var wdiv = editor.wrap.createChild({
- tag: 'div'
- }, editor.wrap.dom.firstChild.nextSibling, true);
-
-
- var tb = new Roo.Toolbar(wdiv);
- // add the name..
+
+ // private
+ onFirstFocus : function(){
- tb.add(nm+ ": ");
+ this.assignDocWin();
+ this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
- var styles = [];
- for(var i in this.styles) {
- styles.push(i);
+ this.activated = true;
+
+
+ if(Roo.isGecko){ // prevent silly gecko errors
+ this.win.focus();
+ var s = this.win.getSelection();
+ if(!s.focusNode || s.focusNode.nodeType != 3){
+ var r = s.getRangeAt(0);
+ r.selectNodeContents((this.doc.body || this.doc.documentElement));
+ r.collapse(true);
+ this.deferFocus();
+ }
+ try{
+ this.execCmd('useCSS', true);
+ this.execCmd('styleWithCSS', false);
+ }catch(e){}
}
-
- // styles...
- if (styles && styles.length) {
+ this.owner.fireEvent('activate', this);
+ },
+
+ // private
+ adjustFont: function(btn){
+ var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
+ //if(Roo.isSafari){ // safari
+ // adjust *= 2;
+ // }
+ var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
+ if(Roo.isSafari){ // safari
+ var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
+ v = (v < 10) ? 10 : v;
+ v = (v > 48) ? 48 : v;
+ v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
- // this needs a multi-select checkbox...
- tb.addField( new Roo.form.ComboBox({
- store: new Roo.data.SimpleStore({
- id : 'val',
- fields: ['val', 'selected'],
- data : []
- }),
- name : '-roo-edit-className',
- attrname : 'className',
- displayField: 'val',
- typeAhead: false,
- mode: 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Select Style',
- selectOnFocus:true,
- width: 130,
- listeners : {
- 'select': function(c, r, i) {
- // initial support only for on class per el..
- tb.selectedNode.className = r ? r.get('val') : '';
- editorcore.syncValue();
- }
- }
-
- }));
}
- var tbc = Roo.form.HtmlEditor.ToolbarContext;
- var tbops = tbc.options;
- for (var i in tlist) {
-
- var item = tlist[i];
- tb.add(item.title + ": ");
-
-
- //optname == used so you can configure the options available..
- var opts = item.opts ? item.opts : false;
- if (item.optname) {
- opts = tbops[item.optname];
-
- }
-
- if (opts) {
- // opts == pulldown..
- tb.addField( new Roo.form.ComboBox({
- store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
- id : 'val',
- fields: ['val', 'display'],
- data : opts
- }),
- name : '-roo-edit-' + i,
- attrname : i,
- stylename : item.style ? item.style : false,
- displayField: item.displayField ? item.displayField : 'val',
- valueField : 'val',
- typeAhead: false,
- mode: typeof(tbc.stores[i]) != 'undefined' ? 'remote' : 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Select',
- selectOnFocus:true,
- width: item.width ? item.width : 130,
- listeners : {
- 'select': function(c, r, i) {
- if (c.stylename) {
- tb.selectedNode.style[c.stylename] = r.get('val');
- return;
- }
- tb.selectedNode.setAttribute(c.attrname, r.get('val'));
- }
- }
+ v = Math.max(1, v+adjust);
+
+ this.execCmd('FontSize', v );
+ },
- }));
- continue;
-
-
-
- tb.addField( new Roo.form.TextField({
- name: i,
- width: 100,
- //allowBlank:false,
- value: ''
- }));
- continue;
+ onEditorEvent : function(e)
+ {
+
+
+ if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ return; // we do not handle this.. (undo manager does..)
+ }
+ // in theory this detects if the last element is not a br, then we try and do that.
+ // its so clicking in space at bottom triggers adding a br and moving the cursor.
+ if (e &&
+ e.target.nodeName == 'BODY' &&
+ e.type == "mouseup" &&
+ this.doc.body.lastChild
+ ) {
+ var lc = this.doc.body.lastChild;
+ // gtx-trans is google translate plugin adding crap.
+ while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
+ lc = lc.previousSibling;
+ }
+ if (lc.nodeType == 1 && lc.nodeName != 'BR') {
+ // if last element is <BR> - then dont do anything.
+
+ var ns = this.doc.createElement('br');
+ this.doc.body.appendChild(ns);
+ range = this.doc.createRange();
+ range.setStartAfter(ns);
+ range.collapse(true);
+ var sel = this.win.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
}
- tb.addField( new Roo.form.TextField({
- name: '-roo-edit-' + i,
- attrname : i,
-
- width: item.width,
- //allowBlank:true,
- value: '',
- listeners: {
- 'change' : function(f, nv, ov) {
- tb.selectedNode.setAttribute(f.attrname, nv);
- editorcore.syncValue();
- }
- }
- }));
-
}
- var _this = this;
- if(nm == 'BODY'){
- tb.addSeparator();
- tb.addButton( {
- text: 'Stylesheets',
+ this.fireEditorEvent(e);
+ // this.updateToolbar();
+ this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
+ },
+
+ fireEditorEvent: function(e)
+ {
+ this.owner.fireEvent('editorevent', this, e);
+ },
- listeners : {
- click : function ()
- {
- _this.editor.fireEvent('stylesheetsclick', _this.editor);
- }
- }
- });
+ insertTag : function(tg)
+ {
+ // could be a bit smarter... -> wrap the current selected tRoo..
+ if (tg.toLowerCase() == 'span' ||
+ tg.toLowerCase() == 'code' ||
+ tg.toLowerCase() == 'sup' ||
+ tg.toLowerCase() == 'sub'
+ ) {
+
+ range = this.createRange(this.getSelection());
+ var wrappingNode = this.doc.createElement(tg.toLowerCase());
+ wrappingNode.appendChild(range.extractContents());
+ range.insertNode(wrappingNode);
+
+ return;
+
+
+
}
+ this.execCmd("formatblock", tg);
+ this.undoManager.addEvent();
+ },
+
+ insertText : function(txt)
+ {
- tb.addFill();
- tb.addButton( {
- text: 'Remove Tag',
+
+ var range = this.createRange();
+ range.deleteContents();
+ //alert(Sender.getAttribute('label'));
+
+ range.insertNode(this.doc.createTextNode(txt));
+ this.undoManager.addEvent();
+ } ,
- listeners : {
- click : function ()
- {
- // remove
- // undo does not work.
-
- var sn = tb.selectedNode;
-
- var pn = sn.parentNode;
-
- var stn = sn.childNodes[0];
- var en = sn.childNodes[sn.childNodes.length - 1 ];
- while (sn.childNodes.length) {
- var node = sn.childNodes[0];
- sn.removeChild(node);
- //Roo.log(node);
- pn.insertBefore(node, sn);
-
- }
- pn.removeChild(sn);
- var range = editorcore.createRange();
+
+
+ /**
+ * Executes a Midas editor command on the editor document and performs necessary focus and
+ * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ */
+ relayCmd : function(cmd, value)
+ {
- range.setStart(stn,0);
- range.setEnd(en,0); //????
- //range.selectNode(sel);
-
-
- var selection = editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
-
-
-
- //_this.updateToolbar(null, null, pn);
- _this.updateToolbar(null, null, null);
- _this.footDisp.dom.innerHTML = '';
+ switch (cmd) {
+ case 'justifyleft':
+ case 'justifyright':
+ case 'justifycenter':
+ // if we are in a cell, then we will adjust the
+ var n = this.getParentElement();
+ var td = n.closest('td');
+ if (td) {
+ var bl = Roo.htmleditor.Block.factory(td);
+ bl.textAlign = cmd.replace('justify','');
+ bl.updateElement();
+ this.owner.fireEvent('editorevent', this);
+ return;
}
- }
-
-
+ this.execCmd('styleWithCSS', true); //
+ break;
+ case 'bold':
+ case 'italic':
+ // if there is no selection, then we insert, and set the curson inside it..
+ this.execCmd('styleWithCSS', false);
+ break;
-
- });
+ default:
+ break;
+ }
- tb.el.on('click', function(e){
- e.preventDefault(); // what does this do?
- });
- tb.el.setVisibilityMode( Roo.Element.DISPLAY);
- tb.el.hide();
- tb.name = nm;
- // dont need to disable them... as they will get hidden
- return tb;
-
+ this.win.focus();
+ this.execCmd(cmd, value);
+ this.owner.fireEvent('editorevent', this);
+ //this.updateToolbar();
+ this.owner.deferFocus();
},
- buildFooter : function()
+
+ /**
+ * Executes a Midas editor command directly on the editor document.
+ * For visual commands, you should use {@link #relayCmd} instead.
+ * <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ */
+ execCmd : function(cmd, value){
+ this.doc.execCommand(cmd, false, value === undefined ? null : value);
+ this.syncValue();
+ },
+
+
+
+ /**
+ * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+ * to insert tRoo.
+ * @param {String} text | dom node..
+ */
+ insertAtCursor : function(text)
{
- var fel = this.editor.wrap.createChild();
- this.footer = new Roo.Toolbar(fel);
- // toolbar has scrolly on left / right?
- var footDisp= new Roo.Toolbar.Fill();
- var _t = this;
- this.footer.add(
- {
- text : '<',
- xtype: 'Button',
- handler : function() {
- _t.footDisp.scrollTo('left',0,true)
+ if(!this.activated){
+ return;
+ }
+
+ if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
+ this.win.focus();
+
+
+ // from jquery ui (MIT licenced)
+ var range, node;
+ var win = this.win;
+
+ if (win.getSelection && win.getSelection().getRangeAt) {
+
+ // delete the existing?
+
+ this.createRange(this.getSelection()).deleteContents();
+ range = win.getSelection().getRangeAt(0);
+ node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
+ range.insertNode(node);
+ range = range.cloneRange();
+ range.collapse(false);
+
+ win.getSelection().removeAllRanges();
+ win.getSelection().addRange(range);
+
+
+
+ } else if (win.document.selection && win.document.selection.createRange) {
+ // no firefox support
+ var txt = typeof(text) == 'string' ? text : text.outerHTML;
+ win.document.selection.createRange().pasteHTML(txt);
+
+ } else {
+ // no firefox support
+ var txt = typeof(text) == 'string' ? text : text.outerHTML;
+ this.execCmd('InsertHTML', txt);
+ }
+ this.syncValue();
+
+ this.deferFocus();
+ }
+ },
+ // private
+ mozKeyPress : function(e){
+ if(e.ctrlKey){
+ var c = e.getCharCode(), cmd;
+
+ if(c > 0){
+ c = String.fromCharCode(c).toLowerCase();
+ switch(c){
+ case 'b':
+ cmd = 'bold';
+ break;
+ case 'i':
+ cmd = 'italic';
+ break;
+
+ case 'u':
+ cmd = 'underline';
+ break;
+
+ //case 'v':
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+
}
- }
- );
- this.footer.add( footDisp );
- this.footer.add(
- {
- text : '>',
- xtype: 'Button',
- handler : function() {
- // no animation..
- _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+ if(cmd){
+
+ this.relayCmd(cmd);
+ //this.win.focus();
+ //this.execCmd(cmd);
+ //this.deferFocus();
+ e.preventDefault();
}
+
}
- );
- var fel = Roo.get(footDisp.el);
- fel.addClass('x-editor-context');
- this.footDispWrap = fel;
- this.footDispWrap.overflow = 'hidden';
+ }
+ },
+
+ // private
+ fixKeys : function(){ // load time branching for fastest keydown performance
- this.footDisp = fel.createChild();
- this.footDispWrap.on('click', this.onContextClick, this)
+
+ if(Roo.isIE){
+ return function(e){
+ var k = e.getKey(), r;
+ if(k == e.TAB){
+ e.stopEvent();
+ r = this.doc.selection.createRange();
+ if(r){
+ r.collapse(true);
+ r.pasteHTML('    ');
+ this.deferFocus();
+ }
+ return;
+ }
+ /// this is handled by Roo.htmleditor.KeyEnter
+ /*
+ if(k == e.ENTER){
+ r = this.doc.selection.createRange();
+ if(r){
+ var target = r.parentElement();
+ if(!target || target.tagName.toLowerCase() != 'li'){
+ e.stopEvent();
+ r.pasteHTML('<br/>');
+ r.collapse(false);
+ r.select();
+ }
+ }
+ }
+ */
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
+
+
+ };
+ }else if(Roo.isOpera){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.win.focus();
+ this.execCmd('InsertHTML','    ');
+ this.deferFocus();
+ }
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
+
+ };
+ }else if(Roo.isSafari){
+ return function(e){
+ var k = e.getKey();
+
+ if(k == e.TAB){
+ e.stopEvent();
+ this.execCmd('InsertText','\t');
+ this.deferFocus();
+ return;
+ }
+ this.mozKeyPress(e);
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ // }
+
+ };
+ }
+ }(),
+
+ getAllAncestors: function()
+ {
+ var p = this.getSelectedNode();
+ var a = [];
+ if (!p) {
+ a.push(p); // push blank onto stack..
+ p = this.getParentElement();
+ }
+ while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
+ a.push(p);
+ p = p.parentNode;
+ }
+ a.push(this.doc.body);
+ return a;
},
- onContextClick : function (ev,dom)
+ lastSel : false,
+ lastSelNode : false,
+
+
+ getSelection : function()
{
- ev.preventDefault();
- var cn = dom.className;
- //Roo.log(cn);
- if (!cn.match(/x-ed-loc-/)) {
- return;
+ this.assignDocWin();
+ return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
+ },
+ /**
+ * Select a dom node
+ * @param {DomElement} node the node to select
+ */
+ selectNode : function(node, collapse)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
}
- var n = cn.split('-').pop();
- var ans = this.footerEls;
- var sel = ans[n];
-
- // pick
- var range = this.editorcore.createRange();
+ if (collapse === true) {
+ nodeRange.collapse(true);
+ }
+ //
+ var s = this.win.getSelection();
+ s.removeAllRanges();
+ s.addRange(nodeRange);
+ },
+
+ getSelectedNode: function()
+ {
+ // this may only work on Gecko!!!
- range.selectNodeContents(sel);
- //range.selectNode(sel);
+ // should we cache this!!!!
+
+
+ var range = this.createRange(this.getSelection()).cloneRange();
- var selection = this.editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
+ if (Roo.isIE) {
+ var parent = range.parentElement();
+ while (true) {
+ var testRange = range.duplicate();
+ testRange.moveToElementText(parent);
+ if (testRange.inRange(range)) {
+ break;
+ }
+ if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
+ break;
+ }
+ parent = parent.parentElement;
+ }
+ return parent;
+ }
+ // is ancestor a text element.
+ var ac = range.commonAncestorContainer;
+ if (ac.nodeType == 3) {
+ ac = ac.parentNode;
+ }
+ var ar = ac.childNodes;
+
+ var nodes = [];
+ var other_nodes = [];
+ var has_other_nodes = false;
+ for (var i=0;i<ar.length;i++) {
+ if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
+ continue;
+ }
+ // fullly contained node.
+
+ if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
+ nodes.push(ar[i]);
+ continue;
+ }
+
+ // probably selected..
+ if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
+ other_nodes.push(ar[i]);
+ continue;
+ }
+ // outer..
+ if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
+ continue;
+ }
+
+
+ has_other_nodes = true;
+ }
+ if (!nodes.length && other_nodes.length) {
+ nodes= other_nodes;
+ }
+ if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
+ return false;
+ }
- this.updateToolbar(null, null, sel);
+ return nodes[0];
+ },
+
+
+ createRange: function(sel)
+ {
+ // this has strange effects when using with
+ // top toolbar - not sure if it's a great idea.
+ //this.editor.contentWindow.focus();
+ if (typeof sel != "undefined") {
+ try {
+ return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
+ } catch(e) {
+ return this.doc.createRange();
+ }
+ } else {
+ return this.doc.createRange();
+ }
+ },
+ getParentElement: function()
+ {
+ this.assignDocWin();
+ var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
- }
+ var range = this.createRange(sel);
+
+ try {
+ var p = range.commonAncestorContainer;
+ while (p.nodeType == 3) { // text node
+ p = p.parentNode;
+ }
+ return p;
+ } catch (e) {
+ return null;
+ }
+
+ },
+ /***
+ *
+ * Range intersection.. the hard stuff...
+ * '-1' = before
+ * '0' = hits..
+ * '1' = after.
+ * [ -- selected range --- ]
+ * [fail] [fail]
+ *
+ * basically..
+ * if end is before start or hits it. fail.
+ * if start is after end or hits it fail.
+ *
+ * if either hits (but other is outside. - then it's not
+ *
+ *
+ **/
+ // @see http://www.thismuchiknow.co.uk/?p=64.
+ rangeIntersectsNode : function(range, node)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
+ }
+ var rangeStartRange = range.cloneRange();
+ rangeStartRange.collapse(true);
+ var rangeEndRange = range.cloneRange();
+ rangeEndRange.collapse(false);
-});
-
-
-
-
-
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.BasicForm
- * @extends Roo.util.Observable
- * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
- * @constructor
- * @param {String/HTMLElement/Roo.Element} el The form element or its id
- * @param {Object} config Configuration options
- */
-Roo.form.BasicForm = function(el, config){
- this.allItems = [];
- this.childForms = [];
- Roo.apply(this, config);
- /*
- * The Roo.form.Field items in this form.
- * @type MixedCollection
- */
+ var nodeStartRange = nodeRange.cloneRange();
+ nodeStartRange.collapse(true);
+
+ var nodeEndRange = nodeRange.cloneRange();
+ nodeEndRange.collapse(false);
+
+ return rangeStartRange.compareBoundaryPoints(
+ Range.START_TO_START, nodeEndRange) == -1 &&
+ rangeEndRange.compareBoundaryPoints(
+ Range.START_TO_START, nodeStartRange) == 1;
+
+
+ },
+ rangeCompareNode : function(range, node)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
+ }
+
+
+ range.collapse(true);
+
+ nodeRange.collapse(true);
+ var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
+ var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
+
+ //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
+
+ var nodeIsBefore = ss == 1;
+ var nodeIsAfter = ee == -1;
+
+ if (nodeIsBefore && nodeIsAfter) {
+ return 0; // outer
+ }
+ if (!nodeIsBefore && nodeIsAfter) {
+ return 1; //right trailed.
+ }
+
+ if (nodeIsBefore && !nodeIsAfter) {
+ return 2; // left trailed.
+ }
+ // fully contined.
+ return 3;
+ },
+
+ cleanWordChars : function(input) {// change the chars to hex code
+
+ var swapCodes = [
+ [ 8211, "–" ],
+ [ 8212, "—" ],
+ [ 8216, "'" ],
+ [ 8217, "'" ],
+ [ 8220, '"' ],
+ [ 8221, '"' ],
+ [ 8226, "*" ],
+ [ 8230, "..." ]
+ ];
+ var output = input;
+ Roo.each(swapCodes, function(sw) {
+ var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
+
+ output = output.replace(swapper, sw[1]);
+ });
+
+ return output;
+ },
+
- this.items = new Roo.util.MixedCollection(false, function(o){
- return o.id || (o.id = Roo.id());
- });
- this.addEvents({
- /**
- * @event beforeaction
- * Fires before any action is performed. Return false to cancel the action.
- * @param {Form} this
- * @param {Action} action The action to be performed
- */
- beforeaction: true,
- /**
- * @event actionfailed
- * Fires when an action fails.
- * @param {Form} this
- * @param {Action} action The action that failed
- */
- actionfailed : true,
- /**
- * @event actioncomplete
- * Fires when an action is completed.
- * @param {Form} this
- * @param {Action} action The action that completed
- */
- actioncomplete : true
- });
- if(el){
- this.initEl(el);
- }
- Roo.form.BasicForm.superclass.constructor.call(this);
- Roo.form.BasicForm.popover.apply();
-};
-
-Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
- /**
- * @cfg {String} method
- * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
- */
- /**
- * @cfg {DataReader} reader
- * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
- * This is optional as there is built-in support for processing JSON.
- */
+
+
+ cleanUpChild : function (node)
+ {
+
+ new Roo.htmleditor.FilterComment({node : node});
+ new Roo.htmleditor.FilterAttributes({
+ node : node,
+ attrib_black : this.ablack,
+ attrib_clean : this.aclean,
+ style_white : this.cwhite,
+ style_black : this.cblack
+ });
+ new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
+ new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+
+
+ },
+
/**
- * @cfg {DataReader} errorReader
- * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
- * This is completely optional as there is built-in support for processing JSON.
+ * Clean up MS wordisms...
+ * @deprecated - use filter directly
*/
+ cleanWord : function(node)
+ {
+ new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
+ new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
+
+ },
+
+
/**
- * @cfg {String} url
- * The URL to use for form actions if one isn't supplied in the action options.
- */
- /**
- * @cfg {Boolean} fileUpload
- * Set to true if this form is a file upload.
+
+ * @deprecated - use filters
*/
+ cleanTableWidths : function(node)
+ {
+ new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
+
+
+ },
+
+
+
+ applyBlacklists : function()
+ {
+ var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
+ var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
+
+ this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean : Roo.HtmlEditorCore.aclean;
+ this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack : Roo.HtmlEditorCore.ablack;
+ this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove : Roo.HtmlEditorCore.tag_remove;
+
+ this.white = [];
+ this.black = [];
+ Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ this.white.push(tag);
+
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.white.indexOf(tag) > -1) {
+ return;
+ }
+ this.white.push(tag);
+
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
+
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.black.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
+
+ }, this);
+
+
+ w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
+ b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
+
+ this.cwhite = [];
+ this.cblack = [];
+ Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
+
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.cwhite.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
+
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
+
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.cblack.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
+
+ }, this);
+ },
+
+ setStylesheets : function(stylesheets)
+ {
+ if(typeof(stylesheets) == 'string'){
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : stylesheets
+ });
+
+ return;
+ }
+ var _this = this;
+ Roo.each(stylesheets, function(s) {
+ if(!s.length){
+ return;
+ }
+
+ Roo.get(_this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : s
+ });
+ });
+
+
+ },
+
+
+ updateLanguage : function()
+ {
+ if (!this.iframe || !this.iframe.contentDocument) {
+ return;
+ }
+ Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
+ },
+
+
+ removeStylesheets : function()
+ {
+ var _this = this;
+
+ Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
+ s.remove();
+ });
+ },
+
+ setStyle : function(style)
+ {
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'style',
+ type : 'text/css',
+ html : style
+ });
+
+ return;
+ }
+
+ // hide stuff that is not compatible
/**
- * @cfg {Object} baseParams
- * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+ * @event blur
+ * @hide
*/
- /**
-
/**
- * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ * @event change
+ * @hide
*/
- timeout: 30,
-
- // private
- activeAction : null,
-
/**
- * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
- * or setValues() data instead of when the form was first created.
+ * @event focus
+ * @hide
*/
- trackResetOnLoad : false,
-
-
/**
- * childForms - used for multi-tab forms
- * @type {Array}
+ * @event specialkey
+ * @hide
*/
- childForms : false,
-
/**
- * allItems - full list of fields.
- * @type {Array}
+ * @cfg {String} fieldClass @hide
*/
- allItems : false,
-
/**
- * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
- * element by passing it or its id or mask the form itself by passing in true.
- * @type Mixed
+ * @cfg {String} focusClass @hide
*/
- waitMsgTarget : false,
-
/**
- * @type Boolean
+ * @cfg {String} autoCreate @hide
*/
- disableMask : false,
-
/**
- * @cfg {Boolean} errorMask (true|false) default false
+ * @cfg {String} inputType @hide
*/
- errorMask : false,
-
/**
- * @cfg {Number} maskOffset Default 100
+ * @cfg {String} invalidClass @hide
*/
- maskOffset : 100,
+ /**
+ * @cfg {String} invalidText @hide
+ */
+ /**
+ * @cfg {String} msgFx @hide
+ */
+ /**
+ * @cfg {String} validateOnBlur @hide
+ */
+});
- // private
- initEl : function(el){
- this.el = Roo.get(el);
- this.id = this.el.id || Roo.id();
- this.el.on('submit', this.onSubmit, this);
- this.el.addClass('x-form');
- },
+Roo.HtmlEditorCore.white = [
+ 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
+
+ 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV',
+ 'DL', 'DT', 'H1', 'H2', 'H3', 'H4',
+ 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE',
+ 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE',
+ 'TABLE', 'UL', 'XMP',
+
+ 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH',
+ 'THEAD', 'TR',
+
+ 'DIR', 'MENU', 'OL', 'UL', 'DL',
+
+ 'EMBED', 'OBJECT'
+];
- // private
- onSubmit : function(e){
- e.stopEvent();
- },
- /**
- * Returns true if client-side validation on the form is successful.
- * @return Boolean
- */
- isValid : function(){
- var valid = true;
- var target = false;
- this.items.each(function(f){
- if(f.validate()){
- return;
- }
-
- valid = false;
-
- if(!target && f.el.isVisible(true)){
- target = f;
- }
- });
+Roo.HtmlEditorCore.black = [
+ // 'embed', 'object', // enable - backend responsiblity to clean thiese
+ 'APPLET', //
+ 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY',
+ 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER',
+ 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT',
+ 'SCRIPT', 'STYLE' ,'TITLE', 'XML',
+ //'FONT' // CLEAN LATER..
+ 'COLGROUP', 'COL' // messy tables.
- if(this.errorMask && !valid){
- Roo.form.BasicForm.popover.mask(this, target);
- }
- return valid;
- },
- /**
- * Returns array of invalid form fields.
- * @return Array
- */
+];
+Roo.HtmlEditorCore.clean = [ // ?? needed???
+ 'SCRIPT', 'STYLE', 'TITLE', 'XML'
+];
+Roo.HtmlEditorCore.tag_remove = [
+ 'FONT', 'TBODY'
+];
+// attributes..
+
+Roo.HtmlEditorCore.ablack = [
+ 'on'
+];
- invalidFields : function()
- {
- var ret = [];
- this.items.each(function(f){
- if(f.validate()){
- return;
- }
- ret.push(f);
-
- });
-
- return ret;
- },
+Roo.HtmlEditorCore.aclean = [
+ 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
+];
+
+// protocols..
+Roo.HtmlEditorCore.pwhite= [
+ 'http', 'https', 'mailto'
+];
+
+// white listed style attributes.
+Roo.HtmlEditorCore.cwhite= [
+ // 'text-align', /// default is to allow most things..
+
+
+// 'font-size'//??
+];
+
+// black listed style attributes.
+Roo.HtmlEditorCore.cblack= [
+ // 'font-size' -- this can be set by the project
+];
+
+
+
+
+ //<script type="text/javascript">
+
+/*
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * Licence LGPL
+ *
+ */
+
+
+Roo.form.HtmlEditor = function(config){
+
+
+
+ Roo.form.HtmlEditor.superclass.constructor.call(this, config);
+
+ if (!this.toolbars) {
+ this.toolbars = [];
+ }
+ this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+};
+
+/**
+ * @class Roo.form.HtmlEditor
+ * @extends Roo.form.Field
+ * Provides a lightweight HTML Editor component.
+ *
+ * This has been tested on Fireforx / Chrome.. IE may not be so great..
+ *
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b><br/><br/>
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
/**
- * DEPRICATED Returns true if any fields in this form have changed since their original load.
- * @return Boolean
+ * @cfg {Boolean} clearUp
*/
- isDirty : function(){
- var dirty = false;
- this.items.each(function(f){
- if(f.isDirty()){
- dirty = true;
- return false;
- }
- });
- return dirty;
- },
+ clearUp : true,
+ /**
+ * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
+ */
+ toolbars : false,
+
+ /**
+ * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
+ * Roo.resizable.
+ */
+ resizable : false,
+ /**
+ * @cfg {Number} height (in pixels)
+ */
+ height: 300,
+ /**
+ * @cfg {Number} width (in pixels)
+ */
+ width: 500,
/**
- * Returns true if any fields in this form have changed since their original load. (New version)
- * @return Boolean
+ * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea rootURL + '/roojs1/css/undoreset.css', .
+ *
*/
+ stylesheets: false,
- hasChanged : function()
- {
- var dirty = false;
- this.items.each(function(f){
- if(f.hasChanged()){
- dirty = true;
- return false;
- }
- });
- return dirty;
-
- },
+
+ /**
+ * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
+ *
+ */
+ cblack: false,
/**
- * Resets all hasChanged to 'false' -
- * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
- * So hasChanged storage is only to be used for this purpose
- * @return Boolean
+ * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
+ *
*/
- resetHasChanged : function()
- {
- this.items.each(function(f){
- f.resetHasChanged();
- });
-
- },
-
+ cwhite: false,
+ /**
+ * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
+ *
+ */
+ black: false,
/**
- * Performs a predefined action (submit or load) or custom actions you define on this form.
- * @param {String} actionName The name of the action type
- * @param {Object} options (optional) The options to pass to the action. All of the config options listed
- * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
- * accept other config options):
- * <pre>
-Property Type Description
----------------- --------------- ----------------------------------------------------------------------------------
-url String The url for the action (defaults to the form's url)
-method String The form method to use (defaults to the form's method, or POST if not defined)
-params String/Object The params to pass (defaults to the form's baseParams, or none if not defined)
-clientValidation Boolean Applies to submit only. Pass true to call form.isValid() prior to posting to
- validate the form on the client (defaults to false)
- * </pre>
- * @return {BasicForm} this
+ * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
+ *
*/
- doAction : function(action, options){
- if(typeof action == 'string'){
- action = new Roo.form.Action.ACTION_TYPES[action](this, options);
- }
- if(this.fireEvent('beforeaction', this, action) !== false){
- this.beforeAction(action);
- action.run.defer(100, action);
- }
- return this;
- },
-
+ white: false,
/**
- * Shortcut to do a submit action.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
- * @return {BasicForm} this
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
*/
- submit : function(options){
- this.doAction('submit', options);
- return this;
- },
-
+ allowComments: false,
/**
- * Shortcut to do a load action.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
- * @return {BasicForm} this
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
*/
- load : function(options){
- this.doAction('load', options);
- return this;
- },
-
+ enableBlocks : true,
+
/**
- * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
- * @param {Record} record The record to edit
- * @return {BasicForm} this
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
*/
- updateRecord : function(record){
- record.beginEdit();
- var fs = record.fields;
- fs.each(function(f){
- var field = this.findField(f.name);
- if(field){
- record.set(f.name, field.getValue());
- }
- }, this);
- record.endEdit();
- return this;
- },
-
+ autoClean: true,
/**
- * Loads an Roo.data.Record into this form.
- * @param {Record} record The record to load
- * @return {BasicForm} this
+ * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
*/
- loadRecord : function(record){
- this.setValues(record.data);
- return this;
- },
-
- // private
- beforeAction : function(action){
- var o = action.options;
-
- if(!this.disableMask) {
- if(this.waitMsgTarget === true){
- this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else if(this.waitMsgTarget){
- this.waitMsgTarget = Roo.get(this.waitMsgTarget);
- this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else {
- Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
- }
- }
-
-
- },
-
- // private
- afterAction : function(action, success){
- this.activeAction = null;
- var o = action.options;
+ bodyCls : '',
+ /**
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
+ */
+ language: 'en',
+
+
+ // id of frame..
+ frameId: false,
+
+ // private properties
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
+
+ onFocus : Roo.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
+
+ actionMode : 'container', // defaults to hiding it...
+
+ defaultAutoCreate : { // modified by initCompnoent..
+ tag: "textarea",
+ style:"width:500px;height:300px;",
+ autocomplete: "new-password"
+ },
+
+ // private
+ initComponent : function(){
+ this.addEvents({
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {HtmlEditor} this
+ */
+ initialize: true,
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {HtmlEditor} this
+ */
+ activate: true,
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ beforesync: true,
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ beforepush: true,
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ sync: true,
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ push: true,
+ /**
+ * @event editmodechange
+ * Fires when the editor switches edit modes
+ * @param {HtmlEditor} this
+ * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+ */
+ editmodechange: true,
+ /**
+ * @event editorevent
+ * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+ * @param {HtmlEditor} this
+ */
+ editorevent: true,
+ /**
+ * @event firstfocus
+ * Fires when on first focus - needed by toolbars..
+ * @param {HtmlEditor} this
+ */
+ firstfocus: true,
+ /**
+ * @event autosave
+ * Auto save the htmlEditor value as a file into Events
+ * @param {HtmlEditor} this
+ */
+ autosave: true,
+ /**
+ * @event savedpreview
+ * preview the saved version of htmlEditor
+ * @param {HtmlEditor} this
+ */
+ savedpreview: true,
+
+ /**
+ * @event stylesheetsclick
+ * Fires when press the Sytlesheets button
+ * @param {Roo.HtmlEditorCore} this
+ */
+ stylesheetsclick: true,
+ /**
+ * @event paste
+ * Fires when press user pastes into the editor
+ * @param {Roo.HtmlEditorCore} this
+ */
+ paste: true
+ });
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
+ autocomplete: "new-password"
+ };
+ },
+
+ /**
+ * Protected method that will not generally be called directly. It
+ * is called when the editor creates its toolbar. Override this method if you need to
+ * add custom toolbar buttons.
+ * @param {HtmlEditor} editor
+ */
+ createToolbar : function(editor){
+ Roo.log("create toolbars");
+ if (!editor.toolbars || !editor.toolbars.length) {
+ editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
+ }
- if(!this.disableMask) {
- if(this.waitMsgTarget === true){
- this.el.unmask();
- }else if(this.waitMsgTarget){
- this.waitMsgTarget.unmask();
- }else{
- Roo.MessageBox.updateProgress(1);
- Roo.MessageBox.hide();
- }
+ for (var i =0 ; i < editor.toolbars.length;i++) {
+ editor.toolbars[i] = Roo.factory(
+ typeof(editor.toolbars[i]) == 'string' ?
+ { xtype: editor.toolbars[i]} : editor.toolbars[i],
+ Roo.form.HtmlEditor);
+ editor.toolbars[i].init(editor);
}
+
- if(success){
- if(o.reset){
- this.reset();
- }
- Roo.callback(o.success, o.scope, [this, action]);
- this.fireEvent('actioncomplete', this, action);
+ },
+ /**
+ * get the Context selected node
+ * @returns {DomElement|boolean} selected node if active or false if none
+ *
+ */
+ getSelectedNode : function()
+ {
+ if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
+ return false;
+ }
+ return this.toolbars[1].tb.selectedNode;
+
+ },
+ // private
+ onRender : function(ct, position)
+ {
+ var _t = this;
+ Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+
+ this.wrap = this.el.wrap({
+ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+ });
+
+ this.editorcore.onRender(ct, position);
+
+ if (this.resizable) {
+ this.resizeEl = new Roo.Resizable(this.wrap, {
+ pinned : true,
+ wrap: true,
+ dynamic : true,
+ minHeight : this.height,
+ height: this.height,
+ handles : this.resizable,
+ width: this.width,
+ listeners : {
+ resize : function(r, w, h) {
+ _t.onResize(w,h); // -something
+ }
+ }
+ });
- }else{
+ }
+ this.createToolbar(this);
+
+
+ if(!this.width){
+ this.setSize(this.wrap.getSize());
+ }
+ if (this.resizeEl) {
+ this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
+ // should trigger onReize..
+ }
+
+ this.keyNav = new Roo.KeyNav(this.el, {
- // failure condition..
- // we have a scenario where updates need confirming.
- // eg. if a locking scenario exists..
- // we look for { errors : { needs_confirm : true }} in the response.
- if (
- (typeof(action.result) != 'undefined') &&
- (typeof(action.result.errors) != 'undefined') &&
- (typeof(action.result.errors.needs_confirm) != 'undefined')
- ){
- var _t = this;
- Roo.MessageBox.confirm(
- "Change requires confirmation",
- action.result.errorMsg,
- function(r) {
- if (r != 'yes') {
- return;
- }
- _t.doAction('submit', { params : { _submit_confirmed : 1 } } );
- }
+ "tab" : function(e){
+ e.preventDefault();
+
+ var value = this.getValue();
+
+ var start = this.el.dom.selectionStart;
+ var end = this.el.dom.selectionEnd;
+
+ if(!e.shiftKey){
- );
+ this.setValue(value.substring(0, start) + "\t" + value.substring(end));
+ this.el.dom.setSelectionRange(end + 1, end + 1);
+ return;
+ }
+
+ var f = value.substring(0, start).split("\t");
+ if(f.pop().length != 0){
+ return;
+ }
+ this.setValue(f.join("\t") + value.substring(end));
+ this.el.dom.setSelectionRange(start - 1, start - 1);
- return;
- }
+ },
- Roo.callback(o.failure, o.scope, [this, action]);
- // show an error message if no failed handler is set..
- if (!this.hasListener('actionfailed')) {
- Roo.MessageBox.alert("Error",
- (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
- action.result.errorMsg :
- "Saving Failed, please check your entries or try again"
- );
- }
+ "home" : function(e){
+ e.preventDefault();
+
+ var curr = this.el.dom.selectionStart;
+ var lines = this.getValue().split("\n");
+
+ if(!lines.length){
+ return;
+ }
+
+ if(e.ctrlKey){
+ this.el.dom.setSelectionRange(0, 0);
+ return;
+ }
+
+ var pos = 0;
+
+ for (var i = 0; i < lines.length;i++) {
+ pos += lines[i].length;
+
+ if(i != 0){
+ pos += 1;
+ }
+
+ if(pos < curr){
+ continue;
+ }
+
+ pos -= lines[i].length;
+
+ break;
+ }
+
+ if(!e.shiftKey){
+ this.el.dom.setSelectionRange(pos, pos);
+ return;
+ }
+
+ this.el.dom.selectionStart = pos;
+ this.el.dom.selectionEnd = curr;
+ },
- this.fireEvent('actionfailed', this, action);
- }
+ "end" : function(e){
+ e.preventDefault();
+
+ var curr = this.el.dom.selectionStart;
+ var lines = this.getValue().split("\n");
+
+ if(!lines.length){
+ return;
+ }
+
+ if(e.ctrlKey){
+ this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
+ return;
+ }
+
+ var pos = 0;
+
+ for (var i = 0; i < lines.length;i++) {
+
+ pos += lines[i].length;
+
+ if(i != 0){
+ pos += 1;
+ }
+
+ if(pos < curr){
+ continue;
+ }
+
+ break;
+ }
+
+ if(!e.shiftKey){
+ this.el.dom.setSelectionRange(pos, pos);
+ return;
+ }
+
+ this.el.dom.selectionStart = curr;
+ this.el.dom.selectionEnd = pos;
+ },
+
+ scope : this,
+
+ doRelay : function(foo, bar, hname){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ },
+
+ forceKeyDown: true
+ });
+// if(this.autosave && this.w){
+// this.autoSaveFn = setInterval(this.autosave, 1000);
+// }
},
- /**
- * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
- * @param {String} id The value to search for
- * @return Field
- */
- findField : function(id){
- var field = this.items.get(id);
- if(!field){
- this.items.each(function(f){
- if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
- field = f;
- return false;
+ // private
+ onResize : function(w, h)
+ {
+ Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+ var ew = false;
+ var eh = false;
+
+ if(this.el ){
+ if(typeof w == 'number'){
+ var aw = w - this.wrap.getFrameWidth('lr');
+ this.el.setWidth(this.adjustWidth('textarea', aw));
+ ew = aw;
+ }
+ if(typeof h == 'number'){
+ var tbh = 0;
+ for (var i =0; i < this.toolbars.length;i++) {
+ // fixme - ask toolbars for heights?
+ tbh += this.toolbars[i].tb.el.getHeight();
+ if (this.toolbars[i].footer) {
+ tbh += this.toolbars[i].footer.el.getHeight();
+ }
}
- });
+
+
+
+
+ var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
+ ah -= 5; // knock a few pixes off for look..
+// Roo.log(ah);
+ this.el.setHeight(this.adjustWidth('textarea', ah));
+ var eh = ah;
+ }
}
- return field || null;
+ Roo.log('onResize:' + [w,h,ew,eh].join(',') );
+ this.editorcore.onResize(ew,eh);
+
},
/**
- * Add a secondary form to this one,
- * Used to provide tabbed forms. One form is primary, with hidden values
- * which mirror the elements from the other forms.
- *
- * @param {Roo.form.Form} form to add.
- *
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
*/
- addForm : function(form)
+ toggleSourceEdit : function(sourceEditMode)
{
-
- if (this.childForms.indexOf(form) > -1) {
- // already added..
- return;
- }
- this.childForms.push(form);
- var n = '';
- Roo.each(form.allItems, function (fe) {
+ this.editorcore.toggleSourceEdit(sourceEditMode);
+
+ if(this.editorcore.sourceEditMode){
+ Roo.log('editor - showing textarea');
- n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
- if (this.findField(n)) { // already added..
- return;
- }
- var add = new Roo.form.Hidden({
- name : n
- });
- add.render(this.el);
+// Roo.log('in');
+// Roo.log(this.syncValue());
+ this.editorcore.syncValue();
+ this.el.removeClass('x-hidden');
+ this.el.dom.removeAttribute('tabIndex');
+ this.el.focus();
+ this.el.dom.scrollTop = 0;
- this.add( add );
- }, this);
-
- },
- /**
- * Mark fields in this form invalid in bulk.
- * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
- * @return {BasicForm} this
- */
- markInvalid : function(errors){
- if(errors instanceof Array){
- for(var i = 0, len = errors.length; i < len; i++){
- var fieldError = errors[i];
- var f = this.findField(fieldError.id);
- if(f){
- f.markInvalid(fieldError.msg);
+
+ for (var i = 0; i < this.toolbars.length; i++) {
+ if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+ this.toolbars[i].tb.hide();
+ this.toolbars[i].footer.hide();
}
}
+
}else{
- var field, id;
- for(id in errors){
- if(typeof errors[id] != 'function' && (field = this.findField(id))){
- field.markInvalid(errors[id]);
+ Roo.log('editor - hiding textarea');
+// Roo.log('out')
+// Roo.log(this.pushValue());
+ this.editorcore.pushValue();
+
+ this.el.addClass('x-hidden');
+ this.el.dom.setAttribute('tabIndex', -1);
+
+ for (var i = 0; i < this.toolbars.length; i++) {
+ if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+ this.toolbars[i].tb.show();
+ this.toolbars[i].footer.show();
}
}
+
+ //this.deferFocus();
}
- Roo.each(this.childForms || [], function (f) {
- f.markInvalid(errors);
- });
- return this;
+ this.setSize(this.wrap.getSize());
+ this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
+
+ this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
+ },
+
+ // private (for BoxComponent)
+ adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+ // private (for BoxComponent)
+ getResizeEl : function(){
+ return this.wrap;
+ },
+
+ // private (for BoxComponent)
+ getPositionEl : function(){
+ return this.wrap;
+ },
+
+ // private
+ initEvents : function(){
+ this.originalValue = this.getValue();
},
/**
- * Set values for fields in this form in bulk.
- * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
- * @return {BasicForm} this
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
*/
- setValues : function(values){
- if(values instanceof Array){ // array of objects
- for(var i = 0, len = values.length; i < len; i++){
- var v = values[i];
- var f = this.findField(v.id);
- if(f){
- f.setValue(v.value);
- if(this.trackResetOnLoad){
- f.originalValue = f.getValue();
- }
- }
- }
- }else{ // object hash
- var field, id;
- for(id in values){
- if(typeof values[id] != 'function' && (field = this.findField(id))){
-
- if (field.setFromData &&
- field.valueField &&
- field.displayField &&
- // combos' with local stores can
- // be queried via setValue()
- // to set their value..
- (field.store && !field.store.isLocal)
- ) {
- // it's a combo
- var sd = { };
- sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
- sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
- field.setFromData(sd);
-
- } else {
- field.setValue(values[id]);
- }
-
-
- if(this.trackResetOnLoad){
- field.originalValue = field.getValue();
- }
- }
- }
- }
- this.resetHasChanged();
-
-
- Roo.each(this.childForms || [], function (f) {
- f.setValues(values);
- f.resetHasChanged();
- });
-
- return this;
- },
-
- /**
- * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
- * they are returned as an array.
- * @param {Boolean} asString
- * @return {Object}
- */
- getValues : function(asString){
- if (this.childForms) {
- // copy values from the child forms
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getValues());
- }, this);
- }
-
- // use formdata
- if (typeof(FormData) != 'undefined' && asString !== true) {
- // this relies on a 'recent' version of chrome apparently...
- try {
- var fd = (new FormData(this.el.dom)).entries();
- var ret = {};
- var ent = fd.next();
- while (!ent.done) {
- ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
- ent = fd.next();
- };
- return ret;
- } catch(e) {
-
- }
-
- }
-
-
- var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
- if(asString === true){
- return fs;
- }
- return Roo.urlDecode(fs);
- },
-
- /**
- * Returns the fields in this form as an object with key/value pairs.
- * This differs from getValues as it calls getValue on each child item, rather than using dom data.
- * @return {Object}
- */
- getFieldValues : function(with_hidden)
- {
- if (this.childForms) {
- // copy values from the child forms
- // should this call getFieldValues - probably not as we do not currently copy
- // hidden fields when we generate..
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getValues());
- }, this);
- }
-
- var ret = {};
- this.items.each(function(f){
- if (!f.getName()) {
- return;
- }
- var v = f.getValue();
- if (f.inputType =='radio') {
- if (typeof(ret[f.getName()]) == 'undefined') {
- ret[f.getName()] = ''; // empty..
- }
-
- if (!f.el.dom.checked) {
- return;
-
- }
- v = f.el.dom.value;
-
- }
-
- // not sure if this supported any more..
- if ((typeof(v) == 'object') && f.getRawValue) {
- v = f.getRawValue() ; // dates..
- }
- // combo boxes where name != hiddenName...
- if (f.name != f.getName()) {
- ret[f.name] = f.getRawValue();
- }
- ret[f.getName()] = v;
- });
-
- return ret;
- },
-
- /**
- * Clears all invalid messages in this form.
- * @return {BasicForm} this
- */
- clearInvalid : function(){
- this.items.each(function(f){
- f.clearInvalid();
- });
-
- Roo.each(this.childForms || [], function (f) {
- f.clearInvalid();
- });
-
-
- return this;
- },
-
+ markInvalid : Roo.emptyFn,
/**
- * Resets this form.
- * @return {BasicForm} this
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
*/
- reset : function(){
- this.items.each(function(f){
- f.reset();
- });
-
- Roo.each(this.childForms || [], function (f) {
- f.reset();
- });
- this.resetHasChanged();
-
- return this;
- },
+ clearInvalid : Roo.emptyFn,
- /**
- * Add Roo.form components to this form.
- * @param {Field} field1
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return {BasicForm} this
- */
- add : function(){
- this.items.addAll(Array.prototype.slice.call(arguments, 0));
- return this;
+ setValue : function(v){
+ Roo.form.HtmlEditor.superclass.setValue.call(this, v);
+ this.editorcore.pushValue();
},
-
/**
- * Removes a field from the items collection (does NOT remove its markup).
- * @param {Field} field
- * @return {BasicForm} this
+ * update the language in the body - really done by core
+ * @param {String} language - eg. en / ar / zh-CN etc..
*/
- remove : function(field){
- this.items.remove(field);
- return this;
+ updateLanguage : function(lang)
+ {
+ this.language = lang;
+ this.editorcore.language = lang;
+ this.editorcore.updateLanguage();
+
},
-
- /**
- * Looks at the fields in this form, checks them for an id attribute,
- * and calls applyTo on the existing dom element with that id.
- * @return {BasicForm} this
- */
- render : function(){
- this.items.each(function(f){
- if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
- f.applyTo(f.id);
- }
- });
- return this;
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
},
- /**
- * Calls {@link Ext#apply} for all fields in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
- */
- applyToFields : function(o){
- this.items.each(function(f){
- Roo.apply(f, o);
- });
- return this;
+ // doc'ed in Field
+ focus : function(){
+ this.editorcore.focus();
+
},
+
- /**
- * Calls {@link Ext#applyIf} for all field in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
- */
- applyIfToFields : function(o){
- this.items.each(function(f){
- Roo.applyIf(f, o);
- });
- return this;
- }
-});
-
-// back compat
-Roo.BasicForm = Roo.form.BasicForm;
-
-Roo.apply(Roo.form.BasicForm, {
-
- popover : {
-
- padding : 5,
-
- isApplied : false,
-
- isMasked : false,
-
- form : false,
-
- target : false,
-
- intervalID : false,
+ // private
+ onDestroy : function(){
- maskEl : false,
- apply : function()
- {
- if(this.isApplied){
- return;
- }
-
- this.maskEl = {
- top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
- left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
- bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
- right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
- };
-
- this.maskEl.top.enableDisplayMode("block");
- this.maskEl.left.enableDisplayMode("block");
- this.maskEl.bottom.enableDisplayMode("block");
- this.maskEl.right.enableDisplayMode("block");
-
- Roo.get(document.body).on('click', function(){
- this.unmask();
- }, this);
-
- Roo.get(document.body).on('touchstart', function(){
- this.unmask();
- }, this);
-
- this.isApplied = true
- },
- mask : function(form, target)
- {
- this.form = form;
-
- this.target = target;
-
- if(!this.form.errorMask || !target.el){
- return;
- }
-
- var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
-
- var ot = this.target.el.calcOffsetsTo(scrollable);
-
- var scrollTo = ot[1] - this.form.maskOffset;
-
- scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
-
- scrollable.scrollTo('top', scrollTo);
-
- var el = this.target.wrap || this.target.el;
-
- var box = el.getBox();
-
- this.maskEl.top.setStyle('position', 'absolute');
- this.maskEl.top.setStyle('z-index', 10000);
- this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
- this.maskEl.top.setLeft(0);
- this.maskEl.top.setTop(0);
- this.maskEl.top.show();
-
- this.maskEl.left.setStyle('position', 'absolute');
- this.maskEl.left.setStyle('z-index', 10000);
- this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
- this.maskEl.left.setLeft(0);
- this.maskEl.left.setTop(box.y - this.padding);
- this.maskEl.left.show();
-
- this.maskEl.bottom.setStyle('position', 'absolute');
- this.maskEl.bottom.setStyle('z-index', 10000);
- this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
- this.maskEl.bottom.setLeft(0);
- this.maskEl.bottom.setTop(box.bottom + this.padding);
- this.maskEl.bottom.show();
-
- this.maskEl.right.setStyle('position', 'absolute');
- this.maskEl.right.setStyle('z-index', 10000);
- this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
- this.maskEl.right.setLeft(box.right + this.padding);
- this.maskEl.right.setTop(box.y - this.padding);
- this.maskEl.right.show();
-
- this.intervalID = window.setInterval(function() {
- Roo.form.BasicForm.popover.unmask();
- }, 10000);
-
- window.onwheel = function(){ return false;};
-
- (function(){ this.isMasked = true; }).defer(500, this);
+ if(this.rendered){
- },
-
- unmask : function()
- {
- if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
- return;
+ for (var i =0; i < this.toolbars.length;i++) {
+ // fixme - ask toolbars for heights?
+ this.toolbars[i].onDestroy();
}
- this.maskEl.top.setStyle('position', 'absolute');
- this.maskEl.top.setSize(0, 0).setXY([0, 0]);
- this.maskEl.top.hide();
-
- this.maskEl.left.setStyle('position', 'absolute');
- this.maskEl.left.setSize(0, 0).setXY([0, 0]);
- this.maskEl.left.hide();
-
- this.maskEl.bottom.setStyle('position', 'absolute');
- this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
- this.maskEl.bottom.hide();
+ this.wrap.dom.innerHTML = '';
+ this.wrap.remove();
+ }
+ },
- this.maskEl.right.setStyle('position', 'absolute');
- this.maskEl.right.setSize(0, 0).setXY([0, 0]);
- this.maskEl.right.hide();
-
- window.onwheel = function(){ return true;};
-
- if(this.intervalID){
- window.clearInterval(this.intervalID);
- this.intervalID = false;
- }
-
- this.isMasked = false;
-
+ // private
+ onFirstFocus : function(){
+ //Roo.log("onFirstFocus");
+ this.editorcore.onFirstFocus();
+ for (var i =0; i < this.toolbars.length;i++) {
+ this.toolbars[i].onFirstFocus();
}
- }
+ },
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Form
- * @extends Roo.form.BasicForm
- * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Form = function(config){
- var xitems = [];
- if (config.items) {
- xitems = config.items;
- delete config.items;
- }
-
+ // private
+ syncValue : function()
+ {
+ this.editorcore.syncValue();
+ },
- Roo.form.Form.superclass.constructor.call(this, null, config);
- this.url = this.url || this.action;
- if(!this.root){
- this.root = new Roo.form.Layout(Roo.applyIf({
- id: Roo.id()
- }, config));
- }
- this.active = this.root;
- /**
- * Array of all the buttons that have been added to this form via {@link addButton}
- * @type Array
- */
- this.buttons = [];
- this.allItems = [];
- this.addEvents({
- /**
- * @event clientvalidation
- * If the monitorValid config option is true, this event fires repetitively to notify of valid state
- * @param {Form} this
- * @param {Boolean} valid true if the form has passed client-side validation
- */
- clientvalidation: true,
- /**
- * @event rendered
- * Fires when the form is rendered
- * @param {Roo.form.Form} form
- */
- rendered : true
- });
+ pushValue : function()
+ {
+ this.editorcore.pushValue();
+ },
- if (this.progressUrl) {
- // push a hidden field onto the list of fields..
- this.addxtype( {
- xns: Roo.form,
- xtype : 'Hidden',
- name : 'UPLOAD_IDENTIFIER'
- });
- }
-
+ setStylesheets : function(stylesheets)
+ {
+ this.editorcore.setStylesheets(stylesheets);
+ },
- Roo.each(xitems, this.addxtype, this);
+ removeStylesheets : function()
+ {
+ this.editorcore.removeStylesheets();
+ }
+
-};
-
-Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
- /**
- * @cfg {Roo.Button} buttons[] buttons at bottom of form
+ // hide stuff that is not compatible
+ /**
+ * @event blur
+ * @hide
*/
-
/**
- * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+ * @event change
+ * @hide
*/
/**
- * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+ * @event focus
+ * @hide
*/
/**
- * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
+ * @event specialkey
+ * @hide
*/
- buttonAlign:'center',
-
/**
- * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
+ * @cfg {String} fieldClass @hide
*/
- minButtonWidth:75,
-
/**
- * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
- * This property cascades to child containers if not set.
+ * @cfg {String} focusClass @hide
*/
- labelAlign:'left',
-
/**
- * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
- * fires a looping event with that state. This is required to bind buttons to the valid
- * state using the config value formBind:true on the button.
+ * @cfg {String} autoCreate @hide
*/
- monitorValid : false,
-
/**
- * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+ * @cfg {String} inputType @hide
*/
- monitorPoll : 200,
-
/**
- * @cfg {String} progressUrl - Url to return progress data
+ * @cfg {String} invalidClass @hide
*/
-
- progressUrl : false,
/**
- * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
- * sending a formdata with extra parameters - eg uploaded elements.
+ * @cfg {String} invalidText @hide
*/
-
- formData : false,
-
/**
- * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
- * fields are added and the column is closed. If no fields are passed the column remains open
- * until end() is called.
- * @param {Object} config The config to pass to the column
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return Column The column container object
+ * @cfg {String} msgFx @hide
*/
- column : function(c){
- var col = new Roo.form.Column(c);
- this.start(col);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
- }
- return col;
- },
-
/**
- * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
- * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
- * until end() is called.
- * @param {Object} config The config to pass to the fieldset
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return FieldSet The fieldset container object
+ * @cfg {String} validateOnBlur @hide
*/
- fieldset : function(c){
- var fs = new Roo.form.FieldSet(c);
- this.start(fs);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
- }
- return fs;
- },
+});
+
+ /*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+
+ */
- /**
- * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
- * fields are added and the container is closed. If no fields are passed the container remains open
- * until end() is called.
- * @param {Object} config The config to pass to the Layout
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return Layout The container object
- */
- container : function(c){
- var l = new Roo.form.Layout(c);
- this.start(l);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
- }
- return l;
- },
+/**
+ * @class Roo.form.HtmlEditor.ToolbarStandard
+ * Basic Toolbar
- /**
- * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
- * @param {Object} container A Roo.form.Layout or subclass of Layout
- * @return {Form} this
- */
- start : function(c){
- // cascade label info
- Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
- this.active.stack.push(c);
- c.ownerCt = this.active;
- this.active = c;
- return this;
- },
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+ ....
+ toolbars : [
+ new Roo.form.HtmlEditorToolbar1({
+ disable : { fonts: 1 , format: 1, ..., ... , ...],
+ btns : [ .... ]
+ })
+ }
+
+ *
+ * @cfg {Object} disable List of elements to disable..
+ * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
+ *
+ *
+ * NEEDS Extra CSS?
+ * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
+ */
+
+Roo.form.HtmlEditor.ToolbarStandard = function(config)
+{
+
+ Roo.apply(this, config);
+
+ // default disabled, based on 'good practice'..
+ this.disable = this.disable || {};
+ Roo.applyIf(this.disable, {
+ fontSize : true,
+ colors : true,
+ specialElements : true
+ });
+
+
+ //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+ // dont call parent... till later.
+}
+Roo.form.HtmlEditor.ToolbarStandard.prototype = {
+
+ tb: false,
+
+ rendered: false,
+
+ editor : false,
+ editorcore : false,
/**
- * Closes the current open container
- * @return {Form} this
+ * @cfg {Object} disable List of toolbar elements to disable
+
*/
- end : function(){
- if(this.active == this.root){
- return this;
- }
- this.active = this.active.ownerCt;
- return this;
- },
-
+ disable : false,
+
+
+ /**
+ * @cfg {String} createLinkText The default text for the create link prompt
+ */
+ createLinkText : 'Please enter the URL for the link:',
/**
- * Add Roo.form components to the current open container (e.g. column, fieldset, etc.). Fields added via this method
- * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
- * as the label of the field.
- * @param {Field} field1
- * @param {Field} field2 (optional)
- * @param {Field} etc. (optional)
- * @return {Form} this
+ * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
*/
- add : function(){
- this.active.stack.push.apply(this.active.stack, arguments);
- this.allItems.push.apply(this.allItems,arguments);
- var r = [];
- for(var i = 0, a = arguments, len = a.length; i < len; i++) {
- if(a[i].isFormField){
- r.push(a[i]);
- }
- }
- if(r.length > 0){
- Roo.form.Form.superclass.add.apply(this, r);
- }
- return this;
- },
+ defaultLinkValue : 'http:/'+'/',
+
+
+ /**
+ * @cfg {Array} fontFamilies An array of available font families
+ */
+ fontFamilies : [
+ 'Arial',
+ 'Courier New',
+ 'Tahoma',
+ 'Times New Roman',
+ 'Verdana'
+ ],
+ specialChars : [
+ "©",
+ "®",
+ "™",
+ "£" ,
+ // "—",
+ "…",
+ "÷" ,
+ // "á" , ?? a acute?
+ "€" , //Euro
+ // "“" ,
+ // "”" ,
+ // "•" ,
+ "°" // , // degrees
+ // "é" , // e ecute
+ // "ú" , // u ecute?
+ ],
+
+ specialElements : [
+ {
+ text: "Insert Table",
+ xtype: 'MenuItem',
+ xns : Roo.Menu,
+ ihtml : '<table><tr><td>Cell</td></tr></table>'
+
+ },
+ {
+ text: "Insert Image",
+ xtype: 'MenuItem',
+ xns : Roo.Menu,
+ ihtml : '<img src="about:blank"/>'
+
+ }
+
+
+ ],
+ inputElements : [
+ "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
+ "input:submit", "input:button", "select", "textarea", "label" ],
+ formats : [
+ ["p"] ,
+ ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
+ ["pre"],[ "code"],
+ ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
+ ['div'],['span'],
+ ['sup'],['sub']
+ ],
+ cleanStyles : [
+ "font-size"
+ ],
/**
- * Find any element that has been added to a form, using it's ID or name
- * This can include framesets, columns etc. along with regular fields..
- * @param {String} id - id or name to find.
-
- * @return {Element} e - or false if nothing found.
+ * @cfg {String} defaultFont default font to use.
*/
- findbyId : function(id)
- {
- var ret = false;
- if (!id) {
- return ret;
- }
- Roo.each(this.allItems, function(f){
- if (f.id == id || f.name == id ){
- ret = f;
- return false;
- }
- });
- return ret;
- },
-
+ defaultFont: 'tahoma',
+
+ fontSelect : false,
- /**
- * Render this form into the passed container. This should only be called once!
- * @param {String/HTMLElement/Element} container The element this component should be rendered into
- * @return {Form} this
- */
- render : function(ct)
+ formatCombo : false,
+
+ init : function(editor)
{
+ this.editor = editor;
+ this.editorcore = editor.editorcore ? editor.editorcore : editor;
+ var editorcore = this.editorcore;
+ var _t = this;
+ var fid = editorcore.frameId;
+ var etb = this;
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: _t, // was editor...
+ handler:handler||_t.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
+ };
+ }
- ct = Roo.get(ct);
- var o = this.autoCreate || {
- tag: 'form',
- method : this.method || 'POST',
- id : this.id || Roo.id()
- };
- this.initEl(ct.createChild(o));
-
- this.root.render(this.el);
-
-
- this.items.each(function(f){
- f.render('x-form-el-'+f.id);
+
+ var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+ this.tb = tb;
+ // stop form submits
+ tb.el.on('click', function(e){
+ e.preventDefault(); // what does this do?
});
- if(this.buttons.length > 0){
- // tables are required to maintain order and for correct IE layout
- var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
- cls:"x-form-btns x-form-btns-"+this.buttonAlign,
- html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
- }}, null, true);
- var tr = tb.getElementsByTagName('tr')[0];
- for(var i = 0, len = this.buttons.length; i < len; i++) {
- var b = this.buttons[i];
- var td = document.createElement('td');
- td.className = 'x-form-btn-td';
- b.render(tr.appendChild(td));
- }
- }
- if(this.monitorValid){ // initialize after render
- this.startMonitoring();
- }
- this.fireEvent('rendered', this);
- return this;
- },
-
- /**
- * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
- * @param {String/Object} config A string becomes the button text, an object can either be a Button config
- * object or a valid Roo.DomHelper element config
- * @param {Function} handler The function called when the button is clicked
- * @param {Object} scope (optional) The scope of the handler function
- * @return {Roo.Button}
- */
- addButton : function(config, handler, scope){
- var bc = {
- handler: handler,
- scope: scope,
- minWidth: this.minButtonWidth,
- hideParent:true
- };
- if(typeof config == "string"){
- bc.text = config;
- }else{
- Roo.apply(bc, config);
- }
- var btn = new Roo.Button(null, bc);
- this.buttons.push(btn);
- return btn;
- },
-
- /**
- * Adds a series of form elements (using the xtype property as the factory method.
- * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
- * @param {Object} config
- */
-
- addxtype : function()
- {
- var ar = Array.prototype.slice.call(arguments, 0);
- var ret = false;
- for(var i = 0; i < ar.length; i++) {
- if (!ar[i]) {
- continue; // skip -- if this happends something invalid got sent, we
- // should ignore it, as basically that interface element will not show up
- // and that should be pretty obvious!!
- }
+ if(!this.disable.font) { // && !Roo.isSafari){
+ /* why no safari for fonts
+ editor.fontSelect = tb.el.createChild({
+ tag:'select',
+ tabIndex: -1,
+ cls:'x-font-select',
+ html: this.createFontOptions()
+ });
- if (Roo.form[ar[i].xtype]) {
- ar[i].form = this;
- var fe = Roo.factory(ar[i], Roo.form);
- if (!ret) {
- ret = fe;
- }
- fe.form = this;
- if (fe.store) {
- fe.store.form = this;
- }
- if (fe.isLayout) {
-
- this.start(fe);
- this.allItems.push(fe);
- if (fe.items && fe.addxtype) {
- fe.addxtype.apply(fe, fe.items);
- delete fe.items;
- }
- this.end();
- continue;
- }
-
-
-
- this.add(fe);
- // console.log('adding ' + ar[i].xtype);
- }
- if (ar[i].xtype == 'Button') {
- //console.log('adding button');
- //console.log(ar[i]);
- this.addButton(ar[i]);
- this.allItems.push(fe);
- continue;
- }
+ editor.fontSelect.on('change', function(){
+ var font = editor.fontSelect.dom.value;
+ editor.relayCmd('fontname', font);
+ editor.deferFocus();
+ }, editor);
- if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
- alert('end is not supported on xtype any more, use items');
- // this.end();
- // //console.log('adding end');
- }
+ tb.add(
+ editor.fontSelect.dom,
+ '-'
+ );
+ */
- }
- return ret;
- },
-
- /**
- * Starts monitoring of the valid state of this form. Usually this is done by passing the config
- * option "monitorValid"
- */
- startMonitoring : function(){
- if(!this.bound){
- this.bound = true;
- Roo.TaskMgr.start({
- run : this.bindHandler,
- interval : this.monitorPoll || 200,
- scope: this
- });
- }
- },
-
- /**
- * Stops monitoring of the valid state of this form
- */
- stopMonitoring : function(){
- this.bound = false;
- },
+ };
+ if(!this.disable.formats){
+ this.formatCombo = new Roo.form.ComboBox({
+ store: new Roo.data.SimpleStore({
+ id : 'tag',
+ fields: ['tag'],
+ data : this.formats // from states.js
+ }),
+ blockFocus : true,
+ name : '',
+ //autoCreate : {tag: "div", size: "20"},
+ displayField:'tag',
+ typeAhead: false,
+ mode: 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Add tag',
+ selectOnFocus:true,
+ width:135,
+ listeners : {
+ 'select': function(c, r, i) {
+ editorcore.insertTag(r.get('tag'));
+ editor.focus();
+ }
+ }
- // private
- bindHandler : function(){
- if(!this.bound){
- return false; // stops binding
- }
- var valid = true;
- this.items.each(function(f){
- if(!f.isValid(true)){
- valid = false;
- return false;
- }
- });
- for(var i = 0, len = this.buttons.length; i < len; i++){
- var btn = this.buttons[i];
- if(btn.formBind === true && btn.disabled === valid){
- btn.setDisabled(!valid);
- }
+ });
+ tb.addField(this.formatCombo);
+
}
- this.fireEvent('clientvalidation', this, valid);
- }
-
-
-
-
-
-
-
-
-});
-
-
-// back compat
-Roo.Form = Roo.form.Form;
-/*
- * Based on:
- * Ext JS Library 1.1.1
+
+ if(!this.disable.format){
+ tb.add(
+ btn('bold'),
+ btn('italic'),
+ btn('underline'),
+ btn('strikethrough')
+ );
+ };
+ if(!this.disable.fontSize){
+ tb.add(
+ '-',
+
+
+ btn('increasefontsize', false, editorcore.adjustFont),
+ btn('decreasefontsize', false, editorcore.adjustFont)
+ );
+ };
+
+
+ if(!this.disable.colors){
+ tb.add(
+ '-', {
+ id:editorcore.frameId +'-forecolor',
+ cls:'x-btn-icon x-edit-forecolor',
+ clickEvent:'mousedown',
+ tooltip: this.buttonTips['forecolor'] || undefined,
+ tabIndex:-1,
+ menu : new Roo.menu.ColorMenu({
+ allowReselect: true,
+ focus: Roo.emptyFn,
+ value:'000000',
+ plain:true,
+ selectHandler: function(cp, color){
+ editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
+ editor.deferFocus();
+ },
+ scope: editorcore,
+ clickEvent:'mousedown'
+ })
+ }, {
+ id:editorcore.frameId +'backcolor',
+ cls:'x-btn-icon x-edit-backcolor',
+ clickEvent:'mousedown',
+ tooltip: this.buttonTips['backcolor'] || undefined,
+ tabIndex:-1,
+ menu : new Roo.menu.ColorMenu({
+ focus: Roo.emptyFn,
+ value:'FFFFFF',
+ plain:true,
+ allowReselect: true,
+ selectHandler: function(cp, color){
+ if(Roo.isGecko){
+ editorcore.execCmd('useCSS', false);
+ editorcore.execCmd('hilitecolor', color);
+ editorcore.execCmd('useCSS', true);
+ editor.deferFocus();
+ }else{
+ editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
+ Roo.isSafari || Roo.isIE ? '#'+color : color);
+ editor.deferFocus();
+ }
+ },
+ scope:editorcore,
+ clickEvent:'mousedown'
+ })
+ }
+ );
+ };
+ // now add all the items...
+
+
+ if(!this.disable.alignments){
+ tb.add(
+ '-',
+ btn('justifyleft'),
+ btn('justifycenter'),
+ btn('justifyright')
+ );
+ };
+
+ //if(!Roo.isSafari){
+ if(!this.disable.links){
+ tb.add(
+ '-',
+ btn('createlink', false, this.createLink) /// MOVE TO HERE?!!?!?!?!
+ );
+ };
+
+ if(!this.disable.lists){
+ tb.add(
+ '-',
+ btn('insertorderedlist'),
+ btn('insertunorderedlist')
+ );
+ }
+ if(!this.disable.sourceEdit){
+ tb.add(
+ '-',
+ btn('sourceedit', true, function(btn){
+ this.toggleSourceEdit(btn.pressed);
+ })
+ );
+ }
+ //}
+
+ var smenu = { };
+ // special menu.. - needs to be tidied up..
+ if (!this.disable.special) {
+ smenu = {
+ text: "©",
+ cls: 'x-edit-none',
+
+ menu : {
+ items : []
+ }
+ };
+ for (var i =0; i < this.specialChars.length; i++) {
+ smenu.menu.items.push({
+
+ html: this.specialChars[i],
+ handler: function(a,b) {
+ editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
+ //editor.insertAtCursor(a.html);
+
+ },
+ tabIndex:-1
+ });
+ }
+
+
+ tb.add(smenu);
+
+
+ }
+
+ var cmenu = { };
+ if (!this.disable.cleanStyles) {
+ cmenu = {
+ cls: 'x-btn-icon x-btn-clear',
+
+ menu : {
+ items : []
+ }
+ };
+ for (var i =0; i < this.cleanStyles.length; i++) {
+ cmenu.menu.items.push({
+ actiontype : this.cleanStyles[i],
+ html: 'Remove ' + this.cleanStyles[i],
+ handler: function(a,b) {
+// Roo.log(a);
+// Roo.log(b);
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[style]').each(function(s) {
+ s.dom.style.removeProperty(a.actiontype);
+ });
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+ }
+ cmenu.menu.items.push({
+ actiontype : 'tablewidths',
+ html: 'Remove Table Widths',
+ handler: function(a,b) {
+ editorcore.cleanTableWidths();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+ cmenu.menu.items.push({
+ actiontype : 'word',
+ html: 'Remove MS Word Formating',
+ handler: function(a,b) {
+ editorcore.cleanWord();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+
+ cmenu.menu.items.push({
+ actiontype : 'all',
+ html: 'Remove All Styles',
+ handler: function(a,b) {
+
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[style]').each(function(s) {
+ s.dom.removeAttribute('style');
+ });
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+
+ cmenu.menu.items.push({
+ actiontype : 'all',
+ html: 'Remove All CSS Classes',
+ handler: function(a,b) {
+
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[class]').each(function(s) {
+ s.dom.removeAttribute('class');
+ });
+ editorcore.cleanWord();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+
+ cmenu.menu.items.push({
+ actiontype : 'tidy',
+ html: 'Tidy HTML Source',
+ handler: function(a,b) {
+ new Roo.htmleditor.Tidy(editorcore.doc.body);
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+
+
+ tb.add(cmenu);
+ }
+
+ if (!this.disable.specialElements) {
+ var semenu = {
+ text: "Other;",
+ cls: 'x-edit-none',
+ menu : {
+ items : []
+ }
+ };
+ for (var i =0; i < this.specialElements.length; i++) {
+ semenu.menu.items.push(
+ Roo.apply({
+ handler: function(a,b) {
+ editor.insertAtCursor(this.ihtml);
+ }
+ }, this.specialElements[i])
+ );
+
+ }
+
+ tb.add(semenu);
+
+
+ }
+
+
+ if (this.btns) {
+ for(var i =0; i< this.btns.length;i++) {
+ var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
+ b.cls = 'x-edit-none';
+
+ if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
+ b.cls += ' x-init-enable';
+ }
+
+ b.scope = editorcore;
+ tb.add(b);
+ }
+
+ }
+
+
+
+ // disable everything...
+
+ this.tb.items.each(function(item){
+
+ if(
+ item.id != editorcore.frameId+ '-sourceedit' &&
+ (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
+ ){
+
+ item.disable();
+ }
+ });
+ this.rendered = true;
+
+ // the all the btns;
+ editor.on('editorevent', this.updateToolbar, this);
+ // other toolbars need to implement this..
+ //editor.on('editmodechange', this.updateToolbar, this);
+ },
+
+
+ relayBtnCmd : function(btn) {
+ this.editorcore.relayCmd(btn.cmd);
+ },
+ // private used internally
+ createLink : function(){
+ //Roo.log("create link?");
+ var ec = this.editorcore;
+ var ar = ec.getAllAncestors();
+ var n = false;
+ for(var i = 0;i< ar.length;i++) {
+ if (ar[i] && ar[i].nodeName == 'A') {
+ n = ar[i];
+ break;
+ }
+ }
+
+ (function() {
+
+ Roo.MessageBox.show({
+ title : "Add / Edit Link URL",
+ msg : "Enter the url for the link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, url){
+ if (btn != 'ok') {
+ return;
+ }
+ if(url && url != 'http:/'+'/'){
+ if (n) {
+ n.setAttribute('href', url);
+ } else {
+ ec.relayCmd('createlink', url);
+ }
+ }
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : n ? n.getAttribute('href') : ''
+ });
+
+
+ }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
+
+ },
+
+
+ /**
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
+ */
+ updateToolbar: function(){
+
+ if(!this.editorcore.activated){
+ this.editor.onFirstFocus();
+ return;
+ }
+
+ var btns = this.tb.items.map,
+ doc = this.editorcore.doc,
+ frameId = this.editorcore.frameId;
+
+ if(!this.disable.font && !Roo.isSafari){
+ /*
+ var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
+ if(name != this.fontSelect.dom.value){
+ this.fontSelect.dom.value = name;
+ }
+ */
+ }
+ if(!this.disable.format){
+ btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
+ btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
+ btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+ btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
+ }
+ if(!this.disable.alignments){
+ btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
+ btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
+ btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
+ }
+ if(!Roo.isSafari && !this.disable.lists){
+ btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
+ btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
+ }
+
+ var ans = this.editorcore.getAllAncestors();
+ if (this.formatCombo) {
+
+
+ var store = this.formatCombo.store;
+ this.formatCombo.setValue("");
+ for (var i =0; i < ans.length;i++) {
+ if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
+ // select it..
+ this.formatCombo.setValue(ans[i].tagName.toLowerCase());
+ break;
+ }
+ }
+ }
+
+
+
+ // hides menus... - so this cant be on a menu...
+ Roo.menu.MenuMgr.hideAll();
+
+ //this.editorsyncValue();
+ },
+
+
+ createFontOptions : function(){
+ var buf = [], fs = this.fontFamilies, ff, lc;
+
+
+
+ for(var i = 0, len = fs.length; i< len; i++){
+ ff = fs[i];
+ lc = ff.toLowerCase();
+ buf.push(
+ '<option value="',lc,'" style="font-family:',ff,';"',
+ (this.defaultFont == lc ? ' selected="true">' : '>'),
+ ff,
+ '</option>'
+ );
+ }
+ return buf.join('');
+ },
+
+ toggleSourceEdit : function(sourceEditMode){
+
+ Roo.log("toolbar toogle");
+ if(sourceEditMode === undefined){
+ sourceEditMode = !this.sourceEditMode;
+ }
+ this.sourceEditMode = sourceEditMode === true;
+ var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
+ // just toggle the button?
+ if(btn.pressed !== this.sourceEditMode){
+ btn.toggle(this.sourceEditMode);
+ return;
+ }
+
+ if(sourceEditMode){
+ Roo.log("disabling buttons");
+ this.tb.items.each(function(item){
+ if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
+ item.disable();
+ }
+ });
+
+ }else{
+ Roo.log("enabling buttons");
+ if(this.editorcore.initialized){
+ this.tb.items.each(function(item){
+ item.enable();
+ });
+ // initialize 'blocks'
+ Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+ Roo.htmleditor.Block.factory(e).updateElement(e);
+ },this);
+
+ }
+
+ }
+ Roo.log("calling toggole on editor");
+ // tell the editor that it's been pressed..
+ this.editor.toggleSourceEdit(sourceEditMode);
+
+ },
+ /**
+ * Object collection of toolbar tooltips for the buttons in the editor. The key
+ * is the command id associated with that button and the value is a valid QuickTips object.
+ * For example:
+<pre><code>
+{
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ ...
+</code></pre>
+ * @type Object
+ */
+ buttonTips : {
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ underline : {
+ title: 'Underline (Ctrl+U)',
+ text: 'Underline the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ strikethrough : {
+ title: 'Strikethrough',
+ text: 'Strikethrough the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ increasefontsize : {
+ title: 'Grow Text',
+ text: 'Increase the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ decreasefontsize : {
+ title: 'Shrink Text',
+ text: 'Decrease the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ backcolor : {
+ title: 'Text Highlight Color',
+ text: 'Change the background color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ forecolor : {
+ title: 'Font Color',
+ text: 'Change the color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyleft : {
+ title: 'Align Text Left',
+ text: 'Align text to the left.',
+ cls: 'x-html-editor-tip'
+ },
+ justifycenter : {
+ title: 'Center Text',
+ text: 'Center text in the editor.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyright : {
+ title: 'Align Text Right',
+ text: 'Align text to the right.',
+ cls: 'x-html-editor-tip'
+ },
+ insertunorderedlist : {
+ title: 'Bullet List',
+ text: 'Start a bulleted list.',
+ cls: 'x-html-editor-tip'
+ },
+ insertorderedlist : {
+ title: 'Numbered List',
+ text: 'Start a numbered list.',
+ cls: 'x-html-editor-tip'
+ },
+ createlink : {
+ title: 'Hyperlink',
+ text: 'Make the selected text a hyperlink.',
+ cls: 'x-html-editor-tip'
+ },
+ sourceedit : {
+ title: 'Source Edit',
+ text: 'Switch to source editing mode.',
+ cls: 'x-html-editor-tip'
+ }
+ },
+ // private
+ onDestroy : function(){
+ if(this.rendered){
+
+ this.tb.items.each(function(item){
+ if(item.menu){
+ item.menu.removeAll();
+ if(item.menu.el){
+ item.menu.el.destroy();
+ }
+ }
+ item.destroy();
+ });
+
+ }
+ },
+ onFirstFocus: function() {
+ this.tb.items.each(function(item){
+ item.enable();
+ });
+ }
+};
+
+
+
+
+// <script type="text/javascript">
+/*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+
+ */
+
+
+/**
+ * @class Roo.form.HtmlEditor.ToolbarContext
+ * Context Toolbar
+ *
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+ ....
+ toolbars : [
+ { xtype: 'ToolbarStandard', styles : {} }
+ { xtype: 'ToolbarContext', disable : {} }
+ ]
+})
+
+
+ *
+ * @config : {Object} disable List of elements to disable.. (not done yet.)
+ * @config : {Object} styles Map of styles available.
+ *
+ */
+
+Roo.form.HtmlEditor.ToolbarContext = function(config)
+{
+
+ Roo.apply(this, config);
+ //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+ // dont call parent... till later.
+ this.styles = this.styles || {};
+}
+
+
+
+Roo.form.HtmlEditor.ToolbarContext.types = {
+ 'IMG' : [
+ {
+ name : 'width',
+ title: "Width",
+ width: 40
+ },
+ {
+ name : 'height',
+ title: "Height",
+ width: 40
+ },
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
+
+ },
+ {
+ name : 'border',
+ title: "Border",
+ width: 40
+ },
+ {
+ name : 'alt',
+ title: "Alt",
+ width: 120
+ },
+ {
+ name : 'src',
+ title: "Src",
+ width: 220
+ }
+
+ ],
+
+ 'FIGURE' : [
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
+ }
+ ],
+ 'A' : [
+ {
+ name : 'name',
+ title: "Name",
+ width: 50
+ },
+ {
+ name : 'target',
+ title: "Target",
+ width: 120
+ },
+ {
+ name : 'href',
+ title: "Href",
+ width: 220
+ } // border?
+
+ ],
+
+ 'INPUT' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'value',
+ title: "Value",
+ width: 120
+ },
+ {
+ name : 'width',
+ title: "Width",
+ width: 40
+ }
+ ],
+ 'LABEL' : [
+ {
+ name : 'for',
+ title: "For",
+ width: 120
+ }
+ ],
+ 'TEXTAREA' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'rows',
+ title: "Rows",
+ width: 20
+ },
+ {
+ name : 'cols',
+ title: "Cols",
+ width: 20
+ }
+ ],
+ 'SELECT' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'selectoptions',
+ title: "Options",
+ width: 200
+ }
+ ],
+
+ // should we really allow this??
+ // should this just be
+ 'BODY' : [
+
+ {
+ name : 'title',
+ title: "Title",
+ width: 200,
+ disabled : true
+ }
+ ],
+
+ '*' : [
+ // empty.
+ ]
+
+};
+
+// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
+Roo.form.HtmlEditor.ToolbarContext.stores = false;
+
+Roo.form.HtmlEditor.ToolbarContext.options = {
+ 'font-family' : [
+ [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
+ [ 'Courier New', 'Courier New'],
+ [ 'Tahoma', 'Tahoma'],
+ [ 'Times New Roman,serif', 'Times'],
+ [ 'Verdana','Verdana' ]
+ ]
+};
+
+// fixme - these need to be configurable..
+
+
+//Roo.form.HtmlEditor.ToolbarContext.types
+
+
+Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
+
+ tb: false,
+
+ rendered: false,
+
+ editor : false,
+ editorcore : false,
+ /**
+ * @cfg {Object} disable List of toolbar elements to disable
+
+ */
+ disable : false,
+ /**
+ * @cfg {Object} styles List of styles
+ * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
+ *
+ * These must be defined in the page, so they get rendered correctly..
+ * .headline { }
+ * TD.underline { }
+ *
+ */
+ styles : false,
+
+ options: false,
+
+ toolbars : false,
+
+ init : function(editor)
+ {
+ this.editor = editor;
+ this.editorcore = editor.editorcore ? editor.editorcore : editor;
+ var editorcore = this.editorcore;
+
+ var fid = editorcore.frameId;
+ var etb = this;
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: editorcore, // was editor...
+ handler:handler||editorcore.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
+ };
+ }
+ // create a new element.
+ var wdiv = editor.wrap.createChild({
+ tag: 'div'
+ }, editor.wrap.dom.firstChild.nextSibling, true);
+
+ // can we do this more than once??
+
+ // stop form submits
+
+
+ // disable everything...
+ var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+ this.toolbars = {};
+ // block toolbars are built in updateToolbar when needed.
+ for (var i in ty) {
+
+ this.toolbars[i] = this.buildToolbar(ty[i],i);
+ }
+ this.tb = this.toolbars.BODY;
+ this.tb.el.show();
+ this.buildFooter();
+ this.footer.show();
+ editor.on('hide', function( ) { this.footer.hide() }, this);
+ editor.on('show', function( ) { this.footer.show() }, this);
+
+
+ this.rendered = true;
+
+ // the all the btns;
+ editor.on('editorevent', this.updateToolbar, this);
+ // other toolbars need to implement this..
+ //editor.on('editmodechange', this.updateToolbar, this);
+ },
+
+
+
+ /**
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
+ *
+ * Note you can force an update by calling on('editorevent', scope, false)
+ */
+ updateToolbar: function(editor ,ev, sel)
+ {
+
+ if (ev) {
+ ev.stopEvent(); // se if we can stop this looping with mutiple events.
+ }
+
+ //Roo.log(ev);
+ // capture mouse up - this is handy for selecting images..
+ // perhaps should go somewhere else...
+ if(!this.editorcore.activated){
+ this.editor.onFirstFocus();
+ return;
+ }
+ //Roo.log(ev ? ev.target : 'NOTARGET');
+
+
+ // http://developer.yahoo.com/yui/docs/simple-editor.js.html
+ // selectNode - might want to handle IE?
+
+
+
+ if (ev &&
+ (ev.type == 'mouseup' || ev.type == 'click' ) &&
+ ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
+ // they have click on an image...
+ // let's see if we can change the selection...
+ sel = ev.target;
+
+ // this triggers looping?
+ //this.editorcore.selectNode(sel);
+
+ }
+
+ // this forces an id..
+ Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+ e.classList.remove('roo-ed-selection');
+ });
+ //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
+ //Roo.get(node).addClass('roo-ed-selection');
+
+ //var updateFooter = sel ? false : true;
+
+
+ var ans = this.editorcore.getAllAncestors();
+
+ // pick
+ var ty = Roo.form.HtmlEditor.ToolbarContext.types;
+
+ if (!sel) {
+ sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
+ sel = sel ? sel : this.editorcore.doc.body;
+ sel = sel.tagName.length ? sel : this.editorcore.doc.body;
+
+ }
+
+ var tn = sel.tagName.toUpperCase();
+ var lastSel = this.tb.selectedNode;
+ this.tb.selectedNode = sel;
+ var left_label = tn;
+
+ // ok see if we are editing a block?
+
+ var db = false;
+ // you are not actually selecting the block.
+ if (sel && sel.hasAttribute('data-block')) {
+ db = sel;
+ } else if (sel && sel.closest('[data-block]')) {
+
+ db = sel.closest('[data-block]');
+ //var cepar = sel.closest('[contenteditable=true]');
+ //if (db && cepar && cepar.tagName != 'BODY') {
+ // db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+ //}
+ }
+
+
+ var block = false;
+ //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
+ if (db && this.editorcore.enableBlocks) {
+ block = Roo.htmleditor.Block.factory(db);
+
+
+ if (block) {
+ db.className = (
+ db.classList.length > 0 ? db.className + ' ' : ''
+ ) + 'roo-ed-selection';
+
+ // since we removed it earlier... its not there..
+ tn = 'BLOCK.' + db.getAttribute('data-block');
+
+ //this.editorcore.selectNode(db);
+ if (typeof(this.toolbars[tn]) == 'undefined') {
+ this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
+ }
+ this.toolbars[tn].selectedNode = db;
+ left_label = block.friendly_name;
+ ans = this.editorcore.getAllAncestors();
+ }
+
+
+
+ }
+
+
+ if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
+ return; // no change?
+ }
+
+
+
+ this.tb.el.hide();
+ ///console.log("show: " + tn);
+ this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
+
+ this.tb.el.show();
+ // update name
+ this.tb.items.first().el.innerHTML = left_label + ': ';
+
+
+ // update attributes
+ if (block && this.tb.fields) {
+
+ this.tb.fields.each(function(e) {
+ e.setValue(block[e.name]);
+ });
+
+
+ } else if (this.tb.fields && this.tb.selectedNode) {
+ this.tb.fields.each( function(e) {
+ if (e.stylename) {
+ e.setValue(this.tb.selectedNode.style[e.stylename]);
+ return;
+ }
+ e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
+ }, this);
+ this.updateToolbarStyles(this.tb.selectedNode);
+ }
+
+
+
+ Roo.menu.MenuMgr.hideAll();
+
+
+
+
+ // update the footer
+ //
+ this.updateFooter(ans);
+
+ },
+
+ updateToolbarStyles : function(sel)
+ {
+ var hasStyles = false;
+ for(var i in this.styles) {
+ hasStyles = true;
+ break;
+ }
+
+ // update styles
+ if (hasStyles && this.tb.hasStyles) {
+ var st = this.tb.fields.item(0);
+
+ st.store.removeAll();
+ var cn = sel.className.split(/\s+/);
+
+ var avs = [];
+ if (this.styles['*']) {
+
+ Roo.each(this.styles['*'], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
+ }
+ if (this.styles[tn]) {
+ Roo.each(this.styles[tn], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
+ }
+
+ st.store.loadData(avs);
+ st.collapse();
+ st.setValue(cn);
+ }
+ },
+
+
+ updateFooter : function(ans)
+ {
+ var html = '';
+ if (ans === false) {
+ this.footDisp.dom.innerHTML = '';
+ return;
+ }
+
+ this.footerEls = ans.reverse();
+ Roo.each(this.footerEls, function(a,i) {
+ if (!a) { return; }
+ html += html.length ? ' > ' : '';
+
+ html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
+
+ });
+
+ //
+ var sz = this.footDisp.up('td').getSize();
+ this.footDisp.dom.style.width = (sz.width -10) + 'px';
+ this.footDisp.dom.style.marginLeft = '5px';
+
+ this.footDisp.dom.style.overflow = 'hidden';
+
+ this.footDisp.dom.innerHTML = html;
+
+
+ },
+
+
+ // private
+ onDestroy : function(){
+ if(this.rendered){
+
+ this.tb.items.each(function(item){
+ if(item.menu){
+ item.menu.removeAll();
+ if(item.menu.el){
+ item.menu.el.destroy();
+ }
+ }
+ item.destroy();
+ });
+
+ }
+ },
+ onFirstFocus: function() {
+ // need to do this for all the toolbars..
+ this.tb.items.each(function(item){
+ item.enable();
+ });
+ },
+ buildToolbar: function(tlist, nm, friendly_name, block)
+ {
+ var editor = this.editor;
+ var editorcore = this.editorcore;
+ // create a new element.
+ var wdiv = editor.wrap.createChild({
+ tag: 'div'
+ }, editor.wrap.dom.firstChild.nextSibling, true);
+
+
+ var tb = new Roo.Toolbar(wdiv);
+ ///this.tb = tb; // << this sets the active toolbar..
+ if (tlist === false && block) {
+ tlist = block.contextMenu(this);
+ }
+
+ tb.hasStyles = false;
+ tb.name = nm;
+
+ tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
+
+ var styles = Array.from(this.styles);
+
+
+ // styles...
+ if (styles && styles.length) {
+ tb.hasStyles = true;
+ // this needs a multi-select checkbox...
+ tb.addField( new Roo.form.ComboBox({
+ store: new Roo.data.SimpleStore({
+ id : 'val',
+ fields: ['val', 'selected'],
+ data : []
+ }),
+ name : '-roo-edit-className',
+ attrname : 'className',
+ displayField: 'val',
+ typeAhead: false,
+ mode: 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Select Style',
+ selectOnFocus:true,
+ width: 130,
+ listeners : {
+ 'select': function(c, r, i) {
+ // initial support only for on class per el..
+ tb.selectedNode.className = r ? r.get('val') : '';
+ editorcore.syncValue();
+ }
+ }
+
+ }));
+ }
+
+ var tbc = Roo.form.HtmlEditor.ToolbarContext;
+
+
+ for (var i = 0; i < tlist.length; i++) {
+
+ // newer versions will use xtype cfg to create menus.
+ if (typeof(tlist[i].xtype) != 'undefined') {
+
+ tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
+
+
+ continue;
+ }
+
+ var item = tlist[i];
+ tb.add(item.title + ": ");
+
+
+ //optname == used so you can configure the options available..
+ var opts = item.opts ? item.opts : false;
+ if (item.optname) { // use the b
+ opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
+
+ }
+
+ if (opts) {
+ // opts == pulldown..
+ tb.addField( new Roo.form.ComboBox({
+ store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
+ id : 'val',
+ fields: ['val', 'display'],
+ data : opts
+ }),
+ name : '-roo-edit-' + tlist[i].name,
+
+ attrname : tlist[i].name,
+ stylename : item.style ? item.style : false,
+
+ displayField: item.displayField ? item.displayField : 'val',
+ valueField : 'val',
+ typeAhead: false,
+ mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Select',
+ selectOnFocus:true,
+ width: item.width ? item.width : 130,
+ listeners : {
+ 'select': function(c, r, i) {
+
+
+ if (c.stylename) {
+ tb.selectedNode.style[c.stylename] = r.get('val');
+ editorcore.syncValue();
+ return;
+ }
+ if (r === false) {
+ tb.selectedNode.removeAttribute(c.attrname);
+ editorcore.syncValue();
+ return;
+ }
+ tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+ editorcore.syncValue();
+ }
+ }
+
+ }));
+ continue;
+
+
+ /*
+ tb.addField( new Roo.form.TextField({
+ name: i,
+ width: 100,
+ //allowBlank:false,
+ value: ''
+ }));
+ continue;
+ */
+ }
+ tb.addField( new Roo.form.TextField({
+ name: '-roo-edit-' + tlist[i].name,
+ attrname : tlist[i].name,
+
+ width: item.width,
+ //allowBlank:true,
+ value: '',
+ listeners: {
+ 'change' : function(f, nv, ov) {
+
+
+ tb.selectedNode.setAttribute(f.attrname, nv);
+ editorcore.syncValue();
+ }
+ }
+ }));
+
+ }
+
+ var _this = this;
+ var show_delete = !block || block.deleteTitle !== false;
+ if(nm == 'BODY'){
+ show_delete = false;
+ tb.addSeparator();
+
+ tb.addButton( {
+ text: 'Stylesheets',
+
+ listeners : {
+ click : function ()
+ {
+ _this.editor.fireEvent('stylesheetsclick', _this.editor);
+ }
+ }
+ });
+ }
+
+ tb.addFill();
+ if (show_delete) {
+ tb.addButton({
+ text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+
+ listeners : {
+ click : function ()
+ {
+ var sn = tb.selectedNode;
+ if (block) {
+ sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
+
+ }
+ if (!sn) {
+ return;
+ }
+ var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+ if (sn.hasAttribute('data-block')) {
+ stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
+ sn.parentNode.removeChild(sn);
+
+ } else if (sn && sn.tagName != 'BODY') {
+ // remove and keep parents.
+ a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+ a.replaceTag(sn);
+ }
+
+
+ var range = editorcore.createRange();
+
+ range.setStart(stn,0);
+ range.setEnd(stn,0);
+ var selection = editorcore.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+
+ //_this.updateToolbar(null, null, pn);
+ _this.updateToolbar(null, null, null);
+ _this.updateFooter(false);
+
+ }
+ }
+
+
+
+
+ });
+ }
+
+ tb.el.on('click', function(e){
+ e.preventDefault(); // what does this do?
+ });
+ tb.el.setVisibilityMode( Roo.Element.DISPLAY);
+ tb.el.hide();
+
+ // dont need to disable them... as they will get hidden
+ return tb;
+
+
+ },
+ buildFooter : function()
+ {
+
+ var fel = this.editor.wrap.createChild();
+ this.footer = new Roo.Toolbar(fel);
+ // toolbar has scrolly on left / right?
+ var footDisp= new Roo.Toolbar.Fill();
+ var _t = this;
+ this.footer.add(
+ {
+ text : '<',
+ xtype: 'Button',
+ handler : function() {
+ _t.footDisp.scrollTo('left',0,true)
+ }
+ }
+ );
+ this.footer.add( footDisp );
+ this.footer.add(
+ {
+ text : '>',
+ xtype: 'Button',
+ handler : function() {
+ // no animation..
+ _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+ }
+ }
+ );
+ var fel = Roo.get(footDisp.el);
+ fel.addClass('x-editor-context');
+ this.footDispWrap = fel;
+ this.footDispWrap.overflow = 'hidden';
+
+ this.footDisp = fel.createChild();
+ this.footDispWrap.on('click', this.onContextClick, this)
+
+
+ },
+ // when the footer contect changes
+ onContextClick : function (ev,dom)
+ {
+ ev.preventDefault();
+ var cn = dom.className;
+ //Roo.log(cn);
+ if (!cn.match(/x-ed-loc-/)) {
+ return;
+ }
+ var n = cn.split('-').pop();
+ var ans = this.footerEls;
+ var sel = ans[n];
+
+ this.editorcore.selectNode(sel);
+
+
+ this.updateToolbar(null, null, sel);
+
+
+ }
+
+
+
+
+
+});
+
+
+
+
+
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.BasicForm
+ * @extends Roo.util.Observable
+ * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The form element or its id
+ * @param {Object} config Configuration options
+ */
+Roo.form.BasicForm = function(el, config){
+ this.allItems = [];
+ this.childForms = [];
+ Roo.apply(this, config);
+ /*
+ * The Roo.form.Field items in this form.
+ * @type MixedCollection
+ */
+
+
+ this.items = new Roo.util.MixedCollection(false, function(o){
+ return o.id || (o.id = Roo.id());
+ });
+ this.addEvents({
+ /**
+ * @event beforeaction
+ * Fires before any action is performed. Return false to cancel the action.
+ * @param {Form} this
+ * @param {Action} action The action to be performed
+ */
+ beforeaction: true,
+ /**
+ * @event actionfailed
+ * Fires when an action fails.
+ * @param {Form} this
+ * @param {Action} action The action that failed
+ */
+ actionfailed : true,
+ /**
+ * @event actioncomplete
+ * Fires when an action is completed.
+ * @param {Form} this
+ * @param {Action} action The action that completed
+ */
+ actioncomplete : true
+ });
+ if(el){
+ this.initEl(el);
+ }
+ Roo.form.BasicForm.superclass.constructor.call(this);
+
+ Roo.form.BasicForm.popover.apply();
+};
+
+Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
+ /**
+ * @cfg {String} method
+ * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
+ */
+ /**
+ * @cfg {DataReader} reader
+ * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
+ * This is optional as there is built-in support for processing JSON.
+ */
+ /**
+ * @cfg {DataReader} errorReader
+ * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
+ * This is completely optional as there is built-in support for processing JSON.
+ */
+ /**
+ * @cfg {String} url
+ * The URL to use for form actions if one isn't supplied in the action options.
+ */
+ /**
+ * @cfg {Boolean} fileUpload
+ * Set to true if this form is a file upload.
+ */
+
+ /**
+ * @cfg {Object} baseParams
+ * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+ */
+ /**
+
+ /**
+ * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ */
+ timeout: 30,
+
+ // private
+ activeAction : null,
+
+ /**
+ * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
+ * or setValues() data instead of when the form was first created.
+ */
+ trackResetOnLoad : false,
+
+
+ /**
+ * childForms - used for multi-tab forms
+ * @type {Array}
+ */
+ childForms : false,
+
+ /**
+ * allItems - full list of fields.
+ * @type {Array}
+ */
+ allItems : false,
+
+ /**
+ * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
+ * element by passing it or its id or mask the form itself by passing in true.
+ * @type Mixed
+ */
+ waitMsgTarget : false,
+
+ /**
+ * @type Boolean
+ */
+ disableMask : false,
+
+ /**
+ * @cfg {Boolean} errorMask (true|false) default false
+ */
+ errorMask : false,
+
+ /**
+ * @cfg {Number} maskOffset Default 100
+ */
+ maskOffset : 100,
+
+ // private
+ initEl : function(el){
+ this.el = Roo.get(el);
+ this.id = this.el.id || Roo.id();
+ this.el.on('submit', this.onSubmit, this);
+ this.el.addClass('x-form');
+ },
+
+ // private
+ onSubmit : function(e){
+ e.stopEvent();
+ },
+
+ /**
+ * Returns true if client-side validation on the form is successful.
+ * @return Boolean
+ */
+ isValid : function(){
+ var valid = true;
+ var target = false;
+ this.items.each(function(f){
+ if(f.validate()){
+ return;
+ }
+
+ valid = false;
+
+ if(!target && f.el.isVisible(true)){
+ target = f;
+ }
+ });
+
+ if(this.errorMask && !valid){
+ Roo.form.BasicForm.popover.mask(this, target);
+ }
+
+ return valid;
+ },
+ /**
+ * Returns array of invalid form fields.
+ * @return Array
+ */
+
+ invalidFields : function()
+ {
+ var ret = [];
+ this.items.each(function(f){
+ if(f.validate()){
+ return;
+ }
+ ret.push(f);
+
+ });
+
+ return ret;
+ },
+
+
+ /**
+ * DEPRICATED Returns true if any fields in this form have changed since their original load.
+ * @return Boolean
+ */
+ isDirty : function(){
+ var dirty = false;
+ this.items.each(function(f){
+ if(f.isDirty()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
+ },
+
+ /**
+ * Returns true if any fields in this form have changed since their original load. (New version)
+ * @return Boolean
+ */
+
+ hasChanged : function()
+ {
+ var dirty = false;
+ this.items.each(function(f){
+ if(f.hasChanged()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
+
+ },
+ /**
+ * Resets all hasChanged to 'false' -
+ * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
+ * So hasChanged storage is only to be used for this purpose
+ * @return Boolean
+ */
+ resetHasChanged : function()
+ {
+ this.items.each(function(f){
+ f.resetHasChanged();
+ });
+
+ },
+
+
+ /**
+ * Performs a predefined action (submit or load) or custom actions you define on this form.
+ * @param {String} actionName The name of the action type
+ * @param {Object} options (optional) The options to pass to the action. All of the config options listed
+ * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
+ * accept other config options):
+ * <pre>
+Property Type Description
+---------------- --------------- ----------------------------------------------------------------------------------
+url String The url for the action (defaults to the form's url)
+method String The form method to use (defaults to the form's method, or POST if not defined)
+params String/Object The params to pass (defaults to the form's baseParams, or none if not defined)
+clientValidation Boolean Applies to submit only. Pass true to call form.isValid() prior to posting to
+ validate the form on the client (defaults to false)
+ * </pre>
+ * @return {BasicForm} this
+ */
+ doAction : function(action, options){
+ if(typeof action == 'string'){
+ action = new Roo.form.Action.ACTION_TYPES[action](this, options);
+ }
+ if(this.fireEvent('beforeaction', this, action) !== false){
+ this.beforeAction(action);
+ action.run.defer(100, action);
+ }
+ return this;
+ },
+
+ /**
+ * Shortcut to do a submit action.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+ * @return {BasicForm} this
+ */
+ submit : function(options){
+ this.doAction('submit', options);
+ return this;
+ },
+
+ /**
+ * Shortcut to do a load action.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+ * @return {BasicForm} this
+ */
+ load : function(options){
+ this.doAction('load', options);
+ return this;
+ },
+
+ /**
+ * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
+ * @param {Record} record The record to edit
+ * @return {BasicForm} this
+ */
+ updateRecord : function(record){
+ record.beginEdit();
+ var fs = record.fields;
+ fs.each(function(f){
+ var field = this.findField(f.name);
+ if(field){
+ record.set(f.name, field.getValue());
+ }
+ }, this);
+ record.endEdit();
+ return this;
+ },
+
+ /**
+ * Loads an Roo.data.Record into this form.
+ * @param {Record} record The record to load
+ * @return {BasicForm} this
+ */
+ loadRecord : function(record){
+ this.setValues(record.data);
+ return this;
+ },
+
+ // private
+ beforeAction : function(action){
+ var o = action.options;
+
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget = Roo.get(this.waitMsgTarget);
+ this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else {
+ Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
+ }
+ }
+
+
+ },
+
+ // private
+ afterAction : function(action, success){
+ this.activeAction = null;
+ var o = action.options;
+
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.unmask();
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget.unmask();
+ }else{
+ Roo.MessageBox.updateProgress(1);
+ Roo.MessageBox.hide();
+ }
+ }
+
+ if(success){
+ if(o.reset){
+ this.reset();
+ }
+ Roo.callback(o.success, o.scope, [this, action]);
+ this.fireEvent('actioncomplete', this, action);
+
+ }else{
+
+ // failure condition..
+ // we have a scenario where updates need confirming.
+ // eg. if a locking scenario exists..
+ // we look for { errors : { needs_confirm : true }} in the response.
+ if (
+ (typeof(action.result) != 'undefined') &&
+ (typeof(action.result.errors) != 'undefined') &&
+ (typeof(action.result.errors.needs_confirm) != 'undefined')
+ ){
+ var _t = this;
+ Roo.MessageBox.confirm(
+ "Change requires confirmation",
+ action.result.errorMsg,
+ function(r) {
+ if (r != 'yes') {
+ return;
+ }
+ _t.doAction('submit', { params : { _submit_confirmed : 1 } } );
+ }
+
+ );
+
+
+
+ return;
+ }
+
+ Roo.callback(o.failure, o.scope, [this, action]);
+ // show an error message if no failed handler is set..
+ if (!this.hasListener('actionfailed')) {
+ Roo.MessageBox.alert("Error",
+ (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
+ action.result.errorMsg :
+ "Saving Failed, please check your entries or try again"
+ );
+ }
+
+ this.fireEvent('actionfailed', this, action);
+ }
+
+ },
+
+ /**
+ * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
+ * @param {String} id The value to search for
+ * @return Field
+ */
+ findField : function(id){
+ var field = this.items.get(id);
+ if(!field){
+ this.items.each(function(f){
+ if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
+ field = f;
+ return false;
+ }
+ });
+ }
+ return field || null;
+ },
+
+ /**
+ * Add a secondary form to this one,
+ * Used to provide tabbed forms. One form is primary, with hidden values
+ * which mirror the elements from the other forms.
+ *
+ * @param {Roo.form.Form} form to add.
+ *
+ */
+ addForm : function(form)
+ {
+
+ if (this.childForms.indexOf(form) > -1) {
+ // already added..
+ return;
+ }
+ this.childForms.push(form);
+ var n = '';
+ Roo.each(form.allItems, function (fe) {
+
+ n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
+ if (this.findField(n)) { // already added..
+ return;
+ }
+ var add = new Roo.form.Hidden({
+ name : n
+ });
+ add.render(this.el);
+
+ this.add( add );
+ }, this);
+
+ },
+ /**
+ * Mark fields in this form invalid in bulk.
+ * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
+ * @return {BasicForm} this
+ */
+ markInvalid : function(errors){
+ if(errors instanceof Array){
+ for(var i = 0, len = errors.length; i < len; i++){
+ var fieldError = errors[i];
+ var f = this.findField(fieldError.id);
+ if(f){
+ f.markInvalid(fieldError.msg);
+ }
+ }
+ }else{
+ var field, id;
+ for(id in errors){
+ if(typeof errors[id] != 'function' && (field = this.findField(id))){
+ field.markInvalid(errors[id]);
+ }
+ }
+ }
+ Roo.each(this.childForms || [], function (f) {
+ f.markInvalid(errors);
+ });
+
+ return this;
+ },
+
+ /**
+ * Set values for fields in this form in bulk.
+ * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
+ * @return {BasicForm} this
+ */
+ setValues : function(values){
+ if(values instanceof Array){ // array of objects
+ for(var i = 0, len = values.length; i < len; i++){
+ var v = values[i];
+ var f = this.findField(v.id);
+ if(f){
+ f.setValue(v.value);
+ if(this.trackResetOnLoad){
+ f.originalValue = f.getValue();
+ }
+ }
+ }
+ }else{ // object hash
+ var field, id;
+ for(id in values){
+ if(typeof values[id] != 'function' && (field = this.findField(id))){
+
+
+
+
+ if (field.setFromData &&
+ field.valueField &&
+ field.displayField &&
+ // combos' with local stores can
+ // be queried via setValue()
+ // to set their value..
+ (field.store && !field.store.isLocal)
+ ) {
+ // it's a combo
+ var sd = { };
+ sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
+ sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
+ field.setFromData(sd);
+
+ } else if (field.inputType && field.inputType == 'radio') {
+
+ field.setValue(values[id]);
+ } else {
+ field.setValue(values[id]);
+ }
+
+
+ if(this.trackResetOnLoad){
+ field.originalValue = field.getValue();
+ }
+ }
+ }
+ }
+ this.resetHasChanged();
+
+
+ Roo.each(this.childForms || [], function (f) {
+ f.setValues(values);
+ f.resetHasChanged();
+ });
+
+ return this;
+ },
+
+ /**
+ * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
+ * they are returned as an array.
+ * @param {Boolean} asString (def)
+ * @return {Object}
+ */
+ getValues : function(asString)
+ {
+ if (this.childForms) {
+ // copy values from the child forms
+ Roo.each(this.childForms, function (f) {
+ this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
+ }, this);
+ }
+
+ // use formdata
+ if (typeof(FormData) != 'undefined' && asString !== true) {
+ // this relies on a 'recent' version of chrome apparently...
+ try {
+ var fd = (new FormData(this.el.dom)).entries();
+ var ret = {};
+ var ent = fd.next();
+ while (!ent.done) {
+ ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
+ ent = fd.next();
+ };
+ return ret;
+ } catch(e) {
+
+ }
+
+ }
+
+
+ var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
+ if(asString === true){
+ return fs;
+ }
+ return Roo.urlDecode(fs);
+ },
+
+ /**
+ * Returns the fields in this form as an object with key/value pairs.
+ * This differs from getValues as it calls getValue on each child item, rather than using dom data.
+ * Normally this will not return readOnly data
+ * @param {Boolean} with_readonly return readonly field data.
+ * @return {Object}
+ */
+ getFieldValues : function(with_readonly)
+ {
+ if (this.childForms) {
+ // copy values from the child forms
+ // should this call getFieldValues - probably not as we do not currently copy
+ // hidden fields when we generate..
+ Roo.each(this.childForms, function (f) {
+ this.setValues(f.getFieldValues());
+ }, this);
+ }
+
+ var ret = {};
+ this.items.each(function(f){
+
+ if (f.readOnly && with_readonly !== true) {
+ return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
+ // if a subform contains a copy of them.
+ // if you have subforms with the same editable data, you will need to copy the data back
+ // and forth.
+ }
+
+ if (!f.getName()) {
+ return;
+ }
+ var v = f.getValue();
+ if (f.inputType =='radio') {
+ if (typeof(ret[f.getName()]) == 'undefined') {
+ ret[f.getName()] = ''; // empty..
+ }
+
+ if (!f.el.dom.checked) {
+ return;
+
+ }
+ v = f.el.dom.value;
+
+ }
+
+ // not sure if this supported any more..
+ if ((typeof(v) == 'object') && f.getRawValue) {
+ v = f.getRawValue() ; // dates..
+ }
+ // combo boxes where name != hiddenName...
+ if (f.name != f.getName()) {
+ ret[f.name] = f.getRawValue();
+ }
+ ret[f.getName()] = v;
+ });
+
+ return ret;
+ },
+
+ /**
+ * Clears all invalid messages in this form.
+ * @return {BasicForm} this
+ */
+ clearInvalid : function(){
+ this.items.each(function(f){
+ f.clearInvalid();
+ });
+
+ Roo.each(this.childForms || [], function (f) {
+ f.clearInvalid();
+ });
+
+
+ return this;
+ },
+
+ /**
+ * Resets this form.
+ * @return {BasicForm} this
+ */
+ reset : function(){
+ this.items.each(function(f){
+ f.reset();
+ });
+
+ Roo.each(this.childForms || [], function (f) {
+ f.reset();
+ });
+ this.resetHasChanged();
+
+ return this;
+ },
+
+ /**
+ * Add Roo.form components to this form.
+ * @param {Field} field1
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return {BasicForm} this
+ */
+ add : function(){
+ this.items.addAll(Array.prototype.slice.call(arguments, 0));
+ return this;
+ },
+
+
+ /**
+ * Removes a field from the items collection (does NOT remove its markup).
+ * @param {Field} field
+ * @return {BasicForm} this
+ */
+ remove : function(field){
+ this.items.remove(field);
+ return this;
+ },
+
+ /**
+ * Looks at the fields in this form, checks them for an id attribute,
+ * and calls applyTo on the existing dom element with that id.
+ * @return {BasicForm} this
+ */
+ render : function(){
+ this.items.each(function(f){
+ if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
+ f.applyTo(f.id);
+ }
+ });
+ return this;
+ },
+
+ /**
+ * Calls {@link Ext#apply} for all fields in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
+ */
+ applyToFields : function(o){
+ this.items.each(function(f){
+ Roo.apply(f, o);
+ });
+ return this;
+ },
+
+ /**
+ * Calls {@link Ext#applyIf} for all field in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
+ */
+ applyIfToFields : function(o){
+ this.items.each(function(f){
+ Roo.applyIf(f, o);
+ });
+ return this;
+ }
+});
+
+// back compat
+Roo.BasicForm = Roo.form.BasicForm;
+
+Roo.apply(Roo.form.BasicForm, {
+
+ popover : {
+
+ padding : 5,
+
+ isApplied : false,
+
+ isMasked : false,
+
+ form : false,
+
+ target : false,
+
+ intervalID : false,
+
+ maskEl : false,
+
+ apply : function()
+ {
+ if(this.isApplied){
+ return;
+ }
+
+ this.maskEl = {
+ top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+ left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+ bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+ right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+ };
+
+ this.maskEl.top.enableDisplayMode("block");
+ this.maskEl.left.enableDisplayMode("block");
+ this.maskEl.bottom.enableDisplayMode("block");
+ this.maskEl.right.enableDisplayMode("block");
+
+ Roo.get(document.body).on('click', function(){
+ this.unmask();
+ }, this);
+
+ Roo.get(document.body).on('touchstart', function(){
+ this.unmask();
+ }, this);
+
+ this.isApplied = true
+ },
+
+ mask : function(form, target)
+ {
+ this.form = form;
+
+ this.target = target;
+
+ if(!this.form.errorMask || !target.el){
+ return;
+ }
+
+ var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
+
+ var ot = this.target.el.calcOffsetsTo(scrollable);
+
+ var scrollTo = ot[1] - this.form.maskOffset;
+
+ scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
+
+ scrollable.scrollTo('top', scrollTo);
+
+ var el = this.target.wrap || this.target.el;
+
+ var box = el.getBox();
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setStyle('z-index', 10000);
+ this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+ this.maskEl.top.setLeft(0);
+ this.maskEl.top.setTop(0);
+ this.maskEl.top.show();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setStyle('z-index', 10000);
+ this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
+ this.maskEl.left.setLeft(0);
+ this.maskEl.left.setTop(box.y - this.padding);
+ this.maskEl.left.show();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setStyle('z-index', 10000);
+ this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+ this.maskEl.bottom.setLeft(0);
+ this.maskEl.bottom.setTop(box.bottom + this.padding);
+ this.maskEl.bottom.show();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setStyle('z-index', 10000);
+ this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+ this.maskEl.right.setLeft(box.right + this.padding);
+ this.maskEl.right.setTop(box.y - this.padding);
+ this.maskEl.right.show();
+
+ this.intervalID = window.setInterval(function() {
+ Roo.form.BasicForm.popover.unmask();
+ }, 10000);
+
+ window.onwheel = function(){ return false;};
+
+ (function(){ this.isMasked = true; }).defer(500, this);
+
+ },
+
+ unmask : function()
+ {
+ if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
+ return;
+ }
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.top.hide();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.left.hide();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.bottom.hide();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.right.hide();
+
+ window.onwheel = function(){ return true;};
+
+ if(this.intervalID){
+ window.clearInterval(this.intervalID);
+ this.intervalID = false;
+ }
+
+ this.isMasked = false;
+
+ }
+
+ }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Form
+ * @extends Roo.form.BasicForm
+ * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Form = function(config){
+ var xitems = [];
+ if (config.items) {
+ xitems = config.items;
+ delete config.items;
+ }
+
+
+ Roo.form.Form.superclass.constructor.call(this, null, config);
+ this.url = this.url || this.action;
+ if(!this.root){
+ this.root = new Roo.form.Layout(Roo.applyIf({
+ id: Roo.id()
+ }, config));
+ }
+ this.active = this.root;
+ /**
+ * Array of all the buttons that have been added to this form via {@link addButton}
+ * @type Array
+ */
+ this.buttons = [];
+ this.allItems = [];
+ this.addEvents({
+ /**
+ * @event clientvalidation
+ * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+ * @param {Form} this
+ * @param {Boolean} valid true if the form has passed client-side validation
+ */
+ clientvalidation: true,
+ /**
+ * @event rendered
+ * Fires when the form is rendered
+ * @param {Roo.form.Form} form
+ */
+ rendered : true
+ });
+
+ if (this.progressUrl) {
+ // push a hidden field onto the list of fields..
+ this.addxtype( {
+ xns: Roo.form,
+ xtype : 'Hidden',
+ name : 'UPLOAD_IDENTIFIER'
+ });
+ }
+
+
+ Roo.each(xitems, this.addxtype, this);
+
+};
+
+Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+ /**
+ * @cfg {Roo.Button} buttons[] buttons at bottom of form
+ */
+
+ /**
+ * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+ */
+ /**
+ * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+ */
+ /**
+ * @cfg {String} (left|center|right) buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
+ */
+ buttonAlign:'center',
+
+ /**
+ * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
+ */
+ minButtonWidth:75,
+
+ /**
+ * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
+ * This property cascades to child containers if not set.
+ */
+ labelAlign:'left',
+
+ /**
+ * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
+ * fires a looping event with that state. This is required to bind buttons to the valid
+ * state using the config value formBind:true on the button.
+ */
+ monitorValid : false,
+
+ /**
+ * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+ */
+ monitorPoll : 200,
+
+ /**
+ * @cfg {String} progressUrl - Url to return progress data
+ */
+
+ progressUrl : false,
+ /**
+ * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
+ * sending a formdata with extra parameters - eg uploaded elements.
+ */
+
+ formData : false,
+
+ /**
+ * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
+ * fields are added and the column is closed. If no fields are passed the column remains open
+ * until end() is called.
+ * @param {Object} config The config to pass to the column
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return Column The column container object
+ */
+ column : function(c){
+ var col = new Roo.form.Column(c);
+ this.start(col);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
+ }
+ return col;
+ },
+
+ /**
+ * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
+ * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
+ * until end() is called.
+ * @param {Object} config The config to pass to the fieldset
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return FieldSet The fieldset container object
+ */
+ fieldset : function(c){
+ var fs = new Roo.form.FieldSet(c);
+ this.start(fs);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
+ }
+ return fs;
+ },
+
+ /**
+ * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
+ * fields are added and the container is closed. If no fields are passed the container remains open
+ * until end() is called.
+ * @param {Object} config The config to pass to the Layout
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return Layout The container object
+ */
+ container : function(c){
+ var l = new Roo.form.Layout(c);
+ this.start(l);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
+ }
+ return l;
+ },
+
+ /**
+ * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
+ * @param {Object} container A Roo.form.Layout or subclass of Layout
+ * @return {Form} this
+ */
+ start : function(c){
+ // cascade label info
+ Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
+ this.active.stack.push(c);
+ c.ownerCt = this.active;
+ this.active = c;
+ return this;
+ },
+
+ /**
+ * Closes the current open container
+ * @return {Form} this
+ */
+ end : function(){
+ if(this.active == this.root){
+ return this;
+ }
+ this.active = this.active.ownerCt;
+ return this;
+ },
+
+ /**
+ * Add Roo.form components to the current open container (e.g. column, fieldset, etc.). Fields added via this method
+ * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
+ * as the label of the field.
+ * @param {Field} field1
+ * @param {Field} field2 (optional)
+ * @param {Field} etc. (optional)
+ * @return {Form} this
+ */
+ add : function(){
+ this.active.stack.push.apply(this.active.stack, arguments);
+ this.allItems.push.apply(this.allItems,arguments);
+ var r = [];
+ for(var i = 0, a = arguments, len = a.length; i < len; i++) {
+ if(a[i].isFormField){
+ r.push(a[i]);
+ }
+ }
+ if(r.length > 0){
+ Roo.form.Form.superclass.add.apply(this, r);
+ }
+ return this;
+ },
+
+
+
+
+
+ /**
+ * Find any element that has been added to a form, using it's ID or name
+ * This can include framesets, columns etc. along with regular fields..
+ * @param {String} id - id or name to find.
+
+ * @return {Element} e - or false if nothing found.
+ */
+ findbyId : function(id)
+ {
+ var ret = false;
+ if (!id) {
+ return ret;
+ }
+ Roo.each(this.allItems, function(f){
+ if (f.id == id || f.name == id ){
+ ret = f;
+ return false;
+ }
+ });
+ return ret;
+ },
+
+
+
+ /**
+ * Render this form into the passed container. This should only be called once!
+ * @param {String/HTMLElement/Element} container The element this component should be rendered into
+ * @return {Form} this
+ */
+ render : function(ct)
+ {
+
+
+
+ ct = Roo.get(ct);
+ var o = this.autoCreate || {
+ tag: 'form',
+ method : this.method || 'POST',
+ id : this.id || Roo.id()
+ };
+ this.initEl(ct.createChild(o));
+
+ this.root.render(this.el);
+
+
+
+ this.items.each(function(f){
+ f.render('x-form-el-'+f.id);
+ });
+
+ if(this.buttons.length > 0){
+ // tables are required to maintain order and for correct IE layout
+ var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
+ cls:"x-form-btns x-form-btns-"+this.buttonAlign,
+ html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+ }}, null, true);
+ var tr = tb.getElementsByTagName('tr')[0];
+ for(var i = 0, len = this.buttons.length; i < len; i++) {
+ var b = this.buttons[i];
+ var td = document.createElement('td');
+ td.className = 'x-form-btn-td';
+ b.render(tr.appendChild(td));
+ }
+ }
+ if(this.monitorValid){ // initialize after render
+ this.startMonitoring();
+ }
+ this.fireEvent('rendered', this);
+ return this;
+ },
+
+ /**
+ * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
+ * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+ * object or a valid Roo.DomHelper element config
+ * @param {Function} handler The function called when the button is clicked
+ * @param {Object} scope (optional) The scope of the handler function
+ * @return {Roo.Button}
+ */
+ addButton : function(config, handler, scope){
+ var bc = {
+ handler: handler,
+ scope: scope,
+ minWidth: this.minButtonWidth,
+ hideParent:true
+ };
+ if(typeof config == "string"){
+ bc.text = config;
+ }else{
+ Roo.apply(bc, config);
+ }
+ var btn = new Roo.Button(null, bc);
+ this.buttons.push(btn);
+ return btn;
+ },
+
+ /**
+ * Adds a series of form elements (using the xtype property as the factory method.
+ * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
+ * @param {Object} config
+ */
+
+ addxtype : function()
+ {
+ var ar = Array.prototype.slice.call(arguments, 0);
+ var ret = false;
+ for(var i = 0; i < ar.length; i++) {
+ if (!ar[i]) {
+ continue; // skip -- if this happends something invalid got sent, we
+ // should ignore it, as basically that interface element will not show up
+ // and that should be pretty obvious!!
+ }
+
+ if (Roo.form[ar[i].xtype]) {
+ ar[i].form = this;
+ var fe = Roo.factory(ar[i], Roo.form);
+ if (!ret) {
+ ret = fe;
+ }
+ fe.form = this;
+ if (fe.store) {
+ fe.store.form = this;
+ }
+ if (fe.isLayout) {
+
+ this.start(fe);
+ this.allItems.push(fe);
+ if (fe.items && fe.addxtype) {
+ fe.addxtype.apply(fe, fe.items);
+ delete fe.items;
+ }
+ this.end();
+ continue;
+ }
+
+
+
+ this.add(fe);
+ // console.log('adding ' + ar[i].xtype);
+ }
+ if (ar[i].xtype == 'Button') {
+ //console.log('adding button');
+ //console.log(ar[i]);
+ this.addButton(ar[i]);
+ this.allItems.push(fe);
+ continue;
+ }
+
+ if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
+ alert('end is not supported on xtype any more, use items');
+ // this.end();
+ // //console.log('adding end');
+ }
+
+ }
+ return ret;
+ },
+
+ /**
+ * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+ * option "monitorValid"
+ */
+ startMonitoring : function(){
+ if(!this.bound){
+ this.bound = true;
+ Roo.TaskMgr.start({
+ run : this.bindHandler,
+ interval : this.monitorPoll || 200,
+ scope: this
+ });
+ }
+ },
+
+ /**
+ * Stops monitoring of the valid state of this form
+ */
+ stopMonitoring : function(){
+ this.bound = false;
+ },
+
+ // private
+ bindHandler : function(){
+ if(!this.bound){
+ return false; // stops binding
+ }
+ var valid = true;
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ valid = false;
+ return false;
+ }
+ });
+ for(var i = 0, len = this.buttons.length; i < len; i++){
+ var btn = this.buttons[i];
+ if(btn.formBind === true && btn.disabled === valid){
+ btn.setDisabled(!valid);
+ }
+ }
+ this.fireEvent('clientvalidation', this, valid);
+ }
+
+
+
+
+
+
+
+
+});
+
+
+// back compat
+Roo.Form = Roo.form.Form;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*
* Originally Released Under LGPL - original licence link has changed is not relivant.
/**
* @class Roo.form.Layout
* @extends Roo.Component
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
* Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
* @param {Object} config Configuration options
* a function which returns such a specification.
*/
/**
- * @cfg {String} labelAlign
+ * @cfg {String} labelAlign (left|top|right)
* Valid values are "left," "top" and "right" (defaults to "left")
*/
/**
}
});
+
/**
* @class Roo.form.Column
* @extends Roo.form.Layout
+ * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
* Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
* @param {Object} config Configuration options
}
});
-
/**
* @class Roo.form.Row
* @extends Roo.form.Layout
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
* Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
* @param {Object} config Configuration options
/**
* @class Roo.form.VTypes
* Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
- * @singleton
+ * @static
*/
Roo.form.VTypes = function(){
// closure these in so they are only created once.
* @class Roo.ContentPanel
* @extends Roo.util.Observable
* @children Roo.form.Form Roo.JsonView Roo.View
- * @builder-top
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
* A basic ContentPanel element.
* @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
* @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
* @cfg {String} title The title for this panel
* @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
* @cfg {String} url Calls {@link #setUrl} with this value
- * @cfg {String} region [required] (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
+ * @cfg {String} region (center|north|south|east|west) [required] which region to put this panel on (when used with xtype constructors)
* @cfg {String|Object} params When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
*/
Roo.ContentPanel = function(el, config, content){
-
/*
if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
config = el;
*/
addxtype : function(cfg) {
+ if(cfg.xtype.match(/^UploadCropbox$/)) {
+
+ this.cropbox = new Roo.factory(cfg);
+
+ this.cropbox.render(this.el);
+
+ return this.cropbox;
+ }
// add form..
if (cfg.xtype.match(/^Form$/)) {
}
});
+
+
+
+
+
+
+
+
+
+
+
/**
* @class Roo.GridPanel
* @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
* @constructor
* Create a new GridPanel.
- * @param {Roo.grid.Grid} grid The grid for this panel
- * @param {String/Object} config A string to set only the panel's title, or a config object
+ * @cfg {Roo.grid.Grid} grid The grid for this panel
*/
Roo.GridPanel = function(grid, config){
-
+ // universal ctor...
+ if (typeof(grid.grid) != 'undefined') {
+ config = grid;
+ grid = config.grid;
+ }
this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
{tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
/**
* @class Roo.NestedLayoutPanel
* @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @cfg {Roo.BorderLayout} layout [required] The layout for this panel
+ *
+ *
* @constructor
* Create a new NestedLayoutPanel.
*
Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+ layout : false,
+
setSize : function(width, height){
if(!this.ignoreResize(width, height)){
var size = this.adjustForComponents(width, height);
/**
* Returns the nested BorderLayout for this panel
- * @return {Roo.BorderLayout}
+ * @return {Roo.BorderLayout}
*/
getLayout : function(){
return this.layout;
/**
* @class Roo.TreePanel
* @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
* Treepanel component
*
* @constructor
tree : false
});
-
-
-
-
-
-
-
-
-
-
-
/*
* Based on:
* Ext JS Library 1.1.1
* @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
*/
/**
- * @cfg {Roo.grid.Store} ds The data store for the grid
+ * @cfg {Roo.data.Store} ds The data store for the grid
*/
/**
* @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
* @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
*/
dropTarget: false,
-
-
+ /**
+ * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
+ */
+ sortColMenu : false,
// private
rendered : false,
beforeColMenuShow : function(){
var cm = this.cm, colCount = cm.getColumnCount();
this.colMenu.removeAll();
+
+ var items = [];
for(var i = 0; i < colCount; i++){
- this.colMenu.add(new Roo.menu.CheckItem({
+ items.push({
id: "col-"+cm.getColumnId(i),
text: cm.getColumnHeader(i),
checked: !cm.isHidden(i),
hideOnClick:false
- }));
+ });
+ }
+
+ if (this.grid.sortColMenu) {
+ items.sort(function(a,b) {
+ if (a.text == b.text) {
+ return 0;
+ }
+ return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
+ });
+ }
+
+ for(var i = 0; i < colCount; i++){
+ this.colMenu.add(new Roo.menu.CheckItem(items[i]));
}
},
};
Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
/**
- * @cfg {String} header The header text to display in the Grid view.
+ * @cfg {String} header [required] The header text to display in the Grid view.
*/
/**
* @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
* @cfg {String} xlHeader Header at Bootsrap extra Large width
*/
/**
- * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
+ * @cfg {String} dataIndex The name of the field in the grid's {@link Roo.data.Store}'s
* {@link Roo.data.Record} definition from which to draw the column's value. If not
* specified, the column's index is used as an index into the Record's data Array.
*/
/**
- * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
+ * @cfg {Number} width The initial width in pixels of the column. Using this
* instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
*/
/**
- * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
+ * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
* Defaults to the value of the {@link #defaultSortable} property.
* Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
*/
/**
- * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid. Defaults to false.
+ * @cfg {Boolean} locked True to lock the column in place while scrolling the Grid. Defaults to false.
*/
/**
- * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed. Defaults to false.
+ * @cfg {Boolean} fixed True if the column width cannot be changed. Defaults to false.
*/
/**
- * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
+ * @cfg {Boolean} resizable False to disable column resizing. Defaults to true.
*/
/**
- * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
+ * @cfg {Boolean} hidden True to hide the column. Defaults to false.
*/
/**
- * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
+ * @cfg {Function} renderer A function used to generate HTML markup for a cell
* given the cell's data value. See {@link #setRenderer}. If not specified, the
* default renderer returns the escaped data value. If an object is returned (bootstrap only)
* then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
*/
/**
- * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor
+ * @cfg {Roo.grid.GridEditor} editor For grid editors - returns the grid editor
*/
/**
- * @cfg {String} align (Optional) Set the CSS text-align property of the column. Defaults to undefined.
+ * @cfg {String} align (left|right) Set the CSS text-align property of the column. Defaults to undefined (left).
*/
/**
- * @cfg {String} valign (Optional) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined.
+ * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined (middle)
*/
/**
- * @cfg {String} cursor (Optional)
+ * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
*/
/**
- * @cfg {String} tooltip (Optional)
+ * @cfg {String} tooltip mouse over tooltip text
*/
/**
- * @cfg {Number} xs (Optional) can be '0' for hidden at this size (number less than 12)
+ * @cfg {Number} xs can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} sm (Optional) can be '0' for hidden at this size (number less than 12)
+ * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} md (Optional) can be '0' for hidden at this size (number less than 12)
+ * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} lg (Optional) can be '0' for hidden at this size (number less than 12)
+ * @cfg {Number} lg can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} xl (Optional) can be '0' for hidden at this size (number less than 12)
+ * @cfg {Number} xl can be '0' for hidden at this size (number less than 12)
*/
/**
* Returns the id of the column at the specified index.
*/
disabled: false,
- /**
- * Disables the mask to prevent it from being displayed
- */
- disable : function(){
- this.disabled = true;
+ /**
+ * Disables the mask to prevent it from being displayed
+ */
+ disable : function(){
+ this.disabled = true;
+ },
+
+ /**
+ * Enables the mask so that it can be displayed
+ */
+ enable : function(){
+ this.disabled = false;
+ },
+
+ onLoadException : function()
+ {
+ Roo.log(arguments);
+
+ if (typeof(arguments[3]) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",arguments[3]);
+ }
+ /*
+ try {
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+ } catch(e) {
+
+ }
+ */
+
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+ },
+ // private
+ onLoad : function()
+ {
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+ },
+
+ // private
+ onBeforeLoad : function(){
+ if(!this.disabled){
+ (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
+ }
+ },
+
+ // private
+ destroy : function(){
+ if(this.store){
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('loadexception', this.onLoadException, this);
+ }else{
+ var um = this.el.getUpdateManager();
+ um.un('beforeupdate', this.onBeforeLoad, this);
+ um.un('update', this.onLoad, this);
+ um.un('failure', this.onLoad, this);
+ }
+ }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/**
+ * @class Roo.XTemplate
+ * @extends Roo.Template
+ * Provides a template that can have nested templates for loops or conditionals. The syntax is:
+<pre><code>
+var t = new Roo.XTemplate(
+ '<select name="{name}">',
+ '<tpl for="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
+ '</select>'
+);
+
+// then append, applying the master template values
+ </code></pre>
+ *
+ * Supported features:
+ *
+ * Tags:
+
+<pre><code>
+ {a_variable} - output encoded.
+ {a_variable.format:("Y-m-d")} - call a method on the variable
+ {a_variable:raw} - unencoded output
+ {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
+ {a_variable:this.method_on_template(...)} - call a method on the template object.
+
+</code></pre>
+ * The tpl tag:
+<pre><code>
+ <tpl for="a_variable or condition.."></tpl>
+ <tpl if="a_variable or condition"></tpl>
+ <tpl exec="some javascript"></tpl>
+ <tpl name="named_template"></tpl> (experimental)
+
+ <tpl for="."></tpl> - just iterate the property..
+ <tpl for=".."></tpl> - iterates with the parent (probably the template)
+</code></pre>
+ *
+ */
+Roo.XTemplate = function()
+{
+ Roo.XTemplate.superclass.constructor.apply(this, arguments);
+ if (this.html) {
+ this.compile();
+ }
+};
+
+
+Roo.extend(Roo.XTemplate, Roo.Template, {
+
+ /**
+ * The various sub templates
+ */
+ tpls : false,
+ /**
+ *
+ * basic tag replacing syntax
+ * WORD:WORD()
+ *
+ * // you can fake an object call by doing this
+ * x.t:(test,tesT)
+ *
+ */
+ re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+
+ /**
+ * compile the template
+ *
+ * This is not recursive, so I'm not sure how nested templates are really going to be handled..
+ *
+ */
+ compile: function()
+ {
+ var s = this.html;
+
+ s = ['<tpl>', s, '</tpl>'].join('');
+
+ var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
+ nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
+ ifRe = /^<tpl\b[^>]*?if="(.*?)"/,
+ execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
+ namedRe = /^<tpl\b[^>]*?name="(\w+)"/, // named templates..
+ m,
+ id = 0,
+ tpls = [];
+
+ while(true == !!(m = s.match(re))){
+ var forMatch = m[0].match(nameRe),
+ ifMatch = m[0].match(ifRe),
+ execMatch = m[0].match(execRe),
+ namedMatch = m[0].match(namedRe),
+
+ exp = null,
+ fn = null,
+ exec = null,
+ name = forMatch && forMatch[1] ? forMatch[1] : '';
+
+ if (ifMatch) {
+ // if - puts fn into test..
+ exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
+ if(exp){
+ fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ }
+ }
+
+ if (execMatch) {
+ // exec - calls a function... returns empty if true is returned.
+ exp = execMatch && execMatch[1] ? execMatch[1] : null;
+ if(exp){
+ exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ }
+ }
+
+
+ if (name) {
+ // for =
+ switch(name){
+ case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
+ case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
+ default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
+ }
+ }
+ var uid = namedMatch ? namedMatch[1] : id;
+
+
+ tpls.push({
+ id: namedMatch ? namedMatch[1] : id,
+ target: name,
+ exec: exec,
+ test: fn,
+ body: m[1] || ''
+ });
+ if (namedMatch) {
+ s = s.replace(m[0], '');
+ } else {
+ s = s.replace(m[0], '{xtpl'+ id + '}');
+ }
+ ++id;
+ }
+ this.tpls = [];
+ for(var i = tpls.length-1; i >= 0; --i){
+ this.compileTpl(tpls[i]);
+ this.tpls[tpls[i].id] = tpls[i];
+ }
+ this.master = tpls[tpls.length-1];
+ return this;
+ },
+ /**
+ * same as applyTemplate, except it's done to one of the subTemplates
+ * when using named templates, you can do:
+ *
+ * var str = pl.applySubTemplate('your-name', values);
+ *
+ *
+ * @param {Number} id of the template
+ * @param {Object} values to apply to template
+ * @param {Object} parent (normaly the instance of this object)
+ */
+ applySubTemplate : function(id, values, parent)
+ {
+
+
+ var t = this.tpls[id];
+
+
+ try {
+ if(t.test && !t.test.call(this, values, parent)){
+ return '';
+ }
+ } catch(e) {
+ Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.test);
+ return ''
+ }
+ try {
+
+ if(t.exec && t.exec.call(this, values, parent)){
+ return '';
+ }
+ } catch(e) {
+ Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.exec);
+ return ''
+ }
+ try {
+ var vs = t.target ? t.target.call(this, values, parent) : values;
+ parent = t.target ? values : parent;
+ if(t.target && vs instanceof Array){
+ var buf = [];
+ for(var i = 0, len = vs.length; i < len; i++){
+ buf[buf.length] = t.compiled.call(this, vs[i], parent);
+ }
+ return buf.join('');
+ }
+ return t.compiled.call(this, vs, parent);
+ } catch (e) {
+ Roo.log("Xtemplate.applySubTemplate : Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.compiled);
+ return '';
+ }
+ },
+
+ compileTpl : function(tpl)
+ {
+ var fm = Roo.util.Format;
+ var useF = this.disableFormats !== true;
+ var sep = Roo.isGecko ? "+" : ",";
+ var undef = function(str) {
+ Roo.log("Property not found :" + str);
+ return '';
+ };
+
+ var fn = function(m, name, format, args)
+ {
+ //Roo.log(arguments);
+ args = args ? args.replace(/\\'/g,"'") : args;
+ //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
+ if (typeof(format) == 'undefined') {
+ format= 'htmlEncode';
+ }
+ if (format == 'raw' ) {
+ format = false;
+ }
+
+ if(name.substr(0, 4) == 'xtpl'){
+ return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
+ }
+
+ // build an array of options to determine if value is undefined..
+
+ // basically get 'xxxx.yyyy' then do
+ // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
+ // (function () { Roo.log("Property not found"); return ''; })() :
+ // ......
+
+ var udef_ar = [];
+ var lookfor = '';
+ Roo.each(name.split('.'), function(st) {
+ lookfor += (lookfor.length ? '.': '') + st;
+ udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
+ });
+
+ var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
+
+
+ if(format && useF){
+
+ args = args ? ',' + args : "";
+
+ if(format.substr(0, 5) != "this."){
+ format = "fm." + format + '(';
+ }else{
+ format = 'this.call("'+ format.substr(5) + '", ';
+ args = ", values";
+ }
+
+ return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
+ }
+
+ if (args.length) {
+ // called with xxyx.yuu:(test,test)
+ // change to ()
+ return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
+ }
+ // raw.. - :raw modifier..
+ return "'"+ sep + udef_st + name + ")"+sep+"'";
+
+ };
+ var body;
+ // branched to use + in gecko and [].join() in others
+ if(Roo.isGecko){
+ body = "tpl.compiled = function(values, parent){ with(values) { return '" +
+ tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
+ "';};};";
+ }else{
+ body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
+ body.push(tpl.body.replace(/(\r\n|\n)/g,
+ '\\n').replace(/'/g, "\\'").replace(this.re, fn));
+ body.push("'].join('');};};");
+ body = body.join('');
+ }
+
+ Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
+
+ /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
+ eval(body);
+
+ return this;
+ },
+
+ applyTemplate : function(values){
+ return this.master.compiled.call(this, values, {});
+ //var s = this.subs;
+ },
+
+ apply : function(){
+ return this.applyTemplate.apply(this, arguments);
+ }
+
+ });
+
+Roo.XTemplate.from = function(el){
+ el = Roo.getDom(el);
+ return new Roo.XTemplate(el.value || el.innerHTML);
+};Roo.dialog = {};
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.dialog.UploadCropbox
+ * @extends Roo.BoxComponent
+ * Dialog UploadCropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Number} windowSize default 300
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ *
+ * @constructor
+ * Create a new UploadCropbox
+ * @param {Object} config The config object
+ */
+
+ Roo.dialog.UploadCropbox = function(config){
+ Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "beforeselectfile" : true,
+ /**
+ * @event initial
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "initial" : true,
+ /**
+ * @event crop
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} data
+ */
+ "crop" : true,
+ /**
+ * @event prepare
+ * Fire when preparing the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "prepare" : true,
+ /**
+ * @event exception
+ * Fire when get exception
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {XMLHttpRequest} xhr
+ */
+ "exception" : true,
+ /**
+ * @event beforeloadcanvas
+ * Fire before load the canvas
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} src
+ */
+ "beforeloadcanvas" : true,
+ /**
+ * @event trash
+ * Fire when trash image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "trash" : true,
+ /**
+ * @event download
+ * Fire when download the image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "download" : true,
+ /**
+ * @event footerbuttonclick
+ * Fire when footerbuttonclick
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} type
+ */
+ "footerbuttonclick" : true,
+ /**
+ * @event resize
+ * Fire when resize
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "resize" : true,
+ /**
+ * @event rotate
+ * Fire when rotate the image
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} pos
+ */
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true,
+ /**
+ * @event loadcanvas
+ * Fire after load the canvas
+ * @param {Roo.dialog.UploadCropbox}
+ * @param {Object} imgEl
+ */
+ "loadcanvas" : true
+ });
+
+ this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
+};
+
+Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, {
+
+ emptyText : 'Click to upload image',
+ rotateNotify : 'Image is too small to rotate',
+ errorTimeout : 3000,
+ scale : 0,
+ baseScale : 1,
+ rotate : 0,
+ dragable : false,
+ pinching : false,
+ mouseX : 0,
+ mouseY : 0,
+ cropData : false,
+ minWidth : 300,
+ minHeight : 300,
+ outputMaxWidth : 1200,
+ windowSize : 300,
+ file : false,
+ exif : {},
+ baseRotate : 1,
+ cropType : 'image/jpeg',
+ buttons : false,
+ canvasLoaded : false,
+ isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ tag : 'div',
+ cls : 'roo-upload-cropbox',
+ cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-body',
+ style : 'cursor:pointer',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-preview'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-thumb'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-empty-notify',
+ html : this.emptyText
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-error-notify alert alert-danger',
+ html : this.rotateNotify
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-footer',
+ cn : {
+ tag : 'div',
+ cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
+ cn : []
+ }
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
+
+ if(this.el){
+ if (this.el.attr('xtype')) {
+ this.el.attr('xtypex', this.el.attr('xtype'));
+ this.el.dom.removeAttribute('xtype');
+
+ this.initEvents();
+ }
+ }
+ else {
+ var cfg = Roo.apply({}, this.getAutoCreate());
+
+ cfg.id = this.id || Roo.id();
+
+ if (this.cls) {
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
+ }
+
+ if (this.style) { // fixme needs to support more complex style data.
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
+ }
+
+ this.el = ct.createChild(cfg, position);
+
+ this.initEvents();
+ }
+
+ if (this.buttons.length) {
+
+ Roo.each(this.buttons, function(bb) {
+
+ var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
+
+ btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
+
+ }, this);
+ }
+
+ if(this.loadMask){
+ this.maskEl = this.el;
+ }
+ },
+
+ initEvents : function()
+ {
+ this.urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+ this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
+ this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
+ this.selectorEl.hide();
+
+ this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
+ this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
+ this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.thumbEl.hide();
+
+ this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
+ this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
+ this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.errorEl.hide();
+
+ this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
+ this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.footerEl.hide();
+
+ this.setThumbBoxSize();
+
+ this.bind();
+
+ this.resize();
+
+ this.fireEvent('initial', this);
},
- /**
- * Enables the mask so that it can be displayed
- */
- enable : function(){
- this.disabled = false;
+ bind : function()
+ {
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
+ this.bodyEl.on('click', this.beforeSelectFile, this);
+
+ if(Roo.isTouch){
+ this.bodyEl.on('touchstart', this.onTouchStart, this);
+ this.bodyEl.on('touchmove', this.onTouchMove, this);
+ this.bodyEl.on('touchend', this.onTouchEnd, this);
+ }
+
+ if(!Roo.isTouch){
+ this.bodyEl.on('mousedown', this.onMouseDown, this);
+ this.bodyEl.on('mousemove', this.onMouseMove, this);
+ var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+ this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
+ }
+
+ this.selectorEl.on('change', this.onFileSelected, this);
},
- onLoadException : function()
+ reset : function()
+ {
+ this.scale = 0;
+ this.baseScale = 1;
+ this.rotate = 0;
+ this.baseRotate = 1;
+ this.dragable = false;
+ this.pinching = false;
+ this.mouseX = 0;
+ this.mouseY = 0;
+ this.cropData = false;
+ this.notifyEl.dom.innerHTML = this.emptyText;
+
+ // this.selectorEl.dom.value = '';
+
+ },
+
+ resize : function()
{
- Roo.log(arguments);
+ if(this.fireEvent('resize', this) != false){
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+ },
+
+ onFooterButtonClick : function(e, el, o, type)
+ {
+ switch (type) {
+ case 'rotate-left' :
+ this.onRotateLeft(e);
+ break;
+ case 'rotate-right' :
+ this.onRotateRight(e);
+ break;
+ case 'picture' :
+ this.beforeSelectFile(e);
+ break;
+ case 'trash' :
+ this.trash(e);
+ break;
+ case 'crop' :
+ this.crop(e);
+ break;
+ case 'download' :
+ this.download(e);
+ break;
+ case 'center' :
+ this.center(e);
+ break;
+ default :
+ break;
+ }
- if (typeof(arguments[3]) != 'undefined') {
- Roo.MessageBox.alert("Error loading",arguments[3]);
- }
- /*
- try {
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
- }
- } catch(e) {
-
+ this.fireEvent('footerbuttonclick', this, type);
+ },
+
+ beforeSelectFile : function(e)
+ {
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
}
- */
+ },
- (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
+ }
+
},
- // private
- onLoad : function()
+
+ trash : function(e)
{
- (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+ this.fireEvent('trash', this);
+ },
+
+ download : function(e)
+ {
+ this.fireEvent('download', this);
},
- // private
- onBeforeLoad : function(){
- if(!this.disabled){
- (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
+ center : function(e)
+ {
+ this.setCanvasPosition();
+ },
+
+ loadCanvas : function(src)
+ {
+ if(this.fireEvent('beforeloadcanvas', this, src) != false){
+
+ this.reset();
+
+ this.imageEl = document.createElement('img');
+
+ var _this = this;
+
+ this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
+
+ this.imageEl.src = src;
}
},
+
+ onLoadCanvas : function()
+ {
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
- // private
- destroy : function(){
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
- }else{
- var um = this.el.getUpdateManager();
- um.un('beforeupdate', this.onBeforeLoad, this);
- um.un('update', this.onLoad, this);
- um.un('failure', this.onLoad, this);
+ if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
+
+ this.bodyEl.un('click', this.beforeSelectFile, this);
+
+ this.notifyEl.hide();
+ this.thumbEl.show();
+ this.footerEl.show();
+
+ this.baseRotateLevel();
+
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ }
+
+ this.setThumbBoxPosition();
+
+ this.baseScaleLevel();
+
+ this.draw();
+
+ this.resize();
+
+ this.canvasLoaded = true;
+
+ }
+
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ },
+
+ setCanvasPosition : function(center = true)
+ {
+ if(!this.canvasEl){
+ return;
}
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var newCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
-/**
- * @class Roo.XTemplate
- * @extends Roo.Template
- * Provides a template that can have nested templates for loops or conditionals. The syntax is:
-<pre><code>
-var t = new Roo.XTemplate(
- '<select name="{name}">',
- '<tpl for="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
- '</select>'
-);
-
-// then append, applying the master template values
- </code></pre>
- *
- * Supported features:
- *
- * Tags:
+ if(center) {
+ this.previewEl.setLeft(newCenterLeft);
+ this.previewEl.setTop(newCenterTop);
-<pre><code>
- {a_variable} - output encoded.
- {a_variable.format:("Y-m-d")} - call a method on the variable
- {a_variable:raw} - unencoded output
- {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
- {a_variable:this.method_on_template(...)} - call a method on the template object.
+ return;
+ }
+
+ var oldScaleLevel = this.baseScale * Math.pow(1.02, this.startScale);
+ var oldCanvasWidth = Math.floor(this.imageEl.OriginWidth * oldScaleLevel);
+ var oldCanvasHeight = Math.floor(this.imageEl.OriginHeight * oldScaleLevel);
+
+ var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - oldCanvasWidth) / 2);
+ var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - oldCanvasHeight) / 2);
+
+ var leftDiff = newCenterLeft - oldCenterLeft;
+ var topDiff = newCenterTop - oldCenterTop;
+
+ var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+ var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+
+ this.previewEl.setLeft(newPreviewLeft);
+ this.previewEl.setTop(newPreviewTop);
+
+ },
+
+ onMouseDown : function(e)
+ {
+ e.stopEvent();
+
+ this.dragable = true;
+ this.pinching = false;
+
+ if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
+ this.dragable = false;
+ return;
+ }
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
+ },
+
+ onMouseMove : function(e)
+ {
+ e.stopEvent();
+
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ if (!this.dragable){
+ return;
+ }
+
+ var maxPaddingLeft = this.canvasEl.width / 0.9 * 0.05;
+ var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
+
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+ maxPaddingLeft = (this.canvasEl.height * this.minWidth / this.minHeight - this.canvasEl.width) / 2 + maxPaddingLeft;
+ }
+
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+ maxPaddingTop = (this.canvasEl.width * this.minHeight / this.minWidth - this.canvasEl.height) / 2 + maxPaddingTop;
+ }
+
+ var minX = Math.ceil(this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - this.canvasEl.width - maxPaddingLeft);
+ var minY = Math.ceil(this.thumbEl.getTop(true) + this.thumbEl.getHeight() - this.canvasEl.height - maxPaddingTop);
+
+ var maxX = Math.ceil(this.thumbEl.getLeft(true) + maxPaddingLeft);
+ var maxY = Math.ceil(this.thumbEl.getTop(true) + maxPaddingTop);
+
+ if(minX > maxX) {
+ var tempX = minX;
+ minX = maxX;
+ maxX = tempX;
+ }
+
+ if(minY > maxY) {
+ var tempY = minY;
+ minY = maxY;
+ maxY = tempY;
+ }
+
+ var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
+ x = x - this.mouseX;
+ y = y - this.mouseY;
+
+ var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+ var bgY = Math.ceil(y + this.previewEl.getTop(true));
+
+ bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
+ bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+
+ this.previewEl.setLeft(bgX);
+ this.previewEl.setTop(bgY);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+ },
+
+ onMouseUp : function(e)
+ {
+ e.stopEvent();
+
+ this.dragable = false;
+ },
+
+ onMouseWheel : function(e)
+ {
+ e.stopEvent();
+
+ this.startScale = this.scale;
+ this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1);
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+
+ this.draw();
+
+ return;
+ },
+
+ zoomable : function()
+ {
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ if(this.minWidth < this.minHeight){
+ minScale = this.thumbEl.getHeight() / this.minHeight;
+ }
+
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
-</code></pre>
- * The tpl tag:
-<pre><code>
- <tpl for="a_variable or condition.."></tpl>
- <tpl if="a_variable or condition"></tpl>
- <tpl exec="some javascript"></tpl>
- <tpl name="named_template"></tpl> (experimental)
-
- <tpl for="."></tpl> - just iterate the property..
- <tpl for=".."></tpl> - iterates with the parent (probably the template)
-</code></pre>
- *
- */
-Roo.XTemplate = function()
-{
- Roo.XTemplate.superclass.constructor.apply(this, arguments);
- if (this.html) {
- this.compile();
- }
-};
+ var maxWidth = this.imageEl.OriginWidth;
+ var maxHeight = this.imageEl.OriginHeight;
-Roo.extend(Roo.XTemplate, Roo.Template, {
+ var newCanvasWidth = Math.floor(this.imageEl.OriginWidth * this.getScaleLevel());
+ var newCanvasHeight = Math.floor(this.imageEl.OriginHeight * this.getScaleLevel());
- /**
- * The various sub templates
- */
- tpls : false,
- /**
- *
- * basic tag replacing syntax
- * WORD:WORD()
- *
- * // you can fake an object call by doing this
- * x.t:(test,tesT)
- *
- */
- re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+ var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
- /**
- * compile the template
- *
- * This is not recursive, so I'm not sure how nested templates are really going to be handled..
- *
- */
- compile: function()
+ var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - newCanvasWidth) / 2);
+ var newCenterTop = Math.ceil((this.bodyEl.getHeight() - newCanvasHeight) / 2);
+
+ var leftDiff = newCenterLeft - oldCenterLeft;
+ var topDiff = newCenterTop - oldCenterTop;
+
+ var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+ var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+
+ var paddingLeft = newPreviewLeft - this.thumbEl.getLeft(true);
+ var paddingTop = newPreviewTop - this.thumbEl.getTop(true);
+
+ var paddingRight = this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - newCanvasWidth - newPreviewLeft;
+ var paddingBottom = this.thumbEl.getTop(true) + this.thumbEl.getHeight() - newCanvasHeight - newPreviewTop;
+
+ var maxPaddingLeft = newCanvasWidth / 0.9 * 0.05;
+ var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
+
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+ maxPaddingLeft = (newCanvasHeight * this.minWidth / this.minHeight - newCanvasWidth) / 2 + maxPaddingLeft;
+ }
+
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+ maxPaddingTop = (newCanvasWidth * this.minHeight / this.minWidth - newCanvasHeight) / 2 + maxPaddingTop;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minWidth && height < this.minHeight)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minHeight && height < this.minWidth)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ // for zoom out
+ paddingLeft > maxPaddingLeft ||
+ paddingRight > maxPaddingLeft ||
+ paddingTop > maxPaddingTop ||
+ paddingBottom > maxPaddingTop ||
+ // for zoom in
+ width > maxWidth ||
+ height > maxHeight
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width < this.minHeight ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minWidth ||
+ height > this.imageEl.OriginHeight
+ )
+ ){
+ return false;
+ }
+
+ return true;
+
+ },
+
+ onRotateLeft : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
+
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
+ return false;
+ }
+
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'left');
+
+ },
+
+ onRotateRight : function(e)
{
- var s = this.html;
-
- s = ['<tpl>', s, '</tpl>'].join('');
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
+
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
+ return false;
+ }
+
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'right');
+ },
- var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
- nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
- ifRe = /^<tpl\b[^>]*?if="(.*?)"/,
- execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
- namedRe = /^<tpl\b[^>]*?name="(\w+)"/, // named templates..
- m,
- id = 0,
- tpls = [];
+ onRotateFail : function()
+ {
+ this.errorEl.show(true);
+
+ var _this = this;
+
+ (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
+ },
- while(true == !!(m = s.match(re))){
- var forMatch = m[0].match(nameRe),
- ifMatch = m[0].match(ifRe),
- execMatch = m[0].match(execRe),
- namedMatch = m[0].match(namedRe),
+ draw : function()
+ {
+ this.previewEl.dom.innerHTML = '';
+
+ var canvasEl = document.createElement("canvas");
+
+ var contextEl = canvasEl.getContext("2d");
+
+ canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+ var center = this.imageEl.OriginWidth / 2;
+
+ if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+ canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+ center = this.imageEl.OriginHeight / 2;
+ }
+
+ contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
+
+ contextEl.translate(center, center);
+ contextEl.rotate(this.rotate * Math.PI / 180);
+
+ contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ this.canvasEl = document.createElement("canvas");
+
+ this.contextEl = this.canvasEl.getContext("2d");
+
+ switch (this.rotate) {
+ case 0 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 90 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 180 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 270 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ default :
+ break;
+ }
+
+ this.previewEl.appendChild(this.canvasEl);
+
+ this.setCanvasPosition(false);
+ },
+
+ crop : function()
+ {
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ var imageCanvas = document.createElement("canvas");
+
+ var imageContext = imageCanvas.getContext("2d");
+
+ imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+ imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+
+ var center = imageCanvas.width / 2;
+
+ imageContext.translate(center, center);
+
+ imageContext.rotate(this.rotate * Math.PI / 180);
+
+ imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ var canvas = document.createElement("canvas");
+
+ var context = canvas.getContext("2d");
+
+ canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+
+ canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
+
+ switch (this.rotate) {
+ case 0 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+ var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ if(canvas.width > this.outputMaxWidth) {
+ var scale = this.outputMaxWidth / canvas.width;
+ canvas.width = canvas.width * scale;
+ canvas.height = canvas.height * scale;
+ context.scale(scale, scale);
+ }
+
+ context.fillStyle = 'white';
+ context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel());
+
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 90 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 180 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
- exp = null,
- fn = null,
- exec = null,
- name = forMatch && forMatch[1] ? forMatch[1] : '';
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
- if (ifMatch) {
- // if - puts fn into test..
- exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
- if(exp){
- fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 270 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
}
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ default :
+ break;
+ }
+
+ this.cropData = canvas.toDataURL(this.cropType);
+
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
+ }
+
+ return;
+
+ },
+
+ setThumbBoxSize : function()
+ {
+ var width, height;
+
+ if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+ width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+ height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+
+ this.minWidth = width;
+ this.minHeight = height;
+
+ if(this.rotate == 90 || this.rotate == 270){
+ this.minWidth = height;
+ this.minHeight = width;
}
+ }
+
+ height = this.windowSize;
+ width = Math.ceil(this.minWidth * height / this.minHeight);
+
+ if(this.minWidth > this.minHeight){
+ width = this.windowSize;
+ height = Math.ceil(this.minHeight * width / this.minWidth);
+ }
+
+ this.thumbEl.setStyle({
+ width : width + 'px',
+ height : height + 'px'
+ });
+
+ return;
- if (execMatch) {
- // exec - calls a function... returns empty if true is returned.
- exp = execMatch && execMatch[1] ? execMatch[1] : null;
- if(exp){
- exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ },
+
+ setThumbBoxPosition : function()
+ {
+ var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
+ var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
+
+ this.thumbEl.setLeft(x);
+ this.thumbEl.setTop(y);
+
+ },
+
+ baseRotateLevel : function()
+ {
+ this.baseRotate = 1;
+
+ if(
+ typeof(this.exif) != 'undefined' &&
+ typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
+ [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
+ ){
+ this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
+ }
+
+ this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
+
+ },
+
+ baseScaleLevel : function()
+ {
+ var width, height;
+
+ if(this.isDocument){
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginHeight;
}
+
+ return;
+ }
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
}
+
+ return;
+ }
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginHeight;
- if (name) {
- // for =
- switch(name){
- case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
- case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
- default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginWidth;
}
}
- var uid = namedMatch ? namedMatch[1] : id;
+ return;
+ }
+
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- tpls.push({
- id: namedMatch ? namedMatch[1] : id,
- target: name,
- exec: exec,
- test: fn,
- body: m[1] || ''
- });
- if (namedMatch) {
- s = s.replace(m[0], '');
- } else {
- s = s.replace(m[0], '{xtpl'+ id + '}');
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
}
- ++id;
+
}
- this.tpls = [];
- for(var i = tpls.length-1; i >= 0; --i){
- this.compileTpl(tpls[i]);
- this.tpls[tpls[i].id] = tpls[i];
+
+ if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
+ this.baseScale = width / this.minWidth;
}
- this.master = tpls[tpls.length-1];
- return this;
+
+ return;
},
- /**
- * same as applyTemplate, except it's done to one of the subTemplates
- * when using named templates, you can do:
- *
- * var str = pl.applySubTemplate('your-name', values);
- *
- *
- * @param {Number} id of the template
- * @param {Object} values to apply to template
- * @param {Object} parent (normaly the instance of this object)
- */
- applySubTemplate : function(id, values, parent)
+
+ getScaleLevel : function()
{
+ return this.baseScale * Math.pow(1.02, this.scale);
+ },
+
+ onTouchStart : function(e)
+ {
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
+ }
+ var touches = e.browserEvent.touches;
- var t = this.tpls[id];
+ if(!touches){
+ return;
+ }
+ if(touches.length == 1){
+ this.onMouseDown(e);
+ return;
+ }
- try {
- if(t.test && !t.test.call(this, values, parent)){
- return '';
- }
- } catch(e) {
- Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.test);
- return ''
+ if(touches.length != 2){
+ return;
}
- try {
-
- if(t.exec && t.exec.call(this, values, parent)){
- return '';
- }
- } catch(e) {
- Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.exec);
- return ''
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
}
- try {
- var vs = t.target ? t.target.call(this, values, parent) : values;
- parent = t.target ? values : parent;
- if(t.target && vs instanceof Array){
- var buf = [];
- for(var i = 0, len = vs.length; i < len; i++){
- buf[buf.length] = t.compiled.call(this, vs[i], parent);
- }
- return buf.join('');
- }
- return t.compiled.call(this, vs, parent);
- } catch (e) {
- Roo.log("Xtemplate.applySubTemplate : Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.compiled);
- return '';
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.startDistance = Math.sqrt(x + y);
+
+ this.startScale = this.scale;
+
+ this.pinching = true;
+ this.dragable = false;
+
+ },
+
+ onTouchMove : function(e)
+ {
+ if(!this.pinching && !this.dragable){
+ return;
+ }
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
+ }
+
+ if(this.dragable){
+ this.onMouseMove(e);
+ return;
}
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
+ }
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.endDistance = Math.sqrt(x + y);
+
+ this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+ this.draw();
+
},
-
- compileTpl : function(tpl)
+
+ onTouchEnd : function(e)
{
- var fm = Roo.util.Format;
- var useF = this.disableFormats !== true;
- var sep = Roo.isGecko ? "+" : ",";
- var undef = function(str) {
- Roo.log("Property not found :" + str);
- return '';
+ this.pinching = false;
+ this.dragable = false;
+
+ },
+
+ process : function(file, crop)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
};
- var fn = function(m, name, format, args)
- {
- //Roo.log(arguments);
- args = args ? args.replace(/\\'/g,"'") : args;
- //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
- if (typeof(format) == 'undefined') {
- format= 'htmlEncode';
- }
- if (format == 'raw' ) {
- format = false;
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
}
-
- if(name.substr(0, 4) == 'xtpl'){
- return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ var blobBin = atob(crop.split(',')[1]);
+ var array = [];
+ for(var i = 0; i < blobBin.length; i++) {
+ array.push(blobBin.charCodeAt(i));
}
+ var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
+ formData.append(this.paramName, croppedFile, file.name);
+ }
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
+ },
+
+ prepare : function(file)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.file = false;
+ this.exif = {};
+
+ if(typeof(file) === 'string'){
+ this.loadCanvas(file);
+ return;
+ }
+
+ if(!file || !this.urlAPI){
+ return;
+ }
+
+ this.file = file;
+ if(typeof(file.type) != 'undefined' && file.type.length != 0) {
+ this.cropType = file.type;
+ }
+
+ var _this = this;
+
+ if(this.fireEvent('prepare', this, this.file) != false){
- // build an array of options to determine if value is undefined..
-
- // basically get 'xxxx.yyyy' then do
- // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
- // (function () { Roo.log("Property not found"); return ''; })() :
- // ......
-
- var udef_ar = [];
- var lookfor = '';
- Roo.each(name.split('.'), function(st) {
- lookfor += (lookfor.length ? '.': '') + st;
- udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
- });
-
- var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
-
+ var reader = new FileReader();
- if(format && useF){
+ reader.onload = function (e) {
+ if (e.target.error) {
+ Roo.log(e.target.error);
+ return;
+ }
- args = args ? ',' + args : "";
-
- if(format.substr(0, 5) != "this."){
- format = "fm." + format + '(';
- }else{
- format = 'this.call("'+ format.substr(5) + '", ';
- args = ", values";
+ var buffer = e.target.result,
+ dataView = new DataView(buffer),
+ offset = 2,
+ maxOffset = dataView.byteLength - 4,
+ markerBytes,
+ markerLength;
+
+ if (dataView.getUint16(0) === 0xffd8) {
+ while (offset < maxOffset) {
+ markerBytes = dataView.getUint16(offset);
+
+ if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
+ markerLength = dataView.getUint16(offset + 2) + 2;
+ if (offset + markerLength > dataView.byteLength) {
+ Roo.log('Invalid meta data: Invalid segment size.');
+ break;
+ }
+
+ if(markerBytes == 0xffe1){
+ _this.parseExifData(
+ dataView,
+ offset,
+ markerLength
+ );
+ }
+
+ offset += markerLength;
+
+ continue;
+ }
+
+ break;
+ }
+
}
- return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
- }
-
- if (args.length) {
- // called with xxyx.yuu:(test,test)
- // change to ()
- return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
+ var url = _this.urlAPI.createObjectURL(_this.file);
+
+ _this.loadCanvas(url);
+
+ return;
}
- // raw.. - :raw modifier..
- return "'"+ sep + udef_st + name + ")"+sep+"'";
- };
- var body;
- // branched to use + in gecko and [].join() in others
- if(Roo.isGecko){
- body = "tpl.compiled = function(values, parent){ with(values) { return '" +
- tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
- "';};};";
- }else{
- body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
- body.push(tpl.body.replace(/(\r\n|\n)/g,
- '\\n').replace(/'/g, "\\'").replace(this.re, fn));
- body.push("'].join('');};};");
- body = body.join('');
+ reader.readAsArrayBuffer(this.file);
+
}
- Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
-
- /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
- eval(body);
+ },
+
+ parseExifData : function(dataView, offset, length)
+ {
+ var tiffOffset = offset + 10,
+ littleEndian,
+ dirOffset;
+
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
- return this;
+ // Check for the ASCII code for "Exif" (0x45786966):
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
+ if (tiffOffset + 8 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid segment size.');
+ return;
+ }
+ // Check for the two null bytes:
+ if (dataView.getUint16(offset + 8) !== 0x0000) {
+ Roo.log('Invalid Exif data: Missing byte alignment offset.');
+ return;
+ }
+ // Check the byte alignment:
+ switch (dataView.getUint16(tiffOffset)) {
+ case 0x4949:
+ littleEndian = true;
+ break;
+ case 0x4D4D:
+ littleEndian = false;
+ break;
+ default:
+ Roo.log('Invalid Exif data: Invalid byte alignment marker.');
+ return;
+ }
+ // Check for the TIFF tag marker (0x002A):
+ if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
+ Roo.log('Invalid Exif data: Missing TIFF marker.');
+ return;
+ }
+ // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+ dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+
+ this.parseExifTags(
+ dataView,
+ tiffOffset,
+ tiffOffset + dirOffset,
+ littleEndian
+ );
},
-
- applyTemplate : function(values){
- return this.master.compiled.call(this, values, {});
- //var s = this.subs;
+
+ parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
+ {
+ var tagsNumber,
+ dirEndOffset,
+ i;
+ if (dirOffset + 6 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory offset.');
+ return;
+ }
+ tagsNumber = dataView.getUint16(dirOffset, littleEndian);
+ dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+ if (dirEndOffset + 4 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory size.');
+ return;
+ }
+ for (i = 0; i < tagsNumber; i += 1) {
+ this.parseExifTag(
+ dataView,
+ tiffOffset,
+ dirOffset + 2 + 12 * i, // tag offset
+ littleEndian
+ );
+ }
+ // Return the offset to the next directory:
+ return dataView.getUint32(dirEndOffset, littleEndian);
},
-
- apply : function(){
- return this.applyTemplate.apply(this, arguments);
+
+ parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
+ {
+ var tag = dataView.getUint16(offset, littleEndian);
+
+ this.exif[tag] = this.getExifValue(
+ dataView,
+ tiffOffset,
+ offset,
+ dataView.getUint16(offset + 2, littleEndian), // tag type
+ dataView.getUint32(offset + 4, littleEndian), // tag length
+ littleEndian
+ );
+ },
+
+ getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
+ {
+ var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
+ tagSize,
+ dataOffset,
+ values,
+ i,
+ str,
+ c;
+
+ if (!tagType) {
+ Roo.log('Invalid Exif data: Invalid tag type.');
+ return;
+ }
+
+ tagSize = tagType.size * length;
+ // Determine if the value is contained in the dataOffset bytes,
+ // or if the value at the dataOffset is a pointer to the actual data:
+ dataOffset = tagSize > 4 ?
+ tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
+ if (dataOffset + tagSize > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid data offset.');
+ return;
+ }
+ if (length === 1) {
+ return tagType.getValue(dataView, dataOffset, littleEndian);
+ }
+ values = [];
+ for (i = 0; i < length; i += 1) {
+ values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ }
+
+ if (tagType.ascii) {
+ str = '';
+ // Concatenate the chars:
+ for (i = 0; i < values.length; i += 1) {
+ c = values[i];
+ // Ignore the terminating NULL byte(s):
+ if (c === '\u0000') {
+ break;
+ }
+ str += c;
+ }
+ return str;
+ }
+ return values;
}
+
+});
- });
-
-Roo.XTemplate.from = function(el){
- el = Roo.getDom(el);
- return new Roo.XTemplate(el.value || el.innerHTML);
-};
\ No newline at end of file
+Roo.apply(Roo.dialog.UploadCropbox, {
+ tags : {
+ 'Orientation': 0x0112
+ },
+
+ Orientation: {
+ 1: 0, //'top-left',
+// 2: 'top-right',
+ 3: 180, //'bottom-right',
+// 4: 'bottom-left',
+// 5: 'left-top',
+ 6: 90, //'right-top',
+// 7: 'right-bottom',
+ 8: 270 //'left-bottom'
+ },
+
+ exifTagTypes : {
+ // byte, 8-bit unsigned int:
+ 1: {
+ getValue: function (dataView, dataOffset) {
+ return dataView.getUint8(dataOffset);
+ },
+ size: 1
+ },
+ // ascii, 8-bit byte:
+ 2: {
+ getValue: function (dataView, dataOffset) {
+ return String.fromCharCode(dataView.getUint8(dataOffset));
+ },
+ size: 1,
+ ascii: true
+ },
+ // short, 16 bit int:
+ 3: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint16(dataOffset, littleEndian);
+ },
+ size: 2
+ },
+ // long, 32 bit int:
+ 4: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // rational = two long values, first is numerator, second is denominator:
+ 5: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian) /
+ dataView.getUint32(dataOffset + 4, littleEndian);
+ },
+ size: 8
+ },
+ // slong, 32 bit signed int:
+ 9: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // srational, two slongs, first is numerator, second is denominator:
+ 10: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian) /
+ dataView.getInt32(dataOffset + 4, littleEndian);
+ },
+ size: 8
+ }
+ },
+
+ footer : {
+ STANDARD : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-picture',
+ action : 'picture',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-picture-o"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ DOCUMENT : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-download',
+ action : 'download',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-download"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-crop',
+ action : 'crop',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-crop"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-trash',
+ action : 'trash',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-trash"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ ROTATOR : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ CENTER : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-center',
+ action : 'center',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : 'CENTER'
+ }
+ ]
+ }
+ ]
+ }
+});
projects / roojs1 / blobdiff