forked from fanruan/design
52 changed files with 2261 additions and 292 deletions
@ -0,0 +1,17 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class CategoryNameFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public CategoryNameFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Category_Use_Name"); |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class ChangedPercentFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public ChangedPercentFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Change_Percent"); |
||||
} |
||||
|
||||
protected boolean isPercent() { |
||||
return true; |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class ChangedValueFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public ChangedValueFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Change_Value"); |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class MapAreaNameFormatPaneWithoutCheckBox extends CategoryNameFormatPaneWithoutCheckBox { |
||||
|
||||
public MapAreaNameFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Area_Name"); |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class PercentFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public PercentFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Use_Percent"); |
||||
} |
||||
|
||||
protected boolean isPercent() { |
||||
return true; |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class SeriesNameFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public SeriesNameFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Series_Name"); |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class ValueFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public ValueFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Use_Value"); |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public abstract class VanChartFormatPaneWithoutCheckBox extends VanChartFormatPaneWithCheckBox { |
||||
|
||||
public VanChartFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected boolean showSelectBox() { |
||||
return false; |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class XFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public XFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return "x"; |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
package com.fr.van.chart.designer.component.format; |
||||
|
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class YFormatPaneWithoutCheckBox extends VanChartFormatPaneWithoutCheckBox { |
||||
|
||||
public YFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return "y"; |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
package com.fr.van.chart.funnel.designer.style; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.component.format.PercentFormatPaneWithoutCheckBox; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class FunnelPercentFormatPaneWithoutCheckBox extends PercentFormatPaneWithoutCheckBox { |
||||
|
||||
public FunnelPercentFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Value_Conversion"); |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
package com.fr.van.chart.map.line; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.component.format.CategoryNameFormatPaneWithoutCheckBox; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class StartAndEndNameFormatPaneWithoutCheckBox extends CategoryNameFormatPaneWithoutCheckBox { |
||||
public StartAndEndNameFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Start_And_End"); |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
package com.fr.van.chart.multilayer.style; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.component.format.CategoryNameFormatPaneWithoutCheckBox; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class MultiPieLevelNameFormatPaneWithoutCheckBox extends CategoryNameFormatPaneWithoutCheckBox { |
||||
|
||||
public MultiPieLevelNameFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_Level_Name"); |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
package com.fr.van.chart.multilayer.style; |
||||
|
||||
import com.fr.design.i18n.Toolkit; |
||||
import com.fr.van.chart.designer.component.format.SeriesNameFormatPaneWithoutCheckBox; |
||||
import com.fr.van.chart.designer.style.VanChartStylePane; |
||||
|
||||
import javax.swing.JPanel; |
||||
|
||||
public class MultiPieSeriesNameFormatPaneWithoutCheckBox extends SeriesNameFormatPaneWithoutCheckBox { |
||||
|
||||
public MultiPieSeriesNameFormatPaneWithoutCheckBox(VanChartStylePane parent, JPanel showOnPane) { |
||||
super(parent, showOnPane); |
||||
} |
||||
|
||||
protected String getCheckBoxText() { |
||||
return Toolkit.i18nText("Fine-Design_Chart_MultiPie_Series_Name"); |
||||
} |
||||
} |
||||
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/> |
||||
<script src="http://fanruan.design/fineui/2.0/fineui.js"></script> |
||||
<script src="https://fanruan.design/fineui/materials.bundle.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<script> |
||||
BICst.RICH_TEXT_INFO = { |
||||
DATA_ID: "data-id", |
||||
DATA_NAME: "data-name", |
||||
DATA_FULL_NAME: "data-full-name", |
||||
DATA_ORIGIN_ID: "data-origin-id", |
||||
DATA_ORIGIN_NAME: "data-origin-name", |
||||
DATA_ORIGIN_FULL_NAME: "data-origin-full-name", |
||||
DATA_IS_INSERT_PARAM: "data-is-insert-param", |
||||
DATA_IS_MISSING_FIELD: "data-is-missing-field", |
||||
DATA_UN_VALID: "data-unvalid", |
||||
NAME: "name", |
||||
ALT: "alt", |
||||
SRC: "src" |
||||
}; |
||||
</script> |
||||
<script src="script/insertcombo/item/item.js"></script> |
||||
<script src="script/insertcombo/combo.insert_param.js"></script> |
||||
<script src="script/insertcombo/combo.insert_param.model.js"></script> |
||||
<script src="script/toolbar/disabled_bar_wrapper.js"></script> |
||||
<script src="script/toolbar/toolbar.js"></script> |
||||
<script src="script/toolbar/toolbar.model.js"></script> |
||||
<script src="script/editor.constant.js"></script> |
||||
<script src="script/editor.js"></script> |
||||
<script src="script/editor.model.js"></script> |
||||
<script src="script/editor.service.js"></script> |
||||
<script> |
||||
window.onload = function () { |
||||
var content = Pool.data.getContent(); |
||||
var isAuto = Pool.data.isAuto(); |
||||
var params = Pool.data.getParams(); |
||||
|
||||
var dimensionIds = []; |
||||
|
||||
var paramGroup = params.split("-"); |
||||
|
||||
for (var i = 0, len = paramGroup.length; i < len; i++) { |
||||
var [key, value] = paramGroup[i].split(":"); |
||||
var param = {}; |
||||
|
||||
param[key] = value; |
||||
|
||||
dimensionIds.push(param); |
||||
} |
||||
|
||||
var rich_editor = BI.createWidget({ |
||||
type: "bi.design.chart.common.editor", |
||||
element: "body", |
||||
content: content, |
||||
fontStyle: { |
||||
textAlign: "center", |
||||
fontFamily: "", |
||||
fontSize: 18, |
||||
italic: true, |
||||
fontBold: false |
||||
}, |
||||
isAuto: isAuto, |
||||
dimensionIds: dimensionIds, |
||||
toolbar: { |
||||
buttons: [ |
||||
{type: "bi.rich_editor_font_chooser"}, |
||||
{type: "bi.rich_editor_size_chooser"}, |
||||
{type: "bi.rich_editor_bold_button"}, |
||||
{type: "bi.rich_editor_italic_button"}, |
||||
{type: "bi.rich_editor_underline_button"}, |
||||
{type: "bi.rich_editor_color_chooser"}, |
||||
{type: "bi.rich_editor_align_left_button"}, |
||||
{type: "bi.rich_editor_align_center_button"}, |
||||
{type: "bi.rich_editor_align_right_button"}, |
||||
{type: "bi.design.chart.common.editor.insert_param"} |
||||
] |
||||
}, |
||||
ref: function (_ref) { |
||||
self.editor = _ref; |
||||
} |
||||
}); |
||||
|
||||
Pool.dispatch = function(){ |
||||
rich_editor.setValue({content: Pool.data.getContent(), isAuto: Pool.data.isAuto()}); |
||||
} |
||||
|
||||
Pool.update = function () { |
||||
var {content, isAuto} = rich_editor.getValue(); |
||||
|
||||
Pool.data.setContent(content); |
||||
Pool.data.setAuto(isAuto); |
||||
|
||||
return Pool.data; |
||||
}; |
||||
}; |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,6 @@
|
||||
!(function () { |
||||
|
||||
BI.constant("bi.constant.design.chart.common.editor.placeholder_style", { |
||||
fontColor: "#c4c9d1" |
||||
}); |
||||
}()); |
||||
@ -0,0 +1,241 @@
|
||||
!(function () { |
||||
var Widget = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "bi-design-chart-common-editor", |
||||
isAuto: true, |
||||
content: "", |
||||
placeholder: "", |
||||
fontStyle: {}, |
||||
dimensionIds: [], |
||||
toolbar: { |
||||
buttons: [] |
||||
}, |
||||
textAlign: "center" |
||||
}, |
||||
|
||||
_store: function () { |
||||
var o = this.options; |
||||
|
||||
return BI.Models.getModel("bi.model.design.chart.common.editor", { |
||||
dimensionIds: o.dimensionIds, |
||||
isAuto: o.isAuto |
||||
}); |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
this.editor = BI.createWidget({ |
||||
type: "bi.nic_editor", |
||||
$value: "chart-common-editor", |
||||
height: 365, |
||||
cls: "editor bi-border bi-focus-shadow " + (o.textAlign === "center" ? "editor-center-text" : ""), |
||||
listeners: [{ |
||||
eventName: BI.NicEditor.EVENT_FOCUS, |
||||
action: function () { |
||||
self.clearPlaceholder(); |
||||
self.store.setEditorBlurState(false); |
||||
} |
||||
}, { |
||||
eventName: BI.NicEditor.EVENT_BLUR, |
||||
action: function () { |
||||
self.setPlaceholder(); |
||||
self.store.setEditorBlurState(true); |
||||
} |
||||
}] |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.vtape", |
||||
ref: function (_ref) { |
||||
self.bar = _ref; |
||||
}, |
||||
items: [{ |
||||
type: "bi.htape", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "字体样式: ", |
||||
textAlign: "left", |
||||
width: 70 |
||||
}, { |
||||
type: "bi.button_group", |
||||
items: this.model.fontStyleItems, |
||||
ref: function (_ref) { |
||||
self.fontStyleGroup = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.ButtonGroup.EVENT_CHANGE, |
||||
action: function () { |
||||
var isAuto = this.getValue()[0]; |
||||
self.store.changeIsAuto(isAuto); |
||||
self.changeFontStyleMode(isAuto); |
||||
} |
||||
}], |
||||
layouts: [{ |
||||
type: "bi.left", |
||||
rgap: 5 |
||||
}], |
||||
value: this.model.mode, |
||||
width: 125 |
||||
}, this._getToolBar()], |
||||
height: 24 |
||||
}, { |
||||
el: this.editor, |
||||
tgap: 10 |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
_getToolBar: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.design.chart.common.editor.toolbar", |
||||
cls: "toolbar-region", |
||||
wId: this.options.wId, |
||||
editor: this.editor, |
||||
buttons: this.options.toolbar.buttons, |
||||
ref: function (_ref) { |
||||
self.toolbar = _ref; |
||||
} |
||||
}; |
||||
}, |
||||
|
||||
mounted: function () { |
||||
this.editor.bindToolbar(this.bar); |
||||
this.editor.setValue(this._formatContent(this.options.content)); |
||||
this.setFocus(); |
||||
}, |
||||
|
||||
_cleanHtml: function (value) { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"); |
||||
var result = BI.replaceAll(value, "<p></p>", ""); |
||||
// 去掉image的src属性，因为数据太大了
|
||||
result = value.replaceAll("<img.*?>", function (imageStr) { |
||||
var attrs = editorService.getImageAttr(imageStr); |
||||
var str = "<img "; |
||||
BI.each(attrs, function (key, value) { |
||||
if (key === "src") { |
||||
return; |
||||
} |
||||
str += " " + key + "=\"" + value + "\""; |
||||
}); |
||||
|
||||
return str + " />"; |
||||
}); |
||||
|
||||
return result; |
||||
}, |
||||
|
||||
getValue: function () { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"); |
||||
var value = this._cleanHtml(this.editor.getValue(BI.NicEditor.FormatType.ESCAPE)); |
||||
// BI.each(this.model.dimensionIds, function (idx, dId) {
|
||||
// var fullName = BI.Utils.getNotGeoDimensionFullName(dId);
|
||||
// value = editorService.appendImageAttr(value, fullName, BICst.RICH_TEXT_INFO.DATA_ID, dId);
|
||||
// });
|
||||
|
||||
if (editorService.isEmptyRichText(value)) { |
||||
value = ""; |
||||
} |
||||
|
||||
if (BI.isNotEmptyString(this.options.placeholder) && editorService.isRichTextEqual(value, this.options.placeholder)) { |
||||
value = null; |
||||
} |
||||
|
||||
return { |
||||
isAuto: this.model.isAuto, |
||||
content: value |
||||
}; |
||||
}, |
||||
|
||||
setValue: function (obj) { |
||||
var keys = BI.keys(obj); |
||||
if (BI.contains(keys, "content")) { |
||||
this.editor.setValue(this._formatContent(obj.content)); |
||||
} |
||||
if (BI.contains(keys, "isAuto")) { |
||||
this.store.changeIsAuto(obj.isAuto); |
||||
this.fontStyleGroup.setValue(obj.isAuto); |
||||
} |
||||
}, |
||||
|
||||
_formatContent: function (content) { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"); |
||||
|
||||
content = editorService.setImageSrc(content); |
||||
|
||||
if (editorService.isBlankRichText(content) |
||||
|| editorService.isRichTextEqual(content, this.options.placeholder)) { |
||||
content = this.options.placeholder || ""; |
||||
} |
||||
|
||||
return content; |
||||
}, |
||||
|
||||
// 切换到“自动”时的处理方法
|
||||
_switchToAutoStyle: function () { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"), |
||||
content = this.editor.getValue(BI.NicEditor.FormatType.ESCAPE), |
||||
isEqualToPlaceholder = editorService.isRichTextEqual(content, this.options.placeholder); |
||||
|
||||
var HTML_ONLY_STYLE_TAG = "<font[\\s\\S]*?>|</font>|<span[\\s\\S]*?>|</span>|<b\\s+(.*?)>|<b>|</b>|<u[\\s\\S]*?>|</u>|<i\\s+(.*?)>|<i>|</i>|<strong[\\s\\S]*?>|</strong>|<em[\\s\\S]*?>|</em>|<div[\\s\\S]style(.*?)>|</div>|<p[\\s\\S]style(.*?)>|<p.[\\s\\S]*align(.*?)>|</p>"; |
||||
|
||||
if (!isEqualToPlaceholder) { |
||||
content = content.replaceAll(HTML_ONLY_STYLE_TAG, ""); |
||||
} |
||||
|
||||
return content; |
||||
}, |
||||
|
||||
clearPlaceholder: function () { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"); |
||||
var content = this.editor.getValue(BI.NicEditor.FormatType.ESCAPE); |
||||
var isSameContent = editorService.isRichTextEqual(content, this.options.placeholder); |
||||
|
||||
if (isSameContent) { |
||||
content = editorService.convertText2RichText("", this.options.fontStyle); |
||||
this.editor.setValue(content); |
||||
this.setFocus(); |
||||
} |
||||
}, |
||||
|
||||
setPlaceholder: function () { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"); |
||||
var content = this.editor.getValue(BI.NicEditor.FormatType.ESCAPE); |
||||
var isSameContent = editorService.isBlankRichText(content); |
||||
|
||||
if (isSameContent) { |
||||
this.editor.setValue(this.options.placeholder); |
||||
} |
||||
}, |
||||
|
||||
// 字体样式切换
|
||||
changeFontStyleMode: function (isAuto) { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"); |
||||
var switchFn = this.options.switchFn, |
||||
content = this.editor.getValue(BI.NicEditor.FormatType.ESCAPE), |
||||
origin = content; |
||||
if (isAuto) { |
||||
content = this._switchToAutoStyle(); |
||||
this.setFocus(); |
||||
} else if (editorService.isRichTextEqual(content, this.options.placeholder)) { |
||||
content = ""; |
||||
} |
||||
if (BI.isFunction(switchFn)) { |
||||
content = switchFn(isAuto, content); |
||||
} |
||||
if (content !== origin) { |
||||
this.editor.setValue(content); |
||||
} |
||||
}, |
||||
|
||||
setFocus: function () { |
||||
var instance = this.editor.instance; |
||||
instance && instance.initSelection(); |
||||
} |
||||
}); |
||||
|
||||
Widget.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
|
||||
BI.shortcut("bi.design.chart.common.editor", Widget); |
||||
|
||||
}()); |
||||
@ -0,0 +1,53 @@
|
||||
!(function () { |
||||
|
||||
var Model = BI.inherit(Fix.Model, { |
||||
childContext: ["isAuto", "dimensionIds"], |
||||
|
||||
state: function () { |
||||
var o = this.options; |
||||
|
||||
return { |
||||
isAuto: o.isAuto, |
||||
dimensionIds: o.dimensionIds, |
||||
isEditorBlur: true |
||||
}; |
||||
}, |
||||
|
||||
computed: { |
||||
fontStyleItems: function () { |
||||
return [{ |
||||
type: "bi.single_select_radio_item", |
||||
text: "自动", |
||||
hgap: 5, |
||||
logic: { |
||||
dynamic: true |
||||
}, |
||||
value: true, |
||||
selected: this.options.isAuto |
||||
}, { |
||||
type: "bi.single_select_radio_item", |
||||
text: "自定义", |
||||
hgap: 5, |
||||
logic: { |
||||
dynamic: true |
||||
}, |
||||
value: false, |
||||
selected: !this.options.isAuto |
||||
}]; |
||||
} |
||||
}, |
||||
|
||||
actions: { |
||||
changeIsAuto: function (isAuto) { |
||||
this.model.isAuto = isAuto; |
||||
}, |
||||
|
||||
setEditorBlurState: function (isBlur) { |
||||
this.model.isEditorBlur = isBlur; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
BI.model("bi.model.design.chart.common.editor", Model); |
||||
|
||||
}()); |
||||
@ -0,0 +1,562 @@
|
||||
!(function () { |
||||
|
||||
/** |
||||
* HTML解析类，使用方法： |
||||
* new HTMLParser().parse(htmlText, { |
||||
* startTag: function (tagName, attrs) {}, |
||||
* endTag: function (tagName) {}, |
||||
* text: function (text) {} |
||||
* }) |
||||
*/ |
||||
function HTMLParser () { |
||||
|
||||
} |
||||
|
||||
HTMLParser.prototype = { |
||||
constructor: HTMLParser, |
||||
|
||||
startTagPattern: /<([-\w\d_]+)\s*([^>]*)\s*(\/?)>/, |
||||
endTagPattern: /^<\/([-\w\d_]+)[^>]*>/, |
||||
attrPattern: /([-\w\d_]+)\s*=\s*["']([^"']*)["']/g, |
||||
// 特殊的字符
|
||||
specialCharsPatterns: [{ |
||||
pattern: / /g, |
||||
subStr: " " |
||||
}, { |
||||
pattern: /</g, |
||||
subStr: "<" |
||||
}, { |
||||
pattern: />/g, |
||||
subStr: ">" |
||||
}, { |
||||
pattern: /&/g, |
||||
subStr: "&" |
||||
}], |
||||
|
||||
handle: { |
||||
// 以下为处理开始标签和文本的时候触发的函数，可以自定义
|
||||
startTag: function () { |
||||
}, |
||||
endTag: function () { |
||||
}, |
||||
text: function () { |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
* @param html |
||||
* @param handle |
||||
* @param isReplaceSpecialChars 是否需要替换HTML中的特殊字符 |
||||
*/ |
||||
parse: function (html, handle, isReplaceSpecialChars) { |
||||
var index, isText = false, |
||||
match, last = html, |
||||
me = this; |
||||
|
||||
isReplaceSpecialChars = isReplaceSpecialChars !== null ? isReplaceSpecialChars : true; |
||||
|
||||
if (BI.isPlainObject(handle)) { |
||||
BI.isFunction(handle.startTag) && (this.handle.startTag = handle.startTag); |
||||
BI.isFunction(handle.endTag) && (this.handle.endTag = handle.endTag); |
||||
BI.isFunction(handle.text) && (this.handle.text = handle.text); |
||||
} |
||||
|
||||
while (html) { |
||||
isText = true; |
||||
|
||||
// 结束标签
|
||||
if (html.indexOf("</") === 0) { |
||||
match = html.match(this.endTagPattern); |
||||
|
||||
if (match) { |
||||
html = html.substring(match[0].length); |
||||
match[0].replace(this.endTagPattern, function () { |
||||
me._parseEndTag.apply(me, arguments); |
||||
}); |
||||
isText = false; |
||||
} |
||||
} else if (html.indexOf("<") === 0) { |
||||
// 遇到起始的标签，提取标签名称和属性之类的
|
||||
match = html.match(this.startTagPattern); |
||||
|
||||
if (match) { |
||||
html = html.substring(match[0].length); |
||||
match[0].replace(this.startTagPattern, function () { |
||||
me._parseStartTag.apply(me, arguments); |
||||
}); |
||||
isText = false; |
||||
} |
||||
} |
||||
|
||||
// 仅仅是一行文本的情况
|
||||
if (isText) { |
||||
index = html.indexOf("<"); |
||||
|
||||
var text = index < 0 ? html : html.substring(0, index); |
||||
html = index < 0 ? "" : html.substring(index); |
||||
|
||||
if (isReplaceSpecialChars) { |
||||
BI.each(this.specialCharsPatterns, function (idx, obj) { |
||||
text = text.replace(obj.pattern, obj.subStr); |
||||
}); |
||||
} |
||||
|
||||
this.handle.text(text); |
||||
} |
||||
|
||||
if (html === last) { |
||||
throw "Parse Error: " + html; |
||||
} |
||||
|
||||
last = html; |
||||
} |
||||
|
||||
this._parseEndTag(); |
||||
}, |
||||
|
||||
/** |
||||
* 解析开始标签的字符串 |
||||
* @param all 整个需要解析的字符串 |
||||
* @param tagName |
||||
* @param rest 除去tagNAme之后allString剩下的部分 |
||||
*/ |
||||
_parseStartTag: function (all, tagName, rest) { |
||||
tagName = tagName.toLowerCase(); |
||||
|
||||
var attrs = []; |
||||
|
||||
rest.replace(this.attrPattern, function (all, attrName, value) { |
||||
attrs.push({ |
||||
name: attrName, |
||||
value: value, |
||||
escaped: value.replace(/(^|[^\\])"/g, "$1\\\"") |
||||
}); |
||||
}); |
||||
|
||||
tagName && this.handle.startTag(tagName, attrs); |
||||
}, |
||||
|
||||
/** |
||||
* 解析关闭的标签 |
||||
*/ |
||||
_parseEndTag: function (all, tagName) { |
||||
tagName && this.handle.endTag(tagName); |
||||
} |
||||
}; |
||||
|
||||
// 获取一个HTML字符串中image的属性
|
||||
function getImageAttr (html) { |
||||
var htmlParse = new HTMLParser(); |
||||
var imageAttr; |
||||
|
||||
htmlParse.parse(html, { |
||||
startTag: function (tagName, attrs) { |
||||
if (tagName === "img") { |
||||
imageAttr = {}; |
||||
BI.each(attrs, function (idx, attr) { |
||||
imageAttr[attr.name] = attr.value; |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
return imageAttr; |
||||
} |
||||
|
||||
var Service = BI.inherit(BI.OB, { |
||||
|
||||
encode: function (params) { |
||||
if (/[<>'$%{}"]/.test(params)) { |
||||
return window.encodeURIComponent(params).replace(/'/g, escape); |
||||
} |
||||
return params; |
||||
}, |
||||
|
||||
decode: function (params) { |
||||
try { |
||||
var result = window.decodeURIComponent(params); |
||||
if (/[<>'$%{}"]/.test(result)) { |
||||
return result; |
||||
} |
||||
return params; |
||||
} catch (e) { |
||||
return params; |
||||
} |
||||
}, |
||||
|
||||
HTMLParser: HTMLParser, |
||||
|
||||
getImageAttr: getImageAttr, |
||||
|
||||
/** |
||||
* 构造一个富文本中的参数图片 |
||||
*/ |
||||
getEditorParamImage: function (param, fillStyle) { |
||||
var attr = BI.DOM.getImage(param, fillStyle); |
||||
return "<img class='rich-editor-param' height='16px'" |
||||
+ " alt='" + this.encode(attr.param) |
||||
+ "' name='" + this.encode(attr.param) |
||||
+ "' style='" + attr.style + "' />"; |
||||
}, |
||||
|
||||
/** |
||||
* 给image设置属性 |
||||
*/ |
||||
appendImageAttr: function (html, altValue, attrName, attrValue, isCovered) { |
||||
altValue = this.encode(altValue); |
||||
attrName = this.encode(attrName); |
||||
attrValue = this.encode(attrValue); |
||||
isCovered = isCovered || false; // 属性是否可以覆盖
|
||||
|
||||
return html.replaceAll("<img(.*?)>", function (imageStr) { |
||||
var attrs = getImageAttr(imageStr); |
||||
|
||||
if (attrs && attrs["alt"] === altValue && (BI.isNull(attrs[attrName]) || isCovered)) { |
||||
attrs[attrName] = attrValue; |
||||
imageStr = "<img "; |
||||
|
||||
BI.each(attrs, function (attrName, attrValue) { |
||||
imageStr += "" + attrName + "=\"" + attrValue + "\" "; |
||||
}); |
||||
|
||||
imageStr += "/>"; |
||||
} |
||||
return imageStr; |
||||
}); |
||||
}, |
||||
|
||||
/** |
||||
* 将普通的文本转化成富文本字符串 |
||||
*/ |
||||
convertText2RichText: function (text, fontStyle, fontProcessFn) { |
||||
fontStyle = fontStyle || {}; |
||||
|
||||
if (BI.isEmptyString(text)) { |
||||
return text; |
||||
} |
||||
|
||||
var lines = text.split("\n"), |
||||
pattern = "\\$\\{(.*?)\\}", |
||||
richText = "", |
||||
self = this, |
||||
html = self._getHtmlTagStr(fontStyle, fontProcessFn); |
||||
|
||||
BI.each(lines, function (idx, lineText) { |
||||
// 替换参数为image
|
||||
var newText = lineText.replaceAll(pattern, function (all, $1) { |
||||
return self.getEditorParamImage($1); |
||||
}); |
||||
// 空字符串
|
||||
if (!lineText) { |
||||
newText += "<br />"; |
||||
} |
||||
richText += html.startHtml + newText + html.endHtml; |
||||
}); |
||||
|
||||
return richText; |
||||
}, |
||||
|
||||
/** |
||||
* 根据fontStyle构造标签 |
||||
*/ |
||||
_getHtmlTagStr: function (fontStyle, fontProcessFn) { |
||||
var tags = [{ |
||||
tag: "p", |
||||
style: {} |
||||
}], |
||||
obj, |
||||
startHtml = "", |
||||
endHtml = ""; |
||||
|
||||
// fontSize 为number值
|
||||
if (fontStyle.fontSize) { |
||||
obj = { |
||||
tag: "font", |
||||
style: {"font-size": fontStyle.fontSize + "px"} |
||||
}; |
||||
tags.push(obj); |
||||
} |
||||
|
||||
// 字体一般用默认值，不需要处理，但是KPI指标卡例外
|
||||
if (BI.isFunction(fontProcessFn)) { |
||||
tags.push(fontProcessFn()); |
||||
} |
||||
|
||||
// fontBold 为boolean值
|
||||
if (fontStyle.fontBold) { |
||||
obj = { |
||||
tag: "b", |
||||
style: {} |
||||
}; |
||||
tags.push(obj); |
||||
} |
||||
|
||||
// italic 为boolean值
|
||||
if (fontStyle.italic) { |
||||
obj = { |
||||
tag: "i", |
||||
style: {} |
||||
}; |
||||
tags.push(obj); |
||||
} |
||||
|
||||
// underline 为boolean值
|
||||
if (fontStyle.underline) { |
||||
obj = { |
||||
tag: "u", |
||||
style: {} |
||||
}; |
||||
tags.push(obj); |
||||
} |
||||
|
||||
|
||||
BI.each(tags, function (idx, item) { |
||||
startHtml += "<" + item.tag; |
||||
|
||||
// set style
|
||||
if (BI.isNotEmptyObject(item.style)) { |
||||
startHtml += " style=\""; |
||||
BI.each(item.style, function (key, value) { |
||||
startHtml += key + ":" + value + ";"; |
||||
}); |
||||
startHtml += "\""; |
||||
} |
||||
|
||||
// set attributes
|
||||
BI.each(item.attr, function (key, value) { |
||||
startHtml += " " + key + "=\"" + value + "\""; |
||||
}); |
||||
startHtml += ">"; |
||||
}); |
||||
|
||||
BI.each(tags.reverse(), function (idx, item) { |
||||
endHtml += "</" + item.tag + ">"; |
||||
}); |
||||
|
||||
return { |
||||
startHtml: startHtml, |
||||
endHtml: endHtml |
||||
}; |
||||
}, |
||||
|
||||
/** |
||||
* 将富文本HTML转化成普通的文本，不需要记录fontStyle |
||||
*/ |
||||
convertRichText2Text: function (html) { |
||||
var content = "", |
||||
line = "", |
||||
htmlFragments = []; |
||||
|
||||
new HTMLParser().parse(html, { |
||||
startTag: function (tagName, attrs) { |
||||
// 只关心br、img
|
||||
switch (tagName) { |
||||
case "br": |
||||
line += "\n"; |
||||
htmlFragments.push(tagName); |
||||
break; |
||||
case "img": |
||||
BI.each(attrs, function (idx, obj) { |
||||
if (obj.name === "alt") { |
||||
line += "${" + obj.value + "}"; |
||||
} |
||||
}); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}, |
||||
endTag: function (tagName) { |
||||
if (tagName === "div") { |
||||
// <div><br /></div>这样的情况下应该只代表一个回车符
|
||||
htmlFragments[htmlFragments.length - 1] !== "br" && (line += "\n"); |
||||
htmlFragments = []; |
||||
} |
||||
|
||||
content += line; |
||||
line = ""; |
||||
}, |
||||
text: function (text) { |
||||
htmlFragments.push(text); |
||||
line += text; |
||||
} |
||||
}); |
||||
|
||||
// 去掉最后的换行符
|
||||
content = content.replace(/\n$/, ""); |
||||
|
||||
return content; |
||||
}, |
||||
|
||||
convertImage2Text: function (html) { |
||||
if (BI.isNull(html)) { |
||||
return html; |
||||
} |
||||
return html.replaceAll("<img.*?>", function (imageStr) { |
||||
var matched = imageStr.match(/alt="(.*?)"/); |
||||
var startHtml = "<span class=\"rich-editor-param\" style=\"background-color: #EAF2FD;\">"; |
||||
var endHtml = "</span>"; |
||||
return startHtml + (matched ? matched[1] : imageStr) + endHtml; |
||||
}); |
||||
}, |
||||
|
||||
isRichTextEqual: function (html1, html2) { |
||||
if (BI.isNotNull(html1)) { |
||||
html1 = this.convertImage2Text(html1); |
||||
} |
||||
if (BI.isNotNull(html2)) { |
||||
html2 = this.convertImage2Text(html2); |
||||
} |
||||
|
||||
return html1 === html2; |
||||
}, |
||||
|
||||
isRichTextNotEqual: function (html1, html2) { |
||||
return !this.isRichTextEqual(html1, html2); |
||||
}, |
||||
|
||||
isBlankRichText: function (html) { |
||||
html = html || ""; |
||||
html = this.convertRichText2Text(html); |
||||
return BI.trim(html).length === 0; |
||||
}, |
||||
|
||||
// 显示整个富文本中缺失的字段
|
||||
showMissingFields: function (html, validDimensionIds) { |
||||
var self = this; |
||||
|
||||
return html.replaceAll("<img.*?>", function (imageStr) { |
||||
var attrs = getImageAttr(imageStr); |
||||
return attrs && BI.contains(validDimensionIds, attrs[BICst.RICH_TEXT_INFO.DATA_ID]) |
||||
? imageStr |
||||
: self.getMissingFieldImage( |
||||
attrs[BICst.RICH_TEXT_INFO.DATA_ID], |
||||
attrs[BICst.RICH_TEXT_INFO.DATA_NAME], |
||||
attrs[BICst.RICH_TEXT_INFO.ALT] |
||||
); |
||||
}); |
||||
}, |
||||
|
||||
// 获取缺失元素的图片
|
||||
getMissingFieldImage: function (dId, name, fullName) { |
||||
var missingText = "<!" + BI.i18nText("BI-Design_Missing_Field") + "!>"; |
||||
var missingImage = BI.DOM.getImage(missingText, "#ff0000"); |
||||
var html = this.getEditorParamImage(fullName, "#ff0000"); |
||||
|
||||
// 将原来的dId、name、fullName保存起来
|
||||
html = this.appendImageAttr(html, fullName, BICst.RICH_TEXT_INFO.DATA_ORIGIN_ID, dId); |
||||
html = this.appendImageAttr(html, fullName, BICst.RICH_TEXT_INFO.DATA_ORIGIN_NAME, name); |
||||
html = this.appendImageAttr(html, fullName, BICst.RICH_TEXT_INFO.DATA_ORIGIN_FULL_NAME, fullName); |
||||
html = this.appendImageAttr(html, fullName, BICst.RICH_TEXT_INFO.SRC, missingImage.src, true); |
||||
// 标记出这个参数是一个“缺失元素”
|
||||
html = this.appendImageAttr(html, fullName, BICst.RICH_TEXT_INFO.DATA_IS_MISSING_FIELD, "true", true); |
||||
html = this.appendImageAttr(html, fullName, "style", missingImage.style, true); |
||||
return html; |
||||
}, |
||||
|
||||
// 将“缺失元素”替换成原来的字段
|
||||
restoreMissingField: function (html) { |
||||
var self = this; |
||||
|
||||
return html.replaceAll("<img.*?>", function (imageStr) { |
||||
var attrs = getImageAttr(imageStr); |
||||
|
||||
if (attrs && attrs[BICst.RICH_TEXT_INFO.DATA_ORIGIN_ID]) { |
||||
var fullName = attrs[BICst.RICH_TEXT_INFO.DATA_ORIGIN_FULL_NAME]; |
||||
var image = self.getEditorParamImage(fullName); |
||||
|
||||
image = self.appendImageAttr(image, fullName, BICst.RICH_TEXT_INFO.DATA_ID, attrs[BICst.RICH_TEXT_INFO.DATA_ORIGIN_ID]); |
||||
image = self.appendImageAttr(image, fullName, BICst.RICH_TEXT_INFO.DATA_NAME, attrs[BICst.RICH_TEXT_INFO.DATA_ORIGIN_NAME]); |
||||
return image; |
||||
} |
||||
|
||||
if (attrs |
||||
&& attrs[BICst.RICH_TEXT_INFO.DATA_IS_INSERT_PARAM] |
||||
&& !attrs[BICst.RICH_TEXT_INFO.DATA_ID] |
||||
) { |
||||
imageStr = self.appendImageAttr( |
||||
imageStr, |
||||
attrs[BICst.RICH_TEXT_INFO.ALT], |
||||
BICst.RICH_TEXT_INFO.DATA_UN_VALID, |
||||
"true", |
||||
true |
||||
); |
||||
} |
||||
|
||||
return imageStr; |
||||
}); |
||||
}, |
||||
|
||||
// 将富文本字符串中由用户主动插入的字段参数标记出来
|
||||
markTheInsertParamImages: function (html) { |
||||
return html.replaceAll("<img.*?>", function (imageStr) { |
||||
var attrs = getImageAttr(imageStr); |
||||
|
||||
// "缺失元素"和普通的字段参数直接过滤(从富文本编辑器中插入的参数只有data-id属性)
|
||||
if (BI.has(attrs, BICst.RICH_TEXT_INFO.DATA_NAME) |
||||
|| BI.has(attrs, BICst.RICH_TEXT_INFO.DATA_ORIGIN_ID)) { |
||||
return imageStr; |
||||
} |
||||
|
||||
attrs[BICst.RICH_TEXT_INFO.DATA_IS_INSERT_PARAM] = "true"; |
||||
imageStr = "<img "; |
||||
|
||||
BI.each(attrs, function (key, value) { |
||||
imageStr += key + "=\"" + value + "\" "; |
||||
}); |
||||
|
||||
imageStr += "/>"; |
||||
return imageStr; |
||||
}); |
||||
}, |
||||
|
||||
// editor在getValue时因为src太大去掉了，在展示之前需要set 一下src
|
||||
setImageSrc: function (content) { |
||||
var self = this; |
||||
|
||||
return content && content.replaceAll("<img.*?>", function (imageStr) { |
||||
var attrs = self.getImageAttr(imageStr); |
||||
// 已有src
|
||||
if (BI.has(attrs, BICst.RICH_TEXT_INFO.SRC) && attrs[BICst.RICH_TEXT_INFO.SRC]) { |
||||
return imageStr; |
||||
} |
||||
var alt = self.decode(attrs[BICst.RICH_TEXT_INFO.ALT]); |
||||
var image = BI.DOM.getImage(alt); |
||||
imageStr = self.appendImageAttr(imageStr, alt, BICst.RICH_TEXT_INFO.SRC, image.src, true); |
||||
imageStr = self.appendImageAttr(imageStr, alt, "style", image.style, true); |
||||
return imageStr; |
||||
}); |
||||
}, |
||||
|
||||
isEmptyRichText: function (html) { |
||||
return "" === html.replaceAll("<p.*?>|</p>|<br/?>", ""); |
||||
}, |
||||
|
||||
// BI-23091 设置显示名之后更新参数名称
|
||||
getNewParamNameRichText: function (content) { |
||||
if (!content) { |
||||
return content; |
||||
} |
||||
var self = this; |
||||
return content.replaceAll("<img.*?>", function (imageStr) { |
||||
var attrs = self.getImageAttr(imageStr); |
||||
// 缺失元素
|
||||
if (attrs[BICst.RICH_TEXT_INFO.DATA_IS_MISSING_FIELD]) { |
||||
return imageStr; |
||||
} |
||||
var alt = attrs[BICst.RICH_TEXT_INFO.ALT], |
||||
dId = attrs[BICst.RICH_TEXT_INFO.DATA_ID], |
||||
name = BI.Utils.getNotGeoDimensionFullName(dId); |
||||
|
||||
if (name !== alt) { |
||||
imageStr = self.appendImageAttr(imageStr, alt, BICst.RICH_TEXT_INFO.ALT, name, true); |
||||
} |
||||
return imageStr; |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
BI.service("bi.service.design.chart.common.editor", Service); |
||||
|
||||
}()); |
||||
@ -0,0 +1,114 @@
|
||||
!(function () { |
||||
var Widget = BI.inherit(BI.RichEditorParamAction, { |
||||
props: { |
||||
baseCls: "bi-design-chart-common-editor-insert-param", |
||||
dimensionIds: [], |
||||
editor: null |
||||
}, |
||||
|
||||
_store: function () { |
||||
return BI.Models.getModel("bi.model.design.chart.common.editor.insert_param"); |
||||
}, |
||||
|
||||
watch: { |
||||
isSelectedParam: function () { |
||||
var editorService = BI.Services.getService("bi.service.design.chart.common.editor"); |
||||
this.addParam(this.model.param, editorService.encode); |
||||
this.combo.hideView(); |
||||
// this._restorePosition();
|
||||
} |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
|
||||
var adapter = BI.createWidget({ |
||||
type: "bi.button_group", |
||||
items: this.model.items, |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, |
||||
behaviors: {}, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}], |
||||
listeners: [{ |
||||
eventName: BI.ButtonGroup.EVENT_CHANGE, |
||||
action: function () { |
||||
self._savePosition(); |
||||
self.store.changeParam(this.getValue()[0]); |
||||
} |
||||
}] |
||||
}); |
||||
|
||||
var searchPopup = { |
||||
type: "bi.vertical", |
||||
cls: "bi-border", |
||||
hgap: 15, |
||||
tgap: 5, |
||||
bgap: 10, |
||||
items: [{ |
||||
type: "bi.searcher", |
||||
adapter: adapter, |
||||
width: 210, |
||||
height: 24, |
||||
listeners: [{ |
||||
eventName: BI.Searcher.EVENT_CHANGE, |
||||
action: function () { |
||||
self.store.changeParam(this.getValue()[0]); |
||||
} |
||||
}] |
||||
}, adapter] |
||||
}; |
||||
|
||||
return { |
||||
type: "bi.combo", |
||||
direction: "bottom,left", |
||||
isNeedAdjustWidth: false, |
||||
el: { |
||||
type: "bi.vertical_adapt", |
||||
items: [{ |
||||
type: "bi.icon_change_button", |
||||
iconCls: "editor-insert-param-inactivated-font", |
||||
iconWidth: 24, |
||||
iconHeight: 24, |
||||
ref: function (_ref) { |
||||
self.iconButtonTrigger = _ref; |
||||
} |
||||
}] |
||||
}, |
||||
popup: { |
||||
el: searchPopup |
||||
}, |
||||
ref: function (_ref) { |
||||
self.combo = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, |
||||
action: function () { |
||||
self.iconButtonTrigger.setIcon("editor-insert-param-active-font"); |
||||
} |
||||
}, { |
||||
eventName: BI.Combo.EVENT_BEFORE_HIDEVIEW, |
||||
action: function () { |
||||
self.iconButtonTrigger.setIcon("editor-insert-param-inactivated-font"); |
||||
} |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
_savePosition: function () { |
||||
var instance = this._getInstance(); |
||||
instance.saveRng(); |
||||
}, |
||||
|
||||
_restorePosition: function () { |
||||
var instance = this._getInstance(); |
||||
instance.initSelection(); |
||||
}, |
||||
|
||||
_getInstance: function () { |
||||
return this.options.editor.selectedInstance || this.options.editor.getInstance(); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.design.chart.common.editor.insert_param", Widget); |
||||
}()); |
||||
@ -0,0 +1,40 @@
|
||||
/* |
||||
* @Maintainers: xiaofu.qin |
||||
*/ |
||||
!(function () { |
||||
|
||||
var Model = BI.inherit(Fix.Model, { |
||||
context: ["dimensionIds"], |
||||
|
||||
state: function () { |
||||
return { |
||||
param: "", |
||||
isSelectedParam: false |
||||
}; |
||||
}, |
||||
|
||||
computed: { |
||||
items: function () { |
||||
return BI.map(this.model.dimensionIds, function (idx, dId) { |
||||
var key = BI.keys(dId)[0]; |
||||
|
||||
return { |
||||
type: "bi.design.chart.common.editor.search", |
||||
text: key, |
||||
value: dId[key] |
||||
}; |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
actions: { |
||||
changeParam: function (param) { |
||||
this.model.isSelectedParam = !this.model.isSelectedParam; |
||||
this.model.param = param; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
BI.model("bi.model.design.chart.common.editor.insert_param", Model); |
||||
|
||||
} ()); |
||||
@ -0,0 +1,38 @@
|
||||
!(function () { |
||||
|
||||
var Widget = BI.inherit(BI.BasicButton, { |
||||
props: { |
||||
text: "", |
||||
iconCls: "", |
||||
extraCls: "bi-list-item-active" |
||||
}, |
||||
|
||||
render: function () { |
||||
var o = this.options; |
||||
return { |
||||
type: "bi.vertical_adapt", |
||||
height: 25, |
||||
items: [{ |
||||
type: "bi.center_adapt", |
||||
cls: o.iconCls, |
||||
items: [{ |
||||
type: "bi.icon", |
||||
width: 16, |
||||
height: 16 |
||||
}], |
||||
width: 16, |
||||
height: 16 |
||||
}, { |
||||
type: "bi.label", |
||||
textAlign: "left", |
||||
lgap: 5, |
||||
text: o.text, |
||||
value: o.text |
||||
}] |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.design.chart.common.editor.search", Widget); |
||||
|
||||
}()); |
||||
@ -0,0 +1,22 @@
|
||||
/** |
||||
* 灰化toolbar的item |
||||
*/ |
||||
!(function () { |
||||
|
||||
var Widget = BI.inherit(BI.Single, { |
||||
props: { |
||||
button: null |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.vertical_adapt", |
||||
disabled: true, |
||||
items: [this.options.button] |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.design.chart.common.editor.toolbar.disabled_item_wrapper", Widget); |
||||
|
||||
}()); |
||||
@ -0,0 +1,124 @@
|
||||
!(function () { |
||||
var RichEditorTextToolbar = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-rich-editor-text-toolbar", |
||||
height: 25, |
||||
editor: null, |
||||
buttons: [ |
||||
{type: "bi.rich_editor_font_chooser"}, |
||||
{type: "bi.rich_editor_size_chooser"}, |
||||
{type: "bi.rich_editor_bold_button"}, |
||||
{type: "bi.rich_editor_italic_button"}, |
||||
{type: "bi.rich_editor_underline_button"}, |
||||
{type: "bi.rich_editor_color_chooser"}, |
||||
{type: "bi.rich_editor_align_left_button"}, |
||||
{type: "bi.rich_editor_align_center_button"}, |
||||
{type: "bi.rich_editor_align_right_button"}, |
||||
{type: "bi.design.chart.common.editor.insert_param"} |
||||
] |
||||
}, |
||||
|
||||
_store: function () { |
||||
return BI.Models.getModel("bi.model.design.chart.common.editor.toolbar"); |
||||
}, |
||||
|
||||
watch: { |
||||
isAuto: function (isAuto) { |
||||
this[isAuto ? "hideCustomFontTool" : "showCustomFontTool"](); |
||||
} |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, |
||||
o = this.options; |
||||
|
||||
this.hasInsertCombo = o.buttons[o.buttons.length - 1].type === "bi.design.chart.common.editor.insert_param"; |
||||
|
||||
this.buttons = BI.createWidgets(BI.map(o.buttons, function (i, btn) { |
||||
return BI.extend(btn, { |
||||
editor: o.editor |
||||
}); |
||||
})); |
||||
|
||||
if (this.hasInsertCombo) { |
||||
var leftItems = BI.filter(this.buttons, function (idx) { |
||||
return idx !== self.buttons.length - 1; |
||||
}); |
||||
return { |
||||
type: "bi.left_right_vertical_adapt", |
||||
lrgap: 10, |
||||
items: { |
||||
left: this._getButtons(leftItems), |
||||
right: [this.buttons[this.buttons.length - 1]] |
||||
} |
||||
}; |
||||
} |
||||
|
||||
return { |
||||
type: "bi.vertical_adapt", |
||||
rgap: 10, |
||||
items: this._getButtons(this.buttons) |
||||
}; |
||||
}, |
||||
|
||||
mounted: function () { |
||||
var self = this; |
||||
if (BI.isIE9Below()) {// IE8下必须要设置unselectable才能不blur输入框
|
||||
this.element.mousedown(function () { |
||||
self._noSelect(self.element[0]); |
||||
}); |
||||
this._noSelect(this.element[0]); |
||||
} |
||||
|
||||
this.model.isAuto && this.hideCustomFontTool(); |
||||
}, |
||||
|
||||
_noSelect: function (element) { |
||||
if (element.setAttribute && element.nodeName.toLowerCase() !== "input" && element.nodeName.toLowerCase() !== "textarea") { |
||||
element.setAttribute("unselectable", "on"); |
||||
} |
||||
for (var i = 0; i < element.childNodes.length; i++) { |
||||
this._noSelect(element.childNodes[i]); |
||||
} |
||||
}, |
||||
|
||||
hideCustomFontTool: function () { |
||||
var self = this; |
||||
BI.each(this.buttons, function (idx, button) { |
||||
if (self.hasInsertCombo) { |
||||
idx !== self.buttons.length - 1 && button.setVisible(false); |
||||
} else { |
||||
button.setVisible(false); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
showCustomFontTool: function () { |
||||
var self = this; |
||||
BI.each(this.buttons, function (idx, button) { |
||||
if (self.hasInsertCombo) { |
||||
idx !== self.buttons.length - 1 && button.setVisible(true); |
||||
} else { |
||||
button.setVisible(true); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
_getButtons: function (buttons) { |
||||
return BI.map(buttons, function (idx, button) { |
||||
if (button.options.used === false) { |
||||
return { |
||||
type: "bi.design.chart.common.editor.toolbar.disabled_item_wrapper", |
||||
button: button, |
||||
title: button.options.title |
||||
}; |
||||
} |
||||
|
||||
return button; |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.design.chart.common.editor.toolbar", RichEditorTextToolbar); |
||||
})(); |
||||
@ -0,0 +1,12 @@
|
||||
/* |
||||
* @Maintainers: xiaofu.qin |
||||
*/ |
||||
!(function () { |
||||
|
||||
var Model = BI.inherit(Fix.Model, { |
||||
context: ["isAuto", "wId", "dimensionIds"] |
||||
}); |
||||
|
||||
BI.model("bi.model.design.chart.common.editor.toolbar", Model); |
||||
|
||||
} ()); |
||||
Loading…
Reference in new issue