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;
*/
actionMode : "el",
+ /**
+ * @cfg {String} style
+ * css styles to add to component
+ * eg. text-align:right;
+ */
+ style : false,
+
/** @private */
getActionEl : function(){
return this[this.actionMode];
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();
}
-
});Roo.rtf = {}; // namespace
Roo.rtf.Hex = function(hex)
{
replaceDocBullets : function(doc)
{
// this is a bit odd - but it appears some indents use ql-indent-1
- //Roo.log(doc.innerHTML);
+ //Roo.log(doc.innerHTML);
+
+ var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
+ }
- var listpara = doc.getElementsByClassName('MsoListParagraphCxSpFirst');
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
+ }
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
+ }
+ listpara = Array.from(doc.getElementsByClassName('ql-indent-1'));
for( var i = 0; i < listpara.length; i ++) {
- listpara.item(i).className = "MsoListParagraph";
+ listpara[i].className = "MsoListParagraph";
}
+
// this is a bit hacky - we had one word document where h2 had a miso-list attribute.
- var htwo = doc.getElementsByTagName('h2');
+ var htwo = Array.from(doc.getElementsByTagName('h2'));
for( var i = 0; i < htwo.length; i ++) {
- if (htwo.item(i).hasAttribute('style') && htwo.item(i).getAttribute('style').match(/mso-list:/)) {
- htwo.item(i).className = "MsoListParagraph";
+ if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
+ htwo[i].className = "MsoListParagraph";
}
}
- listpara = doc.getElementsByClassName('MsoNormal');
- while(listpara.length) {
- if (listpara.item(0).hasAttribute('style') && listpara.item(0).getAttribute('style').match(/mso-list:/)) {
- listpara.item(0).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.item(0).className = "MsoNormalx";
+ listpara[i].className = "MsoNormalx";
}
}
- listpara = doc.getElementsByClassName('ql-indent-1');
- while(listpara.length) {
- this.replaceDocBullet(listpara.item(0));
- }
+
listpara = doc.getElementsByClassName('MsoListParagraph');
+ // Roo.log(doc.innerHTML);
+
+
+
while(listpara.length) {
this.replaceDocBullet(listpara.item(0));
doc = parent.ownerDocument,
items = [];
-
+ var listtype = 'ul';
while (ns) {
if (ns.nodeType != 1) {
ns = ns.nextSibling;
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';
+ }
+ }
+
continue;
}
var spans = ns.getElementsByTagName('span');
return;
}
- var ul = parent.ownerDocument.createElement('ul'); // what about number lists...
+ var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
parent.insertBefore(ul, p);
var lvl = 0;
var stack = [ ul ];
}
-
+ var num = 1;
var style = {};
for(var i = 0; i < spans.length; 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;
}
if (nlvl > lvl) {
//new indent
- var nul = doc.createElement('ul'); // what about number lists...
+ var nul = doc.createElement(listtype); // what about number lists...
if (!last_li) {
last_li = doc.createElement('li');
stack[lvl].appendChild(last_li);
}
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;
if (this.enableBlocks) {
new Roo.htmleditor.FilterBlock({ node : div });
}
+
+ var html = div.innerHTML;
+
//?? tidy?
- var tidy = new Roo.htmleditor.TidySerializer({
- inner: true
- });
- var html = tidy.serialize(div);
+ 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){
new Roo.htmleditor.FilterStyleToTag({ node : d });
new Roo.htmleditor.FilterAttributes({
node : d,
- attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width'],
+ 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});
for(id in values){
if(typeof values[id] != 'function' && (field = this.findField(id))){
+
+
+
if (field.setFromData &&
field.valueField &&
field.displayField &&
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]);
}
/**
* 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
+ * @param {Boolean} asString (def)
* @return {Object}
*/
getValues : function(asString)
* The function used to validate email addresses
* @param {String} value The email address
*/
- 'email' : function(v){
+ email : function(v){
return email.test(v);
},
/**
* The error text to display when the email validation function returns false
* @type String
*/
- 'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
+ emailText : 'This field should be an e-mail address in the format "user@domain.com"',
/**
* The keystroke filter mask to be applied on email input
* @type RegExp
*/
- 'emailMask' : /[a-z0-9_\.\-@]/i,
+ emailMask : /[a-z0-9_\.\-@]/i,
/**
* The function used to validate URLs
* @param {String} value The URL
*/
- 'url' : function(v){
+ url : function(v){
return url.test(v);
},
/**
* The error text to display when the url validation function returns false
* @type String
*/
- 'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
+ urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
/**
* The function used to validate alpha values
* @param {String} value The value
*/
- 'alpha' : function(v){
+ alpha : function(v){
return alpha.test(v);
},
/**
* The error text to display when the alpha validation function returns false
* @type String
*/
- 'alphaText' : 'This field should only contain letters and _',
+ alphaText : 'This field should only contain letters and _',
/**
* The keystroke filter mask to be applied on alpha input
* @type RegExp
*/
- 'alphaMask' : /[a-z_]/i,
+ alphaMask : /[a-z_]/i,
/**
* The function used to validate alphanumeric values
* @param {String} value The value
*/
- 'alphanum' : function(v){
+ alphanum : function(v){
return alphanum.test(v);
},
/**
* The error text to display when the alphanumeric validation function returns false
* @type String
*/
- 'alphanumText' : 'This field should only contain letters, numbers and _',
+ alphanumText : 'This field should only contain letters, numbers and _',
/**
* The keystroke filter mask to be applied on alphanumeric input
* @type RegExp
*/
- 'alphanumMask' : /[a-z0-9_]/i
+ alphanumMask : /[a-z0-9_]/i
};
}();//<script type="text/javascript">
case 'download' :
this.download(e);
break;
+ case 'center' :
+ this.center(e);
+ break;
default :
break;
}
{
this.fireEvent('download', this);
},
+
+ center : function(e)
+ {
+ this.setCanvasPosition();
+ },
loadCanvas : function(src)
{
},
- setCanvasPosition : function()
+ setCanvasPosition : function(center = true)
{
if(!this.canvasEl){
return;
}
+
+ var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var newCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
+
+ if(center) {
+ this.previewEl.setLeft(newCenterLeft);
+ this.previewEl.setTop(newCenterTop);
+
+ return;
+ }
- var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
- var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
-
- this.previewEl.setLeft(pw);
- this.previewEl.setTop(ph);
+ 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);
},
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));
- var minY = Math.ceil(this.thumbEl.getTop(true));
+ 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(minX + this.thumbEl.getWidth() - this.canvasEl.width);
- var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
+ var maxX = Math.ceil(this.thumbEl.getLeft(true) + maxPaddingLeft);
+ var maxY = Math.ceil(this.thumbEl.getTop(true) + maxPaddingTop);
if(minX > maxX) {
var tempX = minX;
var maxWidth = this.imageEl.OriginWidth;
var maxHeight = this.imageEl.OriginHeight;
+
+
+ var newCanvasWidth = Math.floor(this.imageEl.OriginWidth * this.getScaleLevel());
+ var newCanvasHeight = Math.floor(this.imageEl.OriginHeight * this.getScaleLevel());
+
+ var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
+
+ 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.isDocument &&
(this.rotate == 0 || this.rotate == 180) &&
(
- (this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight) && width < this.minWidth ||
- (this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight) && height < this.minHeight ||
+ // for zoom out
+ paddingLeft > maxPaddingLeft ||
+ paddingRight > maxPaddingLeft ||
+ paddingTop > maxPaddingTop ||
+ paddingBottom > maxPaddingTop ||
+ // for zoom in
width > maxWidth ||
height > maxHeight
)
this.previewEl.appendChild(this.canvasEl);
- this.setCanvasPosition();
+ this.setCanvasPosition(false);
},
crop : function()
}
]
}
+ ],
+ CENTER : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-center',
+ action : 'center',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : 'CENTER'
+ }
+ ]
+ }
]
}
});