})(); Roo.bootstrap.menu = Roo.bootstrap.menu || {};
Roo.bootstrap.nav = {};
-Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};/*
+Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};
+Roo.htmleditor = {};
+Roo.namespace('Roo.bootstrap.form.HtmlEditorToolbar');
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
if (!skip_children) {
for(var i =0;i < items.length;i++) {
// Roo.log(['add child', items[i]]);
- nitems.push(cn.addxtype(Roo.apply({}, items[i])));
+ nitems.push(cn.addxtype(items[i].xns == false ? items[i] : Roo.apply({}, items[i])));
}
}
imgResponsive: true,
border: '',
- src: 'about:blank',
+ src: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
href: false,
target: false,
xsUrl: '',
var id = false;
if(typeof(renderer) !== 'undefined'){
- value = renderer(d.data[cm.getDataIndex(i)], false, d);
+ value = renderer.call(config, d.data[cm.getDataIndex(i)], false, d);
}
// if object are returned, then they are expected to be Roo.bootstrap.Component instances
// and are rendered into the cells after the row is rendered - using the id for the element.
// closure these in so they are only created once.
var alpha = /^[a-zA-Z_]+$/;
var alphanum = /^[a-zA-Z0-9_]+$/;
- var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
- var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+ var email = /^([\w'-]+)(\.[\w'-]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
+ var url = /^(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+ var urlWeb = /^((https?):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
// All these messages and functions are configurable
return {
url : function(v){
return url.test(v);
},
+ /**
+ * The funciton used to validate URLs (only allow schemes 'https' and 'http')
+ * @param {String} v The URL
+ */
+ urlWeb : function(v) {
+ return urlWeb.test(v);
+ },
/**
* The error text to display when the url validation function returns false
* @type String
cls: 'glyphicon form-control-feedback'
};
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ if(this.hasFeedback && this.inputType != 'hidden'){
inputblock = {
cls : 'has-feedback',
});
}
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ if(this.hasFeedback && this.inputType != 'hidden'){
inputblock.cls += ' has-feedback';
inputblock.cn.push(feedback);
}
}
this.inputEl().on('change', this.onChange, this);
+
+ if(this.hasFeedback && this.inputType != 'hidden'){
+
+ var feedback = this.el.select('.form-control-feedback', true).first();
+
+ if(feedback) {
+ feedback.hide();
+ }
+ }
},
filterValidation : function(e){
*/
reset : function(){
this.setValue(this.originalValue);
- this.validate();
+ // this.validate();
+ this.el.removeClass([this.invalidClass, this.validClass]);
+ this.inputEl().removeClass(['is-valid', 'is-invalid']);
+
+ if(this.hasFeedback && this.inputType != 'hidden'){
+
+ var feedback = this.el.select('.form-control-feedback', true).first();
+
+ if(feedback){
+ this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
+ feedback.update('');
+ feedback.hide();
+ }
+
+ }
},
/**
* Returns the name of the field
* @return {Mixed} value The field value
*/
getValue : function(){
-
var v = this.inputEl().getValue();
-
return v;
},
/**
}
- this.el.removeClass([this.invalidClass, 'is-invalid']);
+ this.inputEl().removeClass([this.invalidClass, 'is-invalid']);
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ if(this.hasFeedback && this.inputType != 'hidden'){
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
+
+ feedback.update('');
+ feedback.hide();
}
}
* Mark this field as valid
*/
markValid : function()
- {
+ {
if(!this.el || this.preventMark){ // not rendered...
return;
}
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
+ feedback.update('');
+ feedback.hide();
}
if(this.indicator){
this.inputEl().addClass('is-valid');
}
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
+ if(this.hasFeedback && this.inputType != 'hidden'){
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass(
[this.invalidFeedbackClass, this.validFeedbackClass]);
+ feedback.update('');
+ feedback.hide();
}
if(this.disabled){
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ if(this.hasFeedback && this.inputType != 'hidden'){
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
- if(this.getValue().length || this.forceFeedback){
- this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
+ this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
+
+ feedback.update(typeof(msg) == 'undefined' ? this.invalidText : msg);
+
+ if(!this.allowBlank && !this.getRawValue().length){
+ feedback.update(this.blankText);
+ }
+
+ if(feedback.dom.innerHTML) {
+ feedback.show();
}
}
var inputblock = input;
- if(this.hasFeedback && !this.allowBlank){
+ if(this.hasFeedback){
var feedback = {
tag: 'span',
inputblock.cn.push(input);
- if(this.hasFeedback && !this.allowBlank){
+ if(this.hasFeedback){
inputblock.cls += ' has-feedback';
inputblock.cn.push(feedback);
}
this.el.removeClass( this.validClass);
this.inputEl().removeClass('is-invalid');
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ if(this.hasFeedback && this.inputType != 'hidden'){
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
+
+ feedback.update('');
+ feedback.hide();
}
}
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
+ feedback.update('');
+ feedback.hide();
}
if(this.disabled || this.allowBlank){
}
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
+ if(this.hasFeedback && this.inputType != 'hidden'){
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
+ feedback.update('');
+ feedback.hide();
}
- if(this.disabled || this.allowBlank){
+ if(this.disabled){
return;
}
}
// fixme ... this may be depricated need to test..
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ if(this.hasFeedback && this.inputType != 'hidden'){
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
- if(this.getValue().length || this.forceFeedback){
- this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
+ this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
+
+ feedback.update(this.invalidText);
+
+ if(!this.allowBlank && !this.getRawValue().length){
+ feedback.update(this.blankText);
+ }
+
+ if(feedback.dom.innerHTML) {
+ feedback.show();
}
}
});
-Roo.bootstrap.form.CardUploader.ID = -1;/*
+Roo.bootstrap.form.CardUploader.ID = -1;/**
+ *
+ * @class Roo.bootstrap.form.MultiLineTag
+ * @param {Object} config The config object
+ *
+ */
+
+Roo.bootstrap.form.MultiLineTag = function(config){
+ Roo.bootstrap.form.MultiLineTag.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event beforeload
+ * Fires before a request is made for a new data object. If the beforeload handler returns false
+ * the load action will be canceled.
+ * @param {Roo.boostrap.form.MultiLineTag} this
+ * @param {Store} store
+ * @param {Object} options The loading options that were specified (see {@link #load} for details)
+ */
+ beforeload : true
+ });
+};
+
+Roo.extend(Roo.bootstrap.form.MultiLineTag, Roo.bootstrap.form.Input, {
+ tagRows : [],
+ minimumRow : 2,
+
+ // for combo box
+ displayField : '',
+ valueField : '',
+ placeholder : '',
+ queryParam : '',
+ listWidth : 300,
+ minChars : 2,
+
+ // for combo box store
+ url : undefined,
+ fields : [],
+
+
+
+ getAutoCreate : function()
+ {
+ var config = {
+ cls : 'roo-multi-line-tag form-group'
+ };
+
+ config = this.getAutoCreateLabel( config, {
+ cls : 'roo-multi-line-tag-container'
+ } );
+
+ return config;
+ },
+
+ initEvents : function()
+ {
+ this.tagRows = [];
+
+ for (var i = 0; i < this.minimumRow; i++) {
+ this.addTagRow();
+ }
+ },
+
+ addTagRow : function()
+ {
+ var _this = this;
+
+ var comboBox = Roo.factory({
+ xns: Roo.bootstrap.form,
+ xtype : 'ComboBox',
+ editable : true,
+ triggerAction: 'all',
+ minChars: _this.minChars,
+ displayField: _this.displayField,
+ valueField : _this.valueField,
+ listWidth: _this.listWidth,
+ placeholder : _this.placeholder,
+ queryParam : _this.queryParam,
+ store : {
+ xns : Roo.data,
+ xtype : 'Store',
+ listeners : {
+ beforeload : function(_self, options)
+ {
+ _this.fireEvent('beforeload', _this, _self, options);
+ }
+ },
+ proxy : {
+ xns : Roo.data,
+ xtype : 'HttpProxy',
+ method : 'GET',
+ url : _this.url
+ },
+ reader : {
+ xns : Roo.data,
+ xtype : 'JsonReader',
+ fields : _this.fields
+ }
+ },
+ listeners : {
+ 'render' : function (_self) {
+ _self.inputEl().on('keyup', function(e) {
+ if(_this.shouldAutoAddTagRow()) {
+ _this.addTagRow();
+ }
+ });
+ _self.inputEl().on('change', function(e) {
+ _this.fireEvent('change', _this, _this.getValue(), false);
+ _this.showHideRemoveBtn();
+
+ });
+ },
+ 'select' : function(_self, record, index) {
+ _this.fireEvent('change', _this, _this.getValue(), false);
+ }
+ }
+ });
+
+ var button = Roo.factory({
+ xns : Roo.bootstrap,
+ xtype : 'Button',
+ html : '-'
+ });
+
+ var row = {
+ xns : Roo.bootstrap,
+ xtype : 'Row',
+ items : [
+ comboBox,
+ button
+ ],
+ listeners : {
+ 'render' : function (_self) {
+ this.inputCb = comboBox;
+ this.removeBtn = button;
+
+ this.removeBtn.on('click', function() {
+ _this.removeTagRow(_self);
+ _this.fireEvent('change', _this, _this.getValue(), false);
+ });
+ }
+ }
+ };
+ this.tagRows.push(this.addxtype(row));
+
+ _this.showHideRemoveBtn();
+ },
+
+ // a new tags should be added automatically when all existing tags are not empty
+ shouldAutoAddTagRow : function()
+ {
+ var ret = true;
+
+ Roo.each(this.tagRows, function(r) {
+ if(r.inputCb.getRawValue() == '') {
+ ret = false;
+ }
+ });
+
+ return ret;
+ },
+
+ removeTagRow : function(row)
+ {
+ row.destroy();
+ this.tagRows.splice(this.tagRows.indexOf(row), 1);
+ this.showHideRemoveBtn();
+ },
+
+ // hide all remove buttons if there are {minimumRow} or less tags
+ // hide the remove button for empty tag
+ showHideRemoveBtn : function()
+ {
+ var _this = this;
+
+ Roo.each(this.tagRows, function (r) {
+
+ r.removeBtn.show();
+
+ if(_this.tagRows.length <= _this.minimumRow || r.inputCb.getRawValue() == '') {
+ r.removeBtn.hide();
+ }
+ });
+ },
+
+ getValue : function()
+ {
+ var _this = this;
+ var tags = [];
+ Roo.each(_this.tagRows, function(r) {
+ var value = r.inputCb.getRawValue();
+ if(value != '') {
+ var tag = {};
+ tag[_this.valueField] = r.inputCb.getRawValue();
+ tags.push(tag);
+ }
+ });
+
+ return JSON.stringify(tags);
+ },
+
+ setValue : function(json)
+ {
+
+ // remove all old tags
+ var oldTotal = this.tagRows.length;
+
+ for(var i = 0; i < oldTotal; i ++) {
+ this.removeTagRow(this.tagRows[0]);
+ }
+
+ // empty tag if invalid json
+ var arr = [];
+
+ try {
+ // set new tags
+ arr = JSON.parse(json);
+ }
+ catch {}
+
+ for (var i = 0; i < arr.length; i ++) {
+ this.addTagRow();
+ this.tagRows[i].inputCb.setRawValue(arr[i][this.valueField]);
+ }
+
+ // always add one extra empty tag
+ this.addTagRow();
+
+ // add empty tags until there are {minimumRow} tags
+ while(this.tagRows.length < this.minimumRow) {
+ this.addTagRow();
+ }
+
+ },
+
+ getChildContainer : function()
+ {
+ return Roo.select('.roo-multi-line-tag-container', true).elements[0];
+ }
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
*
* @param {Proxy}
- * @param {Object} return from JsonData.reader() - success, totalRecords, records
- * @param {Object} load options
+ * @param {Object} ret return data from JsonData.reader() - success, totalRecords, records
+ * @param {Object} opts - load Options
* @param {Object} jsonData from your request (normally this contains the Exception)
*/
loadexception : true
// thse are take from connection...
/**
- * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
+ * @cfg {String} url The default URL to be used for requests to the server. (defaults to undefined)
*/
/**
- * @cfg {Object} extraParams (Optional) An object containing properties which are used as
+ * @cfg {Object} extraParams An object containing properties which are used as
* extra parameters to each request made by this object. (defaults to undefined)
*/
/**
- * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
+ * @cfg {Object} defaultHeaders An object containing request headers which are added
* to each request made by this object. (defaults to undefined)
*/
/**
- * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
+ * @cfg {String} method (GET|POST) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
*/
/**
- * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
+ * @cfg {Number} timeout The timeout in milliseconds to be used for requests. (defaults to 30000)
*/
/**
- * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
+ * @cfg {Boolean} autoAbort Whether this request should abort any pending requests. (defaults to false)
* @type Boolean
*/
/**
* @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
*/
- maxHeight: 300,
+ // maxHeight: 300, // not used (change maxHeight in CSS. target the list using listClass)
/**
* @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
* query specified by the allQuery config option (defaults to 'query')
//this.list = new Roo.Layer({
// shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
//});
+
+ this.list.addClass(this.listClass);
var _this = this;
if (!this.editable) {
Roo.get(document).on('keydown', this.listKeyPress, this);
}
+
+ this.list.setStyle('maxHeight', 'calc(100% - ' + this.list.getTop() + 'px - 50px)');
this.fireEvent('expand', this);
},
* Create a new DateField
* @param {Object} config The config object
*/
-
+
Roo.bootstrap.form.DateField = function(config){
Roo.bootstrap.form.DateField.superclass.constructor.call(this, config);
this.addEvents({
* valid according to {@link Date#parseDate} (defaults to 'm/d/y').
*/
format : "m/d/y",
- /**
- * @cfg {String} altFormats
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
- * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
- */
- altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
weekStart : 0,
_events: [],
singleMode : false,
+
+ hiddenField : false,
+
+ /**
+ * @cfg {Boolean} editable False to prevent the user from typing text directly into the field (defaults to true)
+ */
+ editable: true,
UTCDate: function()
{
setUTCDate: function(d) {
this.date = d;
- this.setValue(this.formatDate(this.date));
+ this.setValue(this.date);
+ },
+
+ translateDates: function(lang)
+ {
+ var translation = Roo.bootstrap.form.DateField.dates[lang] = {
+ days: [],
+ daysShort: [],
+ daysMin: [],
+ months: [],
+ monthsShort: []
+ };
+
+ var locale = lang.replace('_', '-');
+
+ var is_latin = [ 'zh-hk', 'zh-cn', 'jp', 'ko' ].indexOf(locale.toLowerCase()) < 0;
+
+
+ // fill days
+ for(var i = 0; i < 7; i++) {
+ var date = new Date(2020, 0, 5 + i);
+
+ var day = new Intl.DateTimeFormat(locale, {
+ weekday : 'long'
+ }).format(date);
+
+ var dayShort = new Intl.DateTimeFormat(locale, {
+ weekday : 'short'
+ }).format(date);
+
+ var dayMin = new Intl.DateTimeFormat(locale, {
+ weekday : 'narrow'
+ }).format(date);
+
+ if(is_latin) {
+ dayShort = day.substring(0, 3);
+ dayMin = day.substring(0, 2);
+ }
+
+ translation.days.push(day);
+ translation.daysShort.push(dayShort);
+ translation.daysMin.push(dayMin);
+ }
+
+ // fill months
+ for(var i = 0; i < 12; i++) {
+ var date = new Date(2020, i);
+
+ var month = new Intl.DateTimeFormat(locale, {
+ month : 'long'
+ }).format(date);
+
+ var monthShort = new Intl.DateTimeFormat(locale, {
+ month : 'short'
+ }).format(date);
+
+ if(is_latin) {
+ monthShort = month.substring(0, 3);
+ }
+
+ translation.months.push(month);
+ translation.monthsShort.push(monthShort);
+ }
},
onRender: function(ct, position)
{
Roo.bootstrap.form.DateField.superclass.onRender.call(this, ct, position);
-
- this.language = this.language || 'en';
- this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : this.language.split('-')[0];
- this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : "en";
+
+ this.translateDates(this.language);
this.isRTL = Roo.bootstrap.form.DateField.dates[this.language].rtl || false;
this.format = this.format || 'm/d/y';
}
Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
- if(!this.calendarWeeks){
- v.remove();
- return;
- }
-
- v.dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
- v.attr('colspan', function(i, val){
- return parseInt(val) + 1;
- });
+ v.dom.innerHTML = Roo.bootstrap.form.DateField.todayText;
});
if(this.isInline) {
this.showPopup();
}
+
+ this.hiddenField = this.inputEl().insertSibling(
+ {tag : 'input', type : 'hidden', name : this.name},
+ 'before',
+ true
+ );
+ this.inputEl().dom.setAttribute('name', this.name + '____hidden___');
+
+ if(!this.editable) {
+ this.inputEl().dom.setAttribute('readOnly', true);
+ }
+
},
picker : function()
]
};
- if(this.calendarWeeks){
- dow.cn.push({
- tag: 'th',
- cls: 'cw',
- html: ' '
- })
- }
-
while (dowCnt < this.weekStart + 7) {
dow.cn.push({
tag: 'th',
today = this.UTCToday();
this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].months[month]+' '+year;
-
-// this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
-
-// this.picker.select('>tfoot th.today').
-// .text(dates[this.language].today)
-// .toggle(this.todayBtn !== false);
this.updateNavArrows();
this.fillMonths();
tag: 'tr',
cn: []
};
-
- if(this.calendarWeeks){
- // ISO 8601: First week contains first thursday.
- // ISO also states week starts on Monday, but we can be more abstract here.
- var
- // Start of current week: based on weekstart/current date
- ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
- // Thursday of this week
- th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
- // First Thursday of year, year from thursday
- yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
- // Calendar week: ms between thursdays, div ms per day, div 7 days
- calWeek = (th - yth) / 864e5 / 7 + 1;
-
- fillMonths.cn.push({
- tag: 'td',
- cls: 'cw',
- html: calWeek
- });
- }
}
if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
},
+ // return false when it fails
parseDate : function(value)
{
- if(!value || value instanceof Date){
- return value;
- }
- var v = Date.parseDate(value, this.format);
- if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
- v = Date.parseDate(value, 'Y-m-d');
+ if(!value) {
+ return false;
}
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
- }
+ if(value instanceof Date){
+ return value;
}
- return v;
+ var v = Date.parseDate(value, 'Y-m-d');
+
+ return (typeof(v) == 'undefined') ? false : v;
},
formatDate : function(date, fmt)
return (!date || !(date instanceof Date)) ?
date : date.dateFormat(fmt || this.format);
},
+
+ translateDate : function(date)
+ {
+ switch(this.language) {
+ case 'zh_CN':
+ return new Intl.DateTimeFormat('zh-CN', {
+ year : 'numeric',
+ month : 'long',
+ day : 'numeric'
+ }).format(date);
+ default :
+ return this.formatDate(date);
+ }
+ },
onFocus : function()
{
onBlur : function()
{
Roo.bootstrap.form.DateField.superclass.onBlur.call(this);
-
- var d = this.inputEl().getValue();
-
- this.setValue(d);
+
+ if(!this.readOnly) {
+ var d = this.inputEl().getValue();
+ var date = this.parseDate(d);
+ if(date) {
+ this.setValue(date);
+ }
+ else {
+ this.setValue(this.getValue());
+ }
+ }
this.hidePopup();
},
showPopup : function()
{
+ if(this.readOnly) {
+ return;
+ }
this.picker().show();
this.update();
this.place();
this.picker().hide();
this.viewMode = this.startViewMode;
this.showMode();
+
+ this.inputEl().blur();
this.fireEvent('hidepopup', this, this.date);
setValue: function(v)
{
if(this.fireEvent('beforeselect', this, v) !== false){
- var d = new Date(this.parseDate(v) ).clearTime();
-
- if(isNaN(d.getTime())){
- this.date = this.viewDate = '';
- Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
+ var d = this.parseDate(v);
+
+ if(!d) {
+ this.date = this.viewDate = this.value = this.hiddenField.value = '';
+ if(this.rendered){
+ this.inputEl().dom.value = '';
+ this.validate();
+ }
return;
}
- v = this.formatDate(d);
+ d = new Date(d).clearTime();
+
+ this.value = this.hiddenField.value = d.dateFormat('Y-m-d');
+
+ v = this.translateDate(d);
+ if(this.rendered){
+ this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ this.validate();
+ }
+
+ this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
+
+ this.update();
+
+ this.fireEvent('select', this, this.date);
+ }
+ },
+
+ // bypass validation
+ setRawValue : function(v){
+ if(this.fireEvent('beforeselect', this, v) !== false){
+ var d = this.parseDate(v);
+
+ if(!d) {
+ this.date = this.viewDate = this.value = this.hiddenField.value = '';
+ if(this.rendered){
+ this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ }
+ return;
+ }
+
+ d = new Date(d).clearTime();
+
+ this.value = this.hiddenField.value = d.dateFormat('Y-m-d');
- Roo.bootstrap.form.DateField.superclass.setValue.call(this, v);
+ v = this.translateDate(d);
+ if(this.rendered){
+ this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ }
this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
getValue: function()
{
- return this.formatDate(this.date);
+ return this.value;
+ },
+
+ getRawValue : function(){
+ return this.getValue();
},
fireKey: function(e)
if (this.dateWithinRange(newDate)){
this.date = newDate;
this.viewDate = newViewDate;
- this.setValue(this.formatDate(this.date));
+ this.setValue(this.date);
// this.update();
e.preventDefault();
dateChanged = true;
if (this.dateWithinRange(newDate)){
this.date = newDate;
this.viewDate = newViewDate;
- this.setValue(this.formatDate(this.date));
+ this.setValue(this.date);
// this.update();
e.preventDefault();
dateChanged = true;
}
break;
case 13: // enter
- this.setValue(this.formatDate(this.date));
+ this.setValue(this.date);
this.hidePopup();
e.preventDefault();
break;
case 9: // tab
- this.setValue(this.formatDate(this.date));
+ this.setValue(this.date);
this.hidePopup();
break;
case 16: // shift
var date = new Date();
this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
// this.fill()
- this.setValue(this.formatDate(this.date));
+ this.setValue(this.date);
this.hidePopup();
break;
}
if(this.singleMode){
- this.setValue(this.formatDate(this.viewDate));
+ this.setValue(this.viewDate);
this.hidePopup();
return;
}
this.date = this.UTCDate(year, month, day,0,0,0,0);
this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
// this.fill();
- //Roo.log(this.formatDate(this.date));
- this.setValue(this.formatDate(this.date));
+ this.setValue(this.date);
this.hidePopup();
}
break;
{
this.startDate = startDate || -Infinity;
if (this.startDate !== -Infinity) {
- this.startDate = this.parseDate(this.startDate);
+ var date = this.parseDate(this.startDate);
+ this.startDate = date ? date : -Infinity;
}
this.update();
this.updateNavArrows();
{
this.endDate = endDate || Infinity;
if (this.endDate !== Infinity) {
- this.endDate = this.parseDate(this.endDate);
+ var date = this.parseDate(this.endDate);
+ this.endDate = date ? date : Infinity;
}
this.update();
this.updateNavArrows();
return false;
}
- if(typeof(this.parseDate(value)) == 'undefined'){
+ if(!this.parseDate(value)){
return false;
}
]
},
- dates:{
- en: {
- days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
- daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
- daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
- months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
- monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
- today: "Today"
- }
- },
+ dates : {},
+
+ todayText : "Today",
modes: [
{
*/
format : "H:i",
minuteStep : 1,
-
+ language : 'en',
+ hiddenField : false,
getAutoCreate : function()
{
this.after = '<i class="fa far fa-clock"></i>';
{
Roo.bootstrap.form.TimeField.superclass.onRender.call(this, ct, position);
+
+ this.language = this.language in Roo.bootstrap.form.TimeField.periodText ? this.language : "en";
this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.TimeField.template);
this.pop.select('.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this);
this.pop.select('button.ok', true).first().on('click', this.setTime, this);
+ this.pop.select('button.ok', true).first().dom.innerHTML = Roo.bootstrap.form.TimeField.okText;
+
+ this.hiddenField = this.inputEl().insertSibling(
+ {tag : 'input', type : 'hidden', name : this.name},
+ 'before',
+ true
+ );
+ this.inputEl().dom.setAttribute('name', this.name + '____hidden___');
},
update: function()
{
-
- this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
+ // default minute is a multiple of minuteStep
+ if(typeof(this.time) === 'undefined' || this.time.length == 0) {
+ this.time = new Date();
+ this.time = this.time.add(Date.MINUTE, Math.round(parseInt(this.time.format('i')) / this.minuteStep) * this.minuteStep - parseInt(this.time.format('i')));
+ }
+ this.time = (typeof(this.time) === 'undefined' || this.time.length == 0) ? new Date() : this.time;
this.fill();
},
{
var hours = this.time.getHours();
var minutes = this.time.getMinutes();
- var period = 'AM';
+ var period = Roo.bootstrap.form.TimeField.periodText[this.language]['am'];
if(hours > 11){
- period = 'PM';
+ period = Roo.bootstrap.form.TimeField.periodText[this.language]['pm'];
}
if(hours == 0){
this.update();
this.place();
- this.fireEvent('show', this, this.date);
+ this.fireEvent('show', this, this.time);
},
hide : function()
{
this.picker().hide();
this.pop.hide();
+
+ this.inputEl().blur();
- this.fireEvent('hide', this, this.date);
+ this.fireEvent('hide', this, this.time);
},
setTime : function()
{
this.hide();
- this.setValue(this.time.format(this.format));
+ this.setValue(this.time);
- this.fireEvent('select', this, this.date);
+ this.fireEvent('select', this, this.time);
},
+
+ // return false when it fails
+ parseTime : function(value)
+ {
+ if(!value) {
+ return false;
+ }
+ if(value instanceof Date){
+ return value;
+ }
+ var v = Date.parseDate(value, 'H:i:s');
+
+ return (typeof(v) == 'undefined') ? false : v;
+ },
+
+ translateTime : function(time)
+ {
+ switch(this.language) {
+ case 'zh_CN':
+ return new Intl.DateTimeFormat('zh-CN', {
+ hour : 'numeric',
+ minute : 'numeric',
+ hour12 : true
+ }).format(time);
+ default :
+ return time.format(this.format);
+ }
+ },
+
+ setValue: function(v)
+ {
+ var t = this.parseTime(v);
+
+ if(!t) {
+ this.time = this.value = this.hiddenField.value = '';
+ if(this.rendered){
+ this.inputEl().dom.value = '';
+ this.validate();
+ }
+ return;
+ }
+
+ this.value = this.hiddenField.value = t.dateFormat('H:i:s');
+
+ v = this.translateTime(t);
+
+ if(this.rendered){
+ this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ this.validate();
+ }
+
+ this.time = t;
+
+ this.update();
+ },
+
+ setRawValue: function(v)
+ {
+ var t = this.parseTime(v);
+
+ if(!t) {
+ this.time = this.value = this.hiddenField.value = '';
+ if(this.rendered){
+ this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ }
+ return;
+ }
+
+ this.value = this.hiddenField.value = t.dateFormat('H:i:s');
+
+ v = this.translateTime(t);
+
+ if(this.rendered){
+ this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ }
+
+ this.time = t;
+
+ this.update();
+ },
+
+ getValue: function()
+ {
+ return this.value;
+ },
+
+ getRawValue : function(){
+ return this.getValue();
+ },
onMousedown: function(e){
e.stopPropagation();
});
-
+Roo.apply(Roo.bootstrap.form.TimeField, {
+ okText : 'OK',
+ periodText : {
+ en : {
+ am : 'AM',
+ pm : 'PM'
+ },
+ zh_CN : {
+ am : '上午',
+ pm : '下午'
+ }
+ }
+});
Roo.apply(Roo.bootstrap.form.TimeField, {
-
template : {
tag: 'div',
cls: 'datepicker dropdown-menu',
{
tag: 'button',
cls: 'btn btn-info ok',
- html: 'OK'
+ html: "OK" // this is overridden on construciton
}
]
}
* @class Roo.bootstrap.form.SecurePass
* @extends Roo.bootstrap.form.Input
* Bootstrap SecurePass class
+ * @cfg {Number} minimumStrength invalid if the strength of the password input is less than the minimum strength (from 0 to 3) (default 2)
*
*
* @constructor
*/
Roo.bootstrap.form.SecurePass = function (config) {
- // these go here, so the translation tool can replace them..
- this.errors = {
- PwdEmpty: "Please type a password, and then retype it to confirm.",
- PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
- PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
- PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
- IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
- FNInPwd: "Your password can't contain your first name. Please type a different password.",
- LNInPwd: "Your password can't contain your last name. Please type a different password.",
- TooWeak: "Your password is Too Weak."
- },
- this.meterLabel = "Password strength:";
- this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
- this.meterClass = [
- "roo-password-meter-tooweak",
- "roo-password-meter-weak",
- "roo-password-meter-medium",
- "roo-password-meter-strong",
- "roo-password-meter-grey"
- ];
-
- this.errors = {};
Roo.bootstrap.form.SecurePass.superclass.constructor.call(this, config);
}
Roo.extend(Roo.bootstrap.form.SecurePass, Roo.bootstrap.form.Input, {
- /**
- * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
- * {
- * PwdEmpty: "Please type a password, and then retype it to confirm.",
- * PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
- * PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
- * PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
- * IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
- * FNInPwd: "Your password can't contain your first name. Please type a different password.",
- * LNInPwd: "Your password can't contain your last name. Please type a different password."
- * })
- */
- // private
-
- meterWidth: 300,
- errorMsg :'',
- errors: false,
- imageRoot: '/',
- /**
- * @cfg {String/Object} Label for the strength meter (defaults to
- * 'Password strength:')
- */
+ minimumStrength : 2,
// private
- meterLabel: '',
- /**
- * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
- * ['Weak', 'Medium', 'Strong'])
- */
- // private
- pwdStrengths: false,
+ meterWidth: 300,
+ imageRoot: '/',
// private
strength: 0,
// private
//var pm = this.trigger.child('div/div/div').dom;
var pm = this.trigger.child('div/div');
- pm.removeClass(this.meterClass);
- pm.addClass(this.meterClass[strength]);
+ pm.removeClass(Roo.bootstrap.form.SecurePass.meterClass);
+ pm.addClass(Roo.bootstrap.form.SecurePass.meterClass[strength]);
var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;
- pt.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength];
+ pt.innerHTML = Roo.bootstrap.form.SecurePass.meterLabel + ' ' + Roo.bootstrap.form.SecurePass.pwdStrengths[strength];
this._lastPwd = pwd;
},
this._lastPwd = '';
var pm = this.trigger.child('div/div');
- pm.removeClass(this.meterClass);
+ pm.removeClass(Roo.bootstrap.form.SecurePass.meterClass);
pm.addClass('roo-password-meter-grey');
return true;
}
- this.markInvalid(this.errors.PwdEmpty);
- this.errorMsg = this.errors.PwdEmpty;
+ this.invalidText = Roo.bootstrap.form.SecurePass.errors.PwdEmpty;
return false;
}
}
if (!value.match(/[\x21-\x7e]+/)) {
- this.markInvalid(this.errors.PwdBadChar);
- this.errorMsg = this.errors.PwdBadChar;
+ this.invalidText = Roo.bootstrap.form.SecurePass.errors.PwdBadChar;
return false;
}
if (value.length < 6) {
- this.markInvalid(this.errors.PwdShort);
- this.errorMsg = this.errors.PwdShort;
+ this.invalidText = Roo.bootstrap.form.SecurePass.errors.PwdShort;
return false;
}
if (value.length > 16) {
- this.markInvalid(this.errors.PwdLong);
- this.errorMsg = this.errors.PwdLong;
+ this.invalidText = Roo.bootstrap.form.SecurePass.errors.PwdLong;
return false;
}
var strength;
}
- if (strength < 2) {
- //this.markInvalid(this.errors.TooWeak);
- this.errorMsg = this.errors.TooWeak;
- //return false;
+ if (strength < this.minimumStrength) {
+ this.invalidText = Roo.bootstrap.form.SecurePass.errors.TooWeak;
+ return false;
}
//var pm = this.trigger.child('div/div/div').dom;
var pm = this.trigger.child('div/div');
- pm.removeClass(this.meterClass);
- pm.addClass(this.meterClass[strength]);
+ pm.removeClass(Roo.bootstrap.form.SecurePass.meterClass);
+ pm.addClass(Roo.bootstrap.form.SecurePass.meterClass[strength]);
var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;
- pt.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength];
-
- this.errorMsg = '';
+ pt.innerHTML = Roo.bootstrap.form.SecurePass.meterLabel + ' ' + Roo.bootstrap.form.SecurePass.pwdStrengths[strength];
+
return true;
},
// private
return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
}
+});
+
+Roo.bootstrap.form.SecurePass.errors = {
+ PwdEmpty: "Please type a password, and then retype it to confirm.",
+ PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+ PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+ PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+ IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+ FNInPwd: "Your password can't contain your first name. Please type a different password.",
+ LNInPwd: "Your password can't contain your last name. Please type a different password.",
+ TooWeak: "Your password is Too Weak."
+};
+
+Roo.bootstrap.form.SecurePass.meterLabel = "Password strength:";
+Roo.bootstrap.form.SecurePass.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
+Roo.bootstrap.form.SecurePass.meterClass = [
+ "roo-password-meter-tooweak",
+ "roo-password-meter-weak",
+ "roo-password-meter-medium",
+ "roo-password-meter-strong",
+ "roo-password-meter-grey"
+];/**
+ * @class Roo.bootstrap.form.Password
+ * @extends Roo.bootstrap.form.Input
+ * Bootstrap Password class
+ *
+ *
+ *
+ *
+ * @constructor
+ * Create a new Password
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.form.Password = function(config){
+ Roo.bootstrap.form.Password.superclass.constructor.call(this, config);
+
+ this.inputType = 'password';
+};
+
+Roo.extend(Roo.bootstrap.form.Password, Roo.bootstrap.form.Input, {
+
+ onRender : function(ct, position)
+ {
+ Roo.bootstrap.form.SecurePass.superclass.onRender.call(this, ct, position);
+
+ this.el.addClass('form-password');
+
+ this.wrap = this.inputEl().wrap({
+ cls : 'password-wrap'
+ });
+
+ this.toggle = this.wrap.createChild({
+ tag : 'Button',
+ cls : 'password-toggle'
+ });
+
+
+ this.toggleEl().addClass('password-hidden');
+
+ this.toggleEl().on('click', this.onToggleClick, this);;
+ },
+
+ toggleEl: function()
+ {
+ return this.el.select('button.password-toggle',true).first();
+ },
+
+ onToggleClick : function(e)
+ {
+ var input = this.inputEl();
+ var toggle = this.toggleEl();
+
+ toggle.removeClass(['password-visible', 'password-hidden']);
+
+ if(input.attr('type') == 'password') {
+ input.attr('type', 'text');
+ toggle.addClass('password-visible');
+ }
+ else {
+ input.attr('type', 'password');
+ toggle.addClass('password-hidden');
+ }
+ }
});Roo.rtf = {}; // namespace
Roo.rtf.Hex = function(hex)
{
});
}
-} ;
-Roo.htmleditor = {};
-
+} ;
/**
* @class Roo.htmleditor.Filter
* Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
}
node.parentNode.removeChild(node);
+ },
+
+ searchTag : function(dom)
+ {
+ if(this.tag === false) {
+ return;
+ }
+
+ var els = dom.getElementsByTagName(this.tag);
+
+ Roo.each(Array.from(els), function(e){
+ if(e.parentNode == null) {
+ return;
+ }
+ if(this.replaceTag) {
+ this.replaceTag(e);
+ }
+ }, this);
}
};
{
n.parentNode.removeChild(n);
}
+});/**
+ * @class Roo.htmleditor.FilterEmpty
+ * filter empty elements
+ * @constructor
+ * Run a new Empty Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterEmpty = function(cfg)
+{
+ // no need to apply config.
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterEmpty, Roo.htmleditor.FilterBlack,
+{
+
+ tag : true,
+
+
+ replaceTag : function(node)
+ {
+ // start from leaf node
+ if(node.hasChildNodes()) {
+ this.walk(node);
+ }
+
+ // only filter empty leaf element with certain tags
+ if(
+ ['B', 'I', 'U', 'S'].indexOf(node.tagName) < 0
+ ||
+ node.attributes && node.attributes.length > 0
+ ||
+ node.hasChildNodes()
+ ) {
+ return false; // don't walk
+ }
+
+ Roo.htmleditor.FilterBlack.prototype.replaceTag.call(this, node);
+ return false; // don't walk
+
+ }
+
});/**
* @class Roo.htmleditor.FilterKeepChildren
* remove tags but keep children
Roo.htmleditor.FilterParagraph = function(cfg)
{
// no need to apply config.
- this.walk(cfg.node);
+ this.searchTag(cfg.node);
}
Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
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]);
}
});/**
+ * @class Roo.htmleditor.FilterHashLink
+ * remove hash link
+ * @constructor
+ * Run a new Hash Link Filter
+ * @param {Object} config Configuration options
+ */
+
+ Roo.htmleditor.FilterHashLink = function(cfg)
+ {
+ // no need to apply config.
+ // this.walk(cfg.node);
+ this.searchTag(cfg.node);
+ }
+
+ Roo.extend(Roo.htmleditor.FilterHashLink, Roo.htmleditor.Filter,
+ {
+
+ tag : 'A',
+
+
+ replaceTag : function(node)
+ {
+ for(var i = 0; i < node.attributes.length; i ++) {
+ var a = node.attributes[i];
+
+ if(a.name.toLowerCase() == 'href' && a.value.startsWith('#')) {
+ this.removeNodeKeepChildren(node);
+ }
+ }
+
+ return false;
+
+ }
+
+ });/**
* @class Roo.htmleditor.FilterSpan
* filter span's with no attributes out..
* @constructor
Roo.htmleditor.FilterSpan = function(cfg)
{
// no need to apply config.
- this.walk(cfg.node);
+ this.searchTag(cfg.node);
}
Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
if (!spans.length) {
continue;
}
- var ff = spans[0].style.fontFamily;
- if (!spans[0].hasAttribute('style') && spans.length > 1 && spans[1].hasAttribute('style')) {
-
- ff = spans[1].style.fontFamily;
+ var ff = '';
+ var se = spans[0];
+ for (var i = 0; i < spans.length;i++) {
+ se = spans[i];
+ if (se.hasAttribute('style') && se.hasAttribute('style') && se.style.fontFamily != '') {
+ ff = se.style.fontFamily;
+ break;
+ }
}
- //var style = this.styleToObject(spans[0]);
+
+
//Roo.log("got font family: " + ff);
- if (typeof(ff) != 'undefined' && !ff.match(/Symbol/)) {
+ if (typeof(ff) != 'undefined' && !ff.match(/(Symbol|Wingdings)/) && "·o".indexOf(se.innerText.trim()) < 0) {
listtype = 'ol';
}
{
this.tags = {
- B : [ 'fontWeight' , 'bold'],
- I : [ 'fontStyle' , 'italic'],
+ B : [ 'fontWeight' , 'bold', 'font-weight'],
+ I : [ 'fontStyle' , 'italic', 'font-style'],
//pre : [ 'font-style' , 'italic'],
// h1.. h6 ?? font-size?
- SUP : [ 'verticalAlign' , 'super' ],
- SUB : [ 'verticalAlign' , 'sub' ]
+ SUP : [ 'verticalAlign' , 'super', 'vertical-align'],
+ SUB : [ 'verticalAlign' , 'sub', 'vertical-align']
};
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]);
+ node.style.removeProperty(this.tags[k][2]);
}
}
if (!inject.length) {
nn.appendChild(nc);
nn = nc;
});
- for(var i = 0;i < cn.length;cn++) {
+ for(var i = 0;i < cn.length;i++) {
node.removeChild(cn[i]);
nn.appendChild(cn[i]);
}
Roo.htmleditor.FilterLongBr = function(cfg)
{
// no need to apply config.
- this.walk(cfg.node);
+ this.searchTag(cfg.node);
}
Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
-
-
if (!node.previousSibling) {
return false;
}
}
},
-
+
{
xtype : 'Button',
text: 'Hide Caption',
maxWidth : iw + ' !important', // this is not getting rendered?
margin : m
- }
+ },
+ width: this.align == 'center' ? this.width : '100%'
+
};
+
/*
'<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
'<a href="{2}">' +
]
};
}
- // 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,
+ 'data-width' : this.width,
+ 'data-caption' : this.caption,
+ 'data-caption-display' : this.caption_display,
contenteditable : 'false',
style : {
textAlign : this.align // seems to work for email..
},
-
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%'
-
-
- },
- 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
- }
-
- ]
- }
-
- ]
-
- }
+ img
]
};
+
+ // show figcaption only if caption_display is 'block'
+ if(this.caption_display == 'block') {
+ ret['cn'].push({
+ tag: 'figcaption',
+ 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%'
+
+
+ },
+ cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
+ cn : [
+ {
+ tag: 'div',
+ style : {
+ marginTop : '16px',
+ textAlign : 'start'
+ },
+ 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 : Roo.htmleditor.BlockFigure.caption_edit,
+ html : this.caption.length ? this.caption : "Caption" // fake caption
+ }
+
+ ]
+ }
+
+ ]
+
+ });
+ }
return ret;
},
this.image_src = this.getVal(node, 'img', 'src');
this.align = this.getVal(node, 'figure', 'align');
+
+ // caption display is stored in figure
+ this.caption_display = this.getVal(node, true, 'data-caption-display');
+
+ // backward compatible
+ // it was stored in figcaption
+ if(this.caption_display == '') {
+ this.caption_display = this.getVal(node, 'figcaption', 'data-display');
+ }
+
+ // read caption from figcaption
var figcaption = this.getVal(node, 'figcaption', false);
+
if (figcaption !== '') {
this.caption = this.getVal(figcaption, 'i', 'html');
}
-
+
+
+ // read caption from data-caption in figure if no caption from figcaption
+ var dc = this.getVal(node, true, 'data-caption');
+
+ if(this.caption_display == 'none' && dc && dc.length){
+ this.caption = dc;
+ }
- 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');
-})
+});
+
+Roo.apply(Roo.htmleditor.BlockFigure, {
+ caption_edit : true
+});
if (this.colWidths[0] != false && table[r][c].colspan > 1) {
var el = Roo.htmleditor.Block.factory(table[r][c].cell);
var width = 0;
+ var lv = false;
for(var i = 0; i < table[r][c].colspan; i ++) {
+ if (typeof(this.colWidths[c + i]) != 'undefined') {
+ lv = this.colWidths[c + i];
+ } else {
+ this.colWidths[c + i] = lv;
+ }
width += Math.floor(this.colWidths[c + i]);
}
el.width = width +'%';
this.colWidths[i] = nw;
return;
}
- this.colWidths[i] += otherAdd
+ if (typeof(this.colWidths[i]) == 'undefined') {
+ this.colWidths[i] = otherAdd;
+ } else {
+ this.colWidths[i] += otherAdd;
+ }
}, this);
this.updateWidths(table);
this.colWidths[i] = nw;
return;
}
- this.colWidths[i] -= otherSub
+ if (typeof(this.colWidths[i]) == 'undefined') {
+ this.colWidths[i] = otherSub;
+ } else {
+ this.colWidths[i] -= otherSub;
+ }
+
}, this);
this.updateWidths(table);
* @param {Roo.HtmlEditorCore} this
*/
editorevent: true
-
+
});
if (this.enableBlocks) {
+ Array.from(bd.getElementsByTagName('img')).forEach(function(img) {
+ var fig = img.closest('figure');
+ if (fig) {
+ var bf = new Roo.htmleditor.BlockFigure({
+ node : fig
+ });
+ bf.updateElement();
+ }
+
+ });
new Roo.htmleditor.FilterBlock({ node : div });
}
//?? tidy?
if (this.autoClean) {
-
+ new Roo.htmleditor.FilterBlack({ node : div, tag : this.black});
new Roo.htmleditor.FilterAttributes({
node : div,
attrib_white : [
'colspan',
'rowspan',
'data-display',
+ 'data-caption-display',
'data-width',
+ 'data-caption',
'start' ,
'style',
// youtube embed.
],
attrib_clean : ['href', 'src' ]
});
+ new Roo.htmleditor.FilterEmpty({ node : div});
var tidy = new Roo.htmleditor.TidySerializer({
inner: true
var cd = (e.browserEvent.clipboardData || window.clipboardData);
// check what type of paste - if it's an image, then handle it differently.
- if (cd.files && cd.files.length > 0) {
- // pasting images?
+ if (cd.files && cd.files.length > 0 && cd.types.indexOf('text/html') < 0) {
+ // pasting images?
var urlAPI = (window.createObjectURL && window) ||
(window.URL && URL.revokeObjectURL && URL) ||
(window.webkitURL && webkitURL);
var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
images = parser.doc ? parser.doc.getElementsByType('pict') : [];
}
- //Roo.log(images);
- //Roo.log(imgs);
+ // 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(); })
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_white : [
+ 'href',
+ 'src',
+ 'name',
+ 'align',
+ 'colspan',
+ 'rowspan'
+ /* THESE ARE NOT ALLWOED FOR PASTE
+ * 'data-display',
+ 'data-caption-display',
+ 'data-width',
+ 'data-caption',
+ 'start' ,
+ 'style',
+ // youtube embed.
+ 'class',
+ 'allowfullscreen',
+ 'frameborder',
+ 'width',
+ 'height',
+ 'alt'
+ */
+ ],
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.FilterHashLink({node : d});
new Roo.htmleditor.FilterSpan({ node : d });
new Roo.htmleditor.FilterLongBr({ node : d });
new Roo.htmleditor.FilterComment({ node : d });
+ new Roo.htmleditor.FilterEmpty({ node : d});
}
if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
return; // we do not handle this.. (undo manager does..)
}
+ // clicking a 'block'?
+
// 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 &&
break;
case 'bold':
case 'italic':
+ case 'underline':
// if there is no selection, then we insert, and set the curson inside it..
this.execCmd('styleWithCSS', false);
break;
*/
Roo.bootstrap.form.HtmlEditor = function(config){
- Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
- if (!this.toolbars) {
- this.toolbars = [];
- }
-
- this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+
this.addEvents({
/**
* @event initialize
* Fires when the editor is fully initialized (including the iframe)
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.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
+ * @param {Roo.bootstrap.form.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 {Roo.bootstrap.form.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 {Roo.bootstrap.form.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 {Roo.bootstrap.form.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 {Roo.bootstrap.form.HtmlEditor} this
* @param {String} html
*/
push: true,
/**
* @event editmodechange
* Fires when the editor switches edit modes
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.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
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
editorevent: true,
/**
* @event firstfocus
* Fires when on first focus - needed by toolbars..
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
firstfocus: true,
/**
* @event autosave
* Auto save the htmlEditor value as a file into Events
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
autosave: true,
/**
* @event savedpreview
* preview the saved version of htmlEditor
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
- savedpreview: true
- });
+ 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,
+ /**
+ * @event imageadd
+ * Fires when on any editor when an image is added (excluding paste)
+ * @param {Roo.bootstrap.form.HtmlEditor} this
+ */
+ imageadd: true ,
+ /**
+ * @event imageupdated
+ * Fires when on any editor when an image is changed (excluding paste)
+ * @param {Roo.bootstrap.form.HtmlEditor} this
+ * @param {HTMLElement} img could also be a figure if blocks are enabled
+ */
+ imageupdate: true ,
+ /**
+ * @event imagedelete
+ * Fires when on any editor when an image is deleted
+ * @param {Roo.bootstrap.form.HtmlEditor} this
+ * @param {HTMLElement} img could also be a figure if blocks are enabled
+ * @param {HTMLElement} oldSrc source of image being replaced
+ */
+ imagedelete: true
+ });
+ Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
+ if (!this.toolbars) {
+ this.toolbars = [];
+ }
+
+ this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+
};
/**
- * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
+ * @cfg {Array|boolean} toolbars Array of toolbars, or names of toolbars. - true for standard, and false for none.
*/
- toolbars : false,
+ toolbars : true,
/**
* @cfg {Array} buttons Array of toolbar's buttons. - defaults to empty
tbContainer : false,
bodyCls : '',
+
+ linkDialogCls : '',
toolbarContainer :function() {
return this.wrap.select('.x-html-editor-tb',true).first();
* add custom toolbar buttons.
* @param {HtmlEditor} editor
*/
- createToolbar : function(){
- Roo.log('renewing');
- Roo.log("create toolbars");
+ createToolbar : function()
+ {
+ //Roo.log('renewing');
+ //Roo.log("create toolbars");
+ if (this.toolbars === false) {
+ return;
+ }
+ if (this.toolbars === true) {
+ this.toolbars = [ 'Standard' ];
+ }
- this.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard({editor: this} ) ];
- this.toolbars[0].render(this.toolbarContainer());
+ var ar = Array.from(this.toolbars);
+ this.toolbars = [];
+ ar.forEach(function(t,i) {
+ if (typeof(t) == 'string') {
+ t = {
+ xtype : t
+ };
+ }
+ if (typeof(t) == 'object' && typeof(t.xtype) == 'string') {
+ t.editor = this;
+ t.xns = t.xns || Roo.bootstrap.form.HtmlEditorToolbar;
+ t = Roo.factory(t);
+ }
+ this.toolbars[i] = t;
+ this.toolbars[i].render(this.toolbarContainer());
+ }, this);
- return;
-// if (!editor.toolbars || !editor.toolbars.length) {
-// editor.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard() ]; // 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.bootstrap.form.HtmlEditor);
-// editor.toolbars[i].init(editor);
-// }
},
-Roo.namespace('Roo.bootstrap.form.HtmlEditor');
/**
- * @class Roo.bootstrap.form.HtmlEditorToolbarStandard
+ * @class Roo.bootstrap.form.HtmlEditorToolbar.Standard
* @parent Roo.bootstrap.form.HtmlEditor
* @extends Roo.bootstrap.nav.Simplebar
* Basic Toolbar
new Roo.bootstrap.form.HtmlEditor({
....
toolbars : [
- new Roo.bootstrap.form.HtmlEditorToolbarStandard({
+ new Roo.bootstrap.form.HtmlEditorToolbar.Standard({
disable : { fonts: 1 , format: 1, ..., ... , ...],
btns : [ .... ]
})
* .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
*/
-Roo.bootstrap.form.HtmlEditorToolbarStandard = function(config)
+Roo.bootstrap.form.HtmlEditorToolbar.Standard = function(config)
{
Roo.apply(this, config);
colors : true,
specialElements : true
});
- Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.constructor.call(this, config);
this.editor = config.editor;
this.editorcore = config.editor.editorcore;
- this.buttons = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
+ this.buttons = new Roo.util.MixedCollection(false, function(o) { return o.btnid; });
//Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
// dont call parent... till later.
}
-Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simplebar, {
+Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simplebar, {
bar : true,
'div','span'
],
+
+ deleteBtn: false,
+
onRender : function(ct, position)
{
// Roo.log("Call onRender: " + this.xtype);
- Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.onRender.call(this, ct, position);
Roo.log(this.el);
this.el.dom.style.marginBottom = '0';
var _this = this;
var editor= this.editor;
var children = [];
- var btn = function(id,cmd , toggle, handler, html){
+ var btn = function(id, cmd , toggle, handler, html){
var event = toggle ? 'toggle' : 'click';
xtype: 'Button',
xns: Roo.bootstrap,
//glyphicon : id,
+ btnid : id,
fa: id,
- cmd : id || cmd,
- enableToggle:toggle !== false,
+ cls : 'roo-html-editor-btn-' + id,
+ cmd : cmd, // why id || cmd
+ enableToggle: toggle !== false,
html : html || '',
pressed : toggle ? false : null,
listeners : {}
size : 'sm',
xns: Roo.bootstrap,
fa : 'font',
+ cls : 'roo-html-editor-font-chooser',
//html : 'submit'
menu : {
xtype: 'Menu',
});
children.push(style);
- btn('bold',false,true);
- btn('italic',false,true);
- btn('align-left', 'justifyleft',true);
+ btn('bold', 'bold',true);
+ btn('italic', 'italic',true);
+ btn('underline', 'underline',true);
+ btn('align-left', 'justifyleft',true);
btn('align-center', 'justifycenter',true);
btn('align-right' , 'justifyright',true);
- btn('link', false, false, function(btn) {
- //Roo.log("create link?");
- var url = prompt(this.createLinkText, this.defaultLinkValue);
- if(url && url != 'http:/'+'/'){
- this.editorcore.relayCmd('createlink', url);
- }
- }),
+ btn('link', false, true, this.onLinkClick);
+
+
+ btn('image', false, true, this.onImageClick);
btn('list','insertunorderedlist',true);
btn('list-ol','insertorderedlist',true);
}
}
- /*
- var cog = {
- xtype: 'Button',
- size : 'sm',
- xns: Roo.bootstrap,
- glyphicon : 'cog',
- //html : 'submit'
- menu : {
- xtype: 'Menu',
- xns: Roo.bootstrap,
- items: []
- }
- };
-
- cog.menu.items.push({
- xtype :'MenuItem',
- xns: Roo.bootstrap,
- html : Clean styles,
- tagname : f,
- listeners : {
- click : function()
- {
- editorcore.insertTag(this.tagname);
- editor.focus();
- }
- }
-
- });
- */
- this.xtype = 'NavSimplebar';
+ this.xtype = 'NavSimplebar'; // why?
for(var i=0;i< children.length;i++) {
this.buttons.add(this.addxtypeChild(children[i]));
}
-
+ this.buildToolbarDelete();
+
editor.on('editorevent', this.updateToolbar, this);
},
+
+ buildToolbarDelete : function()
+ {
+
+ /* this.addxtypeChild({
+ xtype : 'Element',
+ xns : Roo.bootstrap,
+ cls : 'roo-htmleditor-fill'
+ });
+ */
+ this.deleteBtn = this.addxtypeChild({
+ size : 'sm',
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ fa: 'trash',
+ listeners : {
+ click : this.onDelete.createDelegate(this)
+ }
+ });
+ this.deleteBtn.hide();
+
+ },
+
+ onImageClick : function()
+ {
+ if (this.input) {
+ this.input.un('change', this.onFileSelected, this);
+ }
+ this.input = Roo.get(document.body).createChild({
+ tag: 'input',
+ type : 'file',
+ style : 'display:none',
+ multiple: 'multiple'
+ });
+ this.input.on('change', this.onFileSelected, this);
+ this.input.dom.click();
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.input.dom.files) == 'undefined' || !this.input.dom.files.length){
+ return;
+ }
+
+
+ this.addFiles(Array.prototype.slice.call(this.input.dom.files), false);
+ },
+
+ addFiles : function(far, fire_add) {
+
+
+ var editor = this.editorcore;
+
+ if (!far.length) {
+ if (fire_add) {
+ this.editor.syncValue();
+ editor.owner.fireEvent('editorevent', editor.owner, false);
+ editor.owner.fireEvent('imageadd', editor.owner, false);
+ }
+ return;
+ }
+
+ var f = far.pop();
+
+ if (!f.type.match(/^image/)) {
+ this.addFiles(far, fire_add);
+ return;
+ }
+
+ var sn = this.selectedNode;
+
+ var bl = sn && this.editorcore.enableBlocks ? Roo.htmleditor.Block.factory(sn) : false;
+
+
+ var reader = new FileReader();
+ reader.addEventListener('load', (function() {
+ if (bl) {
+ var oldSrc = bl.image_src;
+ bl.image_src = reader.result;
+ //bl.caption = f.name;
+ bl.updateElement(sn);
+ this.editor.syncValue();
+ editor.owner.fireEvent('editorevent', editor.owner, false);
+ editor.owner.fireEvent('imageupdate', editor.owner, sn, oldSrc);
+ // we only do the first file!! and replace.
+ return;
+ }
+ if (this.editorcore.enableBlocks) {
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : reader.result,
+ caption : '',
+ caption_display : 'none' //default to hide captions..
+ });
+ editor.insertAtCursor(fig.toHTML());
+ this.addFiles(far, true);
+ return;
+ }
+ // just a standard img..
+ if (sn && sn.tagName.toUpperCase() == 'IMG') {
+ var oldSrc = sn.src;
+ sn.src = reader.result;
+ this.editor.syncValue();
+ editor.owner.fireEvent('editorevent', editor.owner, false);
+ editor.owner.fireEvent('imageupdate', editor.owner, sn, oldSrc);
+ return;
+ }
+ editor.insertAtCursor('<img src="' + reader.result +'">');
+ this.addFiles(far, true);
+
+ }).createDelegate(this));
+ reader.readAsDataURL(f);
+
+
+ },
+
+
onBtnClick : function(id)
{
this.editorcore.relayCmd(id);
this.editorcore.focus();
},
+ onLinkClick : function(btn) {
+ var url = this.selectedNode && this.selectedNode.tagName.toUpperCase() == 'A' ?
+ this.selectedNode.getAttribute('href') : '';
+
+ Roo.bootstrap.MessageBox.show({
+ title : "Add / Edit Link URL",
+ msg : "Enter the URL for the link",
+ buttons: Roo.bootstrap.MessageBox.OKCANCEL,
+ minWidth: 250,
+ scope : this,
+ prompt:true,
+ multiline: false,
+ modal : true,
+ value : url,
+ fn: function(pressed, newurl) {
+ if (pressed != 'ok') {
+ this.editorcore.focus();
+ return;
+ }
+ if (url != '') {
+ this.selectedNode.setAttribute('href', newurl);
+ this.editor.syncValue();
+ return;
+ }
+ if(newurl && newurl .match(/http(s):\/\/.+/)) {
+ this.editorcore.relayCmd('createlink', newurl);
+ }
+ this.editorcore.focus();
+ },
+ cls : this.editorcore.linkDialogCls
+ });
+ },
/**
* 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(){
+ updateToolbar: function(editor ,ev, sel){
if(!this.editorcore.activated){
this.editor.onFirstFocus(); // is this neeed?
var btns = this.buttons;
var doc = this.editorcore.doc;
- btns.get('bold').setActive(doc.queryCommandState('bold'));
- btns.get('italic').setActive(doc.queryCommandState('italic'));
- //btns.get('underline').setActive(doc.queryCommandState('underline'));
+ var hasToggle = false;
+ btns.each(function(e) {
+ if (e.enableToggle && e.cmd) {
+ hasToggle = hasToggle || (['align-left', 'align-right', 'align-center', 'image' , 'link', 'underline'].indexOf(e.btnid) < 0 && doc.queryCommandState(e.cmd));
+ e.setActive(doc.queryCommandState(e.cmd));
+ }
+ }, this);
- btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
- btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
- btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
- //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
- btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
- /*
+ 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;
+
+ }
var ans = this.editorcore.getAllAncestors();
- if (this.formatCombo) {
+ 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 lastSel = this.selectedNode;
+ this.selectedNode = sel;
+
+ // 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]');
+ }
+
+ Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+ e.classList.remove('roo-ed-selection');
+ });
+
+ var block = false;
+ if (db && this.editorcore.enableBlocks) {
+ block = Roo.htmleditor.Block.factory(db);
- 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;
- }
+ if (block) {
+ db.className = (db.classList.length > 0 ? db.className + ' ' : '') +
+ ' roo-ed-selection';
+ sel = this.selectedNode = db;
}
}
+ // highlight the 'a'..
+ var tn = sel && sel.tagName.toUpperCase() || '';
+ if (!block && sel && tn != 'A') {
+ var asel = sel.closest('A');
+ if (asel) {
+ sel = asel;
+ }
+ }
+
+ btns.get('link').setActive(tn == 'A' && this.selectedNode.hasAttribute('href'));
+ btns.get('image').setActive(tn == 'IMG' || this.editorcore.enableBlocks && tn == 'FIGURE');
+ btns.get('underline').setActive(tn == 'U' || sel.closest('u') ? true : false);
-
- // hides menus... - so this cant be on a menu...
- Roo.bootstrap.MenuMgr.hideAll();
- */
Roo.bootstrap.menu.Manager.hideAll();
+
+
+
+
+
+ // handle delete button..
+ if (hasToggle || (tn.length && tn == 'BODY')) {
+ this.deleteBtn.hide();
+ return;
+
+ }
+ this.deleteBtn.show();
+
+
+
//this.editorsyncValue();
},
onFirstFocus: function() {
item.enable();
});
},
+
+ onDelete : function()
+ {
+ var range = this.editorcore.createRange();
+ var selection = this.editorcore.getSelection();
+ var sn = this.selectedNode;
+ range.setStart(sn,0);
+ range.setEnd(sn,0);
+
+
+ if (sn.hasAttribute('data-block')) {
+ var block = Roo.htmleditor.Block.factory(this.selectedNode);
+ if (block) {
+ sn = block.removeNode();
+ sn.parentNode.removeChild(sn);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ this.updateToolbar(null, null, null);
+ if (sn.tagName.toUpperCase() == 'FIGURE') {
+ this.editor.syncValue();
+ this.editor.fireEvent('imagedelete', this.editor, sn);
+ }
+
+ this.selectedNode = false;
+ this.editorcore.fireEditorEvent(false);
+ return;
+ }
+
+ }
+ if (!sn) {
+ return; // should not really happen..
+ }
+ if (sn && sn.tagName == 'BODY') {
+ return;
+ }
+ var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+
+ // remove and keep parents.
+ a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+ a.replaceTag(sn);
+
+ selection.removeAllRanges();
+ selection.addRange(range);
+ if (sn.tagName.toUpperCase() == 'IMG"') {
+ this.editor.syncValue();
+ this.editor.fireEvent('imagedelete', this.editor, sn);
+ }
+
+ this.selectedNode = false;
+ this.editorcore.fireEditorEvent(false);
+
+
+ },
+
+
toggleSourceEdit : function(sourceEditMode){
/**
* @event layout
* Fires when a layout is performed.
- * @param {Roo.LayoutManager} this
+ * @param {Roo.layout.Manager} this
*/
"layout" : true,
/**
* @event regionresized
* Fires when the user resizes a region.
- * @param {Roo.LayoutRegion} region The resized region
+ * @param {Roo.layout.Region} region The resized region
* @param {Number} newSize The new size (width for east/west, height for north/south)
*/
"regionresized" : true,
/**
* @event regioncollapsed
* Fires when a region is collapsed.
- * @param {Roo.LayoutRegion} region The collapsed region
+ * @param {Roo.layout.Region} region The collapsed region
*/
"regioncollapsed" : true,
/**
* @event regionexpanded
* Fires when a region is expanded.
- * @param {Roo.LayoutRegion} region The expanded region
+ * @param {Roo.layout.Region} region The expanded region
*/
"regionexpanded" : true
});
/**
* Returns the specified region.
* @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
- * @return {Roo.LayoutRegion}
+ * @return {Roo.layout.Region}
*/
getRegion : function(target){
return this.regions[target.toLowerCase()];
if(!provider){
provider = Roo.state.Manager;
}
- var sm = new Roo.LayoutStateManager();
+ var sm = new Roo.layout.StateManager();
sm.init(this, provider);
},
*/
{
// basically accepts a pannel...
// can accept a layout region..!?!?
- //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+ //Roo.log('Roo.layout.Border add ' + cfg.xtype)
// theory? children can only be panels??
this.events = {
/**
- * @scope Roo.BasicLayoutRegion
+ * @scope Roo.layout.BasicRegion
*/
/**
* @event beforeremove
* Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
* @param {Roo.ContentPanel} panel The panel
* @param {Object} e The cancel event object
*/
/**
* @event invalidated
* Fires when the layout for this region is changed.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
*/
"invalidated" : true,
/**
* @event visibilitychange
* Fires when this region is shown or hidden
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
* @param {Boolean} visibility true or false
*/
"visibilitychange" : true,
/**
* @event paneladded
* Fires when a panel is added.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
* @param {Roo.ContentPanel} panel The panel
*/
"paneladded" : true,
/**
* @event panelremoved
* Fires when a panel is removed.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
* @param {Roo.ContentPanel} panel The panel
*/
"panelremoved" : true,
/**
* @event beforecollapse
* Fires when this region before collapse.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
*/
"beforecollapse" : true,
/**
* @event collapsed
* Fires when this region is collapsed.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
*/
"collapsed" : true,
/**
* @event expanded
* Fires when this region is expanded.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
*/
"expanded" : true,
/**
* @event slideshow
* Fires when this region is slid into view.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
*/
"slideshow" : true,
/**
* @event slidehide
* Fires when this region slides out of view.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
*/
"slidehide" : true,
/**
* @event panelactivated
* Fires when a panel is activated.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
* @param {Roo.ContentPanel} panel The activated panel
*/
"panelactivated" : true,
/**
* @event resized
* Fires when the user resizes this region.
- * @param {Roo.LayoutRegion} this
+ * @param {Roo.layout.Region} this
* @param {Number} newSize The new size (width for east/west, height for north/south)
*/
"resized" : true
/**
- * @class Roo.SplitLayoutRegion
- * @extends Roo.LayoutRegion
- * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ * @class Roo.layout.SplitRegion
+ * @extends Roo.layout.Region
+ * Adds a splitbar and other (private) useful functionality to a {@link Roo.layout.Region}.
*/
Roo.bootstrap.layout.Split = function(config){
this.cursor = config.cursor;
{
tag : 'iframe',
style : 'border: 0px',
- src : 'about:blank'
+ src : 'data:text/html,%3Cbody%3E%3C%2Fbody%3E'
}
];
}
Roo.extend(Roo.bootstrap.panel.Nest, Roo.bootstrap.panel.Content, {
/**
- * @cfg {Roo.BorderLayout} layout The layout for this panel
+ * @cfg {Roo.layout.Border} layout The layout for this panel
*/
layout : false,
/**
* Returns the nested BorderLayout for this panel
- * @return {Roo.BorderLayout}
+ * @return {Roo.layout.Border}
*/
getLayout : function(){
return this.layout;
projects / roojs1 / blobdiff