element_carousel

o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json

@@ -94,6 +94,11 @@
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_dropdown,
     "className": "Eldropdown"
   },
+  "elcarousel": {
+    "fontIcon": "el-icon-film",
+    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_carousel,
+    "className": "Elcarousel"
+  },
   "elcommon": {
     "fontIcon": "el-icon-full-screen",
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_common,

o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json

@@ -94,6 +94,11 @@
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_dropdown,
     "className": "Eldropdown"
   },
+  "elcarousel": {
+    "fontIcon": "el-icon-film",
+    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_carousel,
+    "className": "Elcarousel"
+  },
   "elcommon": {
     "fontIcon": "el-icon-full-screen",
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_common,

o2web/source/x_component_process_FormDesigner/Module/Elcarousel.js

+MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
+MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElElement", null, false);
+MWF.xApplication.process.FormDesigner.Module.Elcarousel = MWF.FCElcarousel = new Class({
+	Extends: MWF.FC$ElElement,
+	Implements: [Options, Events],
+	options: {
+		"style": "default",
+		"propertyPath": "../x_component_process_FormDesigner/Module/Elcarousel/elcarousel.html"
+	},
+
+	_initModuleType: function(){
+		this.className = "Elcarousel";
+		this.moduleType = "element";
+		this.moduleName = "elcarousel";
+	},
+	_createElementHtml: function(){
+
+		var html = "<el-carousel";
+		html += " :size=\"size\"";
+		html += " :placement=\"placement\"";
+		// html += " :disabled=\"disabled\"";
+		html += " :trigger=\"trigger\"";
+		html += " :hide-on-click=\"hideOnClick\"";
+
+		if( this.json.showButton && this.json.splitButton ){
+			html += " :split-button=\"splitButton\"";
+			html += " :type=\"buttonType\"";
+		}
+
+		if (this.json.elProperties){
+			Object.keys(this.json.elProperties).forEach(function(k){
+				if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
+			}, this);
+		}
+
+		html += " :style=\"elStyles\">";
+
+		if (this.json.vueSlot){
+			html += this.json.vueSlot;
+		}else{
+			html += this.getButtonHtml();
+		}
+		html += "</el-carousel>";
+
+		return html;
+	},
+	_createCopyNode: function(){
+		this.copyNode = new Element("div", {
+			"styles": this.css.moduleNodeShow
+		});
+		this.copyNode.addEvent("selectstart", function(){
+			return false;
+		});
+	},
+	_getCopyNode: function(){
+		if (!this.copyNode) this._createCopyNode();
+		this.copyNode.setStyle("display", "inline-block");
+		return this.copyNode;
+	},
+	getButtonHtml: function(){
+		if( this.json.showButton ){
+			if( this.json.splitButton ) {
+				return this.json.text || this.json.id;
+			}else{
+				return "<el-button type=\""+this.json.buttonType+"\" size=\""+this.json.size+"\">"+ ( this.json.text || this.json.id ) +
+					"<i class=\"el-icon-arrow-down el-icon--right\"></i>"+
+					"</el-button>";
+			}
+		}else{
+			return " <span class=\"el-dropdown-link\">"+ ( this.json.text || this.json.id ) +
+				"<i class=\"el-icon-arrow-down el-icon--right\"></i>"+
+				"</span>";
+		}
+	},
+	_setEditStyle_custom: function(name){
+		switch (name){
+			case "name": this.setPropertyName(); break;
+			case "id":
+			case "text":
+			case "size":
+			case "buttonType":
+			case "vueSlot":
+				if (this.isPropertyLoaded) if (this.vm) this.resetElement(); break;
+			case "showButton":
+			case "splitButton":
+				if (this.isPropertyLoaded) if (this.vm) this.resetElement(); break;
+			default: break;
+		}
+	},
+	setPropertyName: function(){
+		// if (this.json.name){
+		// 	var input = this.node.getElement("input");
+		// 	if (input) input.set("value", this.json.name);
+		// }
+	},
+	setPropertyId: function(){
+		// if (!this.json.name){
+		// 	var input = this.node.getElement("input");
+		// 	if (input) input.set("value", this.json.id);
+		// }
+	}
+});

o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/css.wcss

+{
+	"moduleNodeMove": {
+		"border-radius": "5px",
+		"border": "1px solid #ffa200",
+		"overflow": "hidden",
+		"margin": "3px",
+		"-webkit-user-select": "none",
+		"-moz-user-select": "none",
+		"position": "absolute",
+		"z-index": 10002,
+		"opacity": 0.7,
+		"cursor": "move",
+		"height": "26px",
+		"line-height": "26px",
+		"padding": "0 10px",
+		"display": "block"
+	},
+	"moduleNodeShow": {
+		"border": "1px solid #333",
+		"margin": "3px",
+		"-webkit-user-select": "none",
+		"-moz-user-select": "none",
+		"position": "static",
+		"top": "auto",
+		"left": "auto",
+		"width": "18px",
+		"height": "2px",
+		"opacity": 0.5,
+		"display": "inline-block",
+		"background": "#ffa200"
+	},
+	"moduleNode": {
+		"border-radius": "5px",
+		"border-top": "1px dashed #999",
+		"border-left": "1px dashed #999",
+		"border-right": "1px dashed #999",
+		"border-bottom": "1px dashed #999",
+		"overflow": "hidden",
+		"cursor": "pointer",
+		"margin": "3px",
+		"-webkit-user-select": "none",
+		"-moz-user-select": "none",
+		"position": "static",
+		"top": "auto",
+		"left": "auto",
+		"opacity": 1,
+		"display": "inline-block"
+	},
+	"moduleNodeError": {
+		"border-radius": "5px",
+		"border-top": "1px dashed #999",
+		"border-left": "1px dashed #999",
+		"border-right": "1px dashed #999",
+		"border-bottom": "1px dashed #999",
+		"height": "40px",
+		"width": "200px",
+		"overflow": "hidden",
+		"cursor": "pointer",
+		"margin": "3px",
+		"-webkit-user-select": "none",
+		"-moz-user-select": "none",
+		"position": "static",
+		"top": "auto",
+		"left": "auto",
+		"opacity": 1,
+		"display": "inline-block"
+	},
+	"buttonIcon": {
+		"height": "26px",
+		"cursor": "pointer",
+		"border": "0px",
+		"margin": "0px"
+	}
+	
+}

o2web/source/x_component_process_FormDesigner/Module/Elcarousel/elcarousel.html

+<div style="background-color: #FFF; overflow: hidden">
+	<div title="{{$.lp.base}}" class="MWFTab">
+		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+		  <tr>
+		    <td class="editTableTitle">{{$.lp.id}}:</td>
+		    <td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
+		  </tr>
+		  <tr>
+		    <td class="editTableTitle">{{$.lp.name}}:</td>
+		    <td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
+		  </tr>
+		</table>
+
+		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+			<tr>
+				<td class="editTableTitle">{{$.lp.height}}:</td>
+				<td class="editTableValue"><input type="number" name="height" value="text{$.height}" class="editTableInput"/></td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.initialIndex}}:</td>
+				<td class="editTableValue"><input type="number" name="initialIndex" value="text{$.initialIndex}" class="editTableInput"/></td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.type}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="carouselType" value="" text{(!$.carouselType)?'checked':''}/>{{$.lp.triggerValue[0]}}
+					<input type="radio" name="carouselType" value="card" text{($.trigger==='card')?'checked':''}/>{{$.lp.triggerValue[1]}}
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.trigger}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="trigger" value="" text{(!$.trigger)?'checked':''}/>{{$.lp.triggerValue[0]}}
+					<input type="radio" name="trigger" value="click" text{($.trigger==='click')?'checked':''}/>{{$.lp.triggerValue[1]}}
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.autoplay}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="autoplay" value="true" text{($.autoplay)?'checked':''}/>{{$.lp.yes}}
+					<input type="radio" name="autoplay" value="false" text{(!$.autoplay)?'checked':''}/>{{$.lp.no}}
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.interval}}:</td>
+				<td class="editTableValue"><input type="number" name="interval" value="text{$.interval}" class="editTableInput"/></td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.indicatorPosition}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="indicatorPosition" value="" text{(!$.indicatorPosition || $.indicatorPosition==='')?'checked':''}/>{{$.lp.indicatorPositionValue[0]}}
+					<input type="radio" name="indicatorPosition" value="outside" text{($.indicatorPosition==='outside')?'checked':''}/>{{$.lp.indicatorPositionValue[1]}}
+					<input type="radio" name="indicatorPosition" value="none" text{($.indicatorPosition==='none')?'checked':''}/>{{$.lp.indicatorPositionValue[2]}}
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.arrow}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="arrow" value="hover" text{(!$.arrow || $.arrow==='hover')?'checked':''}/>{{$.lp.indicatorPositionValue[0]}}
+					<input type="radio" name="arrow" value="always" text{($.arrow==='always')?'checked':''}/>{{$.lp.indicatorPositionValue[1]}}
+					<input type="radio" name="arrow" value="never" text{($.arrow==='never')?'checked':''}/>{{$.lp.indicatorPositionValue[2]}}
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.loop}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="loop" value="true" text{($.loop)?'checked':''}/>{{$.lp.yes}}
+					<input type="radio" name="loop" value="false" text{(!$.loop)?'checked':''}/>{{$.lp.no}}
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.direction}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="direction" value="horizontal" text{(!$.direction || $.direction==='horizontal')?'checked':''}/>default
+					<input type="radio" name="direction" value="vertical" text{($.direction==='vertical')?'checked':''}/>large
+				</td>
+			</tr>
+		</table>
+
+		<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
+		<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
+
+		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+			<tr>
+				<td class="editTableTitle">{{$.lp.compute}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="compute" value="create" text{(!$.compute || $.compute=='create')?'checked':''}/>{{$.lp.create}}
+					<input type="radio" name="compute" value="save" text{($.compute=='save')?'checked':''}/>{{$.lp.save}}
+					<input type="radio" name="compute" value="show" text{($.compute=='show')?'checked':''}/>{{$.lp.show}}
+				</td>
+			</tr>
+		</table>
+
+		<div class="MWFScriptArea" name="defaultValue" title="{{$.lp.defaultValue}} (S)"></div>
+
+		<div class="MWFValidation" name="validationConfig"></div>
+		<div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div>
+		
+	</div>
+	<div title="{{$.lp.menuItem}}"  class="MWFTab">
+		<table>
+			<tr>
+				<td class="editTableTitle"></td>
+				<td class="editTableValue">
+					<input type="radio" name="dataType" value="json" text{($.dataType!=='script')?'checked':''}
+						   onclick="if (this.checked){
+							$('text{$.pid}dataJson').setStyle('display', '');
+							$('text{$.pid}dataScript').setStyle('display', 'none');
+						}"
+					/>{{$.lp.data}}
+					<input type="radio" name="dataType" value="script" text{($.dataType==='script')?'checked':''}
+						   onclick="if (this.checked){
+							$('text{$.pid}dataJson').setStyle('display', 'none');
+							$('text{$.pid}dataScript').setStyle('display', '');
+						}"
+					/>{{$.lp.script}}
+				</td>
+			</tr>
+		</table>
+		<div id="text{$.pid}dataJson" class="MWFElTDropdownData" name="dataJson" style="display: text{($.dataType=='script')?'none':''}"></div>
+		<div id="text{$.pid}dataScript" style="display: text{($.dataType=='script')?'':'none'}">
+			<div style="padding: 5px;">脚本返回选项数组，格式如下：<br/>return [{ <br/>
+				  "label" : "", //显示的文本, string<br/>
+				&nbsp;&nbsp;"command" : "", //指令,菜单项的点击事件（command）可以接收到,string/number/object <br/>
+				&nbsp;&nbsp;"disabled" : false, //是否禁用, boolean<br/>
+				&nbsp;&nbsp;"divided" : false, //是否显示分割线，boolean<br/>
+				&nbsp;&nbsp;"icon" : "" // 图标类名, string<br/>
+				}, ...]; </div>
+			<div class="MWFScriptArea" name="dataScript"></div>
+		</div>
+	</div>
+	<div title="Vue"  class="MWFTab">
+		<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Data</div>
+		<div style="display: text{($.vueData && $.vueData.code) ? 'block': 'none'}" class="MWFScriptArea" name="vueData" title="Vue Data (S)"></div>
+		<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Method</div>
+		<div div style="display: text{($.vueMethods && $.vueMethods.code) ? 'block': 'none'}" class="MWFScriptArea" name="vueMethods" title="Vue Methods (S)"></div>
+		<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue CSS</div>
+		<div div style="display: text{($.vueCss && $.vueCss.code) ? 'block': 'none'}" class="MWFCssArea" name="vueCss" title="Vue Css (S)"></div>
+
+		<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Slots</div>
+		<div style="display: text{($.vueSlot) ? 'block' : 'none'}">
+			<div class="MWFHtmlEditorArea" name="vueSlot" title="Input Slot (HTML)"></div>
+		</div>
+	</div>
+	<div title="{{$.lp.event}}"  class="MWFTab">
+		<div class="MWFEventsArea" name="events"></div>
+	</div>
+	<div title="HTML"  class="MWFTab">
+		<div class="MWFHTMLArea" style="width:100%; height:400px; border:0px;font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
+	</div>
+	<div title="JSON"  class="MWFTab">
+		<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
+	</div>
+</div>

o2web/source/x_component_process_FormDesigner/Module/Elcarousel/template.json

+{
+	"id": "",
+	"name": "",
+	"type": "Elcarousel",
+	"disabled": false,
+	"size" : "",
+	"text": "",
+	"placement": "bottom-end",
+	"trigger": "hover",
+	"hideOnClick": true,
+	"showButton": true,
+	"splitButton": false,
+	"buttonType": "",
+	"showTimeout": 250,
+	"hideTimeout": 150,
+	"dataType": "json",
+	"vueData": {},
+	"vueMethods": {},
+	"vueCss": {},
+	"vueSlot": "",
+	"elProperties": {},
+	"elStyles": {},
+	"events": {
+	  "queryLoad": {
+		"code": "",
+		"html": ""
+	  },
+	  "postLoad": {
+		"code": "",
+		"html": ""
+	  },
+		"load": {
+		  "code": "",
+		  "html": ""
+		},
+		"change": {
+			"code": "",
+			"html": ""
+		}
+	},
+	"properties": {},
+	"class": "",
+	"styles": {},
+	"container": ""
+}

o2web/source/x_component_process_FormDesigner/Module/Package.js

@@ -74,4 +74,5 @@ MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elrate", null, false);
 MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcolorpicker", null, false);
 MWF.xDesktop.requireApp("process.FormDesigner", "Module.Eltree", null, false);
 MWF.xDesktop.requireApp("process.FormDesigner", "Module.Eldropdown", null, false);
+MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcarousel", null, false);
 MWF.xDesktop.requireApp("process.FormDesigner", "Module.SmartBI", null, false);
\ No newline at end of file

o2web/source/x_component_process_FormDesigner/lp/en.js

@@ -354,6 +354,7 @@ MWF.xApplication.process.FormDesigner.LP = {
         "el_colorpicker": "ColorPicker",
         "el_tree": "Tree",
         "el_dropdown": "Dropdown",
+        "el_carousel": "Carousel",
         "el-menu": "menu",
         "el_common": "Common",
 

o2web/source/x_component_process_FormDesigner/lp/zh-cn.js

@@ -354,6 +354,7 @@ MWF.xApplication.process.FormDesigner.LP = {
         "el_colorpicker": "颜色选择",
         "el_tree": "树",
         "el_dropdown": "下拉菜单",
+        "el_carousel": "幻灯片",
         "el-menu": "导航菜单",
         "el_common": "通用",