diff --git a/o2web/source/o2_core/o2/widget/$Tablet/default/css.wcss b/o2web/source/o2_core/o2/widget/$Tablet/default/css.wcss index 492bf601f7fb59705df5adaa55929de214bc7f64..ff946d26b86fc2edbc3551af39795f73ec00a4c7 100644 --- a/o2web/source/o2_core/o2/widget/$Tablet/default/css.wcss +++ b/o2web/source/o2_core/o2/widget/$Tablet/default/css.wcss @@ -87,5 +87,64 @@ "canvasWrap": { "border": "1px solid #ccc", "margin": "0px auto" + }, + "cancel_mobile": { + "color": "#333", + "font-size": "16px", + "width": "36px", + "height": "36px", + "font-weight": "bold", + "position": "absolute", + "top": "20px", + "left": "30px" + }, + "save_mobile": { + "color": "#4A90E2", + "font-size": "16px", + "width": "36px", + "height": "36px", + "font-weight": "bold", + "position": "absolute", + "top": "20px", + "right": "30px" + }, + "undo_mobile": { + "background":"#fff url(../o2_core/o2/widget/$Tablet/default/icon/undo_normal.png) no-repeat center center", + "width": "36px", + "height": "36px", + "border-radius": "18px", + "box-shadow": "5px 4px 5px #ccc", + "position": "absolute", + "bottom": "20px", + "right": "130px" + }, + "undo_mobile_disable": { + "background":"#fff url(../o2_core/o2/widget/$Tablet/default/icon/undo_disable.png) no-repeat center center" + }, + "redo_mobile": { + "background":"#fff url(../o2_core/o2/widget/$Tablet/default/icon/redo_normal.png) no-repeat center center", + "width": "36px", + "height": "36px", + "border-radius": "18px", + "box-shadow": "5px 4px 5px #ccc", + "position": "absolute", + "bottom": "20px", + "right": "80px" + }, + "redo_mobile_disable": { + "background":"#fff url(../o2_core/o2/widget/$Tablet/default/icon/redo_disable.png) no-repeat center center" + }, + "reset_mobile": { + "background":"#fff url(../o2_core/o2/widget/$Tablet/default/icon/reset_normal.png) no-repeat center center", + "width": "36px", + "height": "36px", + "border-radius": "18px", + "box-shadow": "5px 4px 5px #ccc", + "position": "absolute", + "bottom": "20px", + "right": "30px" + }, + "reset_mobile_disable": { + "background":"#fff url(../o2_core/o2/widget/$Tablet/default/icon/reset_disable.png) no-repeat center center" } } \ No newline at end of file diff --git a/o2web/source/o2_core/o2/widget/Tablet.js b/o2web/source/o2_core/o2/widget/Tablet.js index 0a3070ac356c65cbbacddc4362f988dbf88da4a4..5dba2ee58cd1615ed3aade382f6b21964d0d7899 100644 --- a/o2web/source/o2_core/o2/widget/Tablet.js +++ b/o2web/source/o2_core/o2/widget/Tablet.js @@ -26,7 +26,9 @@ o2.widget.Tablet = o2.Tablet = new Class({ //"clear" //橡皮 "cancel" ], + "toolHidden": [], "description" : "", //描述文字 + "imageSrc": "", "action" : null, //uploadImage方法的上传服务，可选，如果不设置，使用公共图片服务 @@ -36,7 +38,9 @@ o2.widget.Tablet = o2.Tablet = new Class({ "data": null, //formdata 的data "reference": "", //uploadImage方法的使用 使用公共图片服务上传时的参数 "referenceType" : "", //使用公共图片服务上传时的参数, 目前支持 processPlatformJob, processPlatformForm, portalPage, cmsDocument, forumDocument - "resultMaxSize" : 0 //使用 reference 时有效 + "resultMaxSize" : 0, //使用 reference 时有效 + + "rotateWithMobile": true }, initialize: function(node, options, app){ this.node = node; @@ -65,6 +69,9 @@ o2.widget.Tablet = o2.Tablet = new Class({ this.fireEvent("init"); }, load: function( ){ + if( layout.mobile && this.options.rotateWithMobile ){ + this.rotate = true; + } //存储当前表面状态数组-上一步 this.preDrawAry = []; //存储当前表面状态数组-下一步 @@ -76,6 +83,10 @@ o2.widget.Tablet = o2.Tablet = new Class({ styles : this.css.container }).inject(this.node); + if( this.rotate ){ //强制横屏显示 + this.detectOrient(); + } + this.loadToolBar(); this.contentNode = new Element("div.contentNode", { styles : this.css.contentNode}).inject(this.container); @@ -113,36 +124,9 @@ o2.widget.Tablet = o2.Tablet = new Class({ } }, setContentSize : function(){ - var nodeSize = this.node.getSize(); - - this.contentWidth = this.options.contentWidth || nodeSize.x; - if( this.contentWidth < 100 )this.contentWidth = 100; + debugger; + this.computeContentSize(); this.contentNode.setStyle("width", this.contentWidth ); - - if( this.options.contentHeight ){ - this.contentHeight = this.options.contentHeight; - }else{ - var toolbarSize = this.toolbarNode ? this.toolbarNode.getSize() : { x : 0, y : 0 }; - var descriptionSize = this.descriptionNode ? this.descriptionNode.getSize() : { x : 0, y : 0 }; - - var toolbarMargin = this.toolbarNode ? this.toolbarNode.getStyles("margin-top", "margin-bottom", "padding-top", "padding-bottom", "bordrt-top-width", "bordrt-bottom-width") : null; - var m1 = (toolbarMargin) ? toolbarMargin["margin-top"].toInt()+toolbarMargin["margin-bottom"].toInt()+ - toolbarMargin["padding-bottom"].toInt()+toolbarMargin["padding-top"].toInt()+ - (toolbarMargin["bordrt-top-width"].toInt() || 0)+(toolbarMargin["bordrt-bottom-width"].toInt() || 0) : 0; - - var descriptionMargin = this.descriptionNode ? this.descriptionNode.getStyles("margin-top", "margin-bottom", "padding-top", "padding-bottom", "bordrt-top-width", "bordrt-bottom-width") : null; - var m2 = (descriptionMargin) ? descriptionMargin["margin-top"].toInt()+descriptionMargin["margin-bottom"].toInt()+ - descriptionMargin["padding-bottom"].toInt()+descriptionMargin["padding-top"].toInt()+ - (descriptionMargin["bordrt-top-width"].toInt() || 0)+(descriptionMargin["bordrt-bottom-width"].toInt() || 0) : 0; - - var contentMargin = this.contentNode.getStyles("margin-top", "margin-bottom", "padding-top", "padding-bottom", "bordrt-top-width", "bordrt-bottom-width"); - var m3 = contentMargin["margin-top"].toInt()+contentMargin["margin-bottom"].toInt()+ - contentMargin["padding-bottom"].toInt()+contentMargin["padding-top"].toInt()+ - (contentMargin["bordrt-top-width"].toInt() || 0)+(contentMargin["bordrt-bottom-width"].toInt() || 0); - - this.contentHeight = nodeSize.y - toolbarSize.y - descriptionSize.y - m1 - m2 - m3; - } - if( this.contentHeight < 150 )this.contentHeight = 150; this.contentNode.setStyle("height", this.contentHeight ); if(this.canvasWrap){ @@ -159,13 +143,72 @@ o2.widget.Tablet = o2.Tablet = new Class({ this.ctx.putImageData(d,0,0); } }, + computeContentSize: function(){ + var toolbarSize,descriptionSize, m1,m2,m3; + var nodeSize = this.node.getSize(); + if( this.rotate && this.transform > 0 ){ + this.contentWidth = this.options.contentHeight || nodeSize.y; + if( this.contentWidth < 150 )this.contentWidth = 150; + + if( this.options.contentWidth ){ + this.contentHeight = this.options.contentWidth; + }else{ + toolbarSize = this.toolbarNode ? this.toolbarNode.getSize() : { x : 0, y : 0 }; + descriptionSize = this.descriptionNode ? this.descriptionNode.getSize() : { x : 0, y : 0 }; + m1 = this.getOffsetX(this.toolbarNode); + m2 = this.getOffsetX(this.descriptionNode); + m3 = this.getOffsetX(this.contentNode); + this.contentOffSetX = toolbarSize.x + descriptionSize.x + m1 + m2 + m3; + this.contentHeight = nodeSize.x - toolbarSize.x - descriptionSize.x - m1 - m2 - m3; + } + if( this.contentHeight < 100 )this.contentHeight = 100; + }else{ + this.contentWidth = this.options.contentWidth || nodeSize.x; + if( this.contentWidth < 100 )this.contentWidth = 100; + + if( this.options.contentHeight ){ + this.contentHeight = this.options.contentHeight; + }else{ + toolbarSize = this.toolbarNode ? this.toolbarNode.getSize() : { x : 0, y : 0 }; + descriptionSize = this.descriptionNode ? this.descriptionNode.getSize() : { x : 0, y : 0 }; + m1 = this.getOffsetY(this.toolbarNode); + m2 = this.getOffsetY(this.descriptionNode); + m3 = this.getOffsetY(this.contentNode); + this.contentHeight = nodeSize.y - toolbarSize.y - descriptionSize.y - m1 - m2 - m3; + } + if( this.contentHeight < 150 )this.contentHeight = 150; + } + }, + getOffsetY : function(node){ + if( !node )return 0; + return (node.getStyle("margin-top").toInt() || 0 ) + + (node.getStyle("margin-bottom").toInt() || 0 ) + + (node.getStyle("padding-top").toInt() || 0 ) + + (node.getStyle("padding-bottom").toInt() || 0 )+ + (node.getStyle("border-top-width").toInt() || 0 ) + + (node.getStyle("border-bottom-width").toInt() || 0 ); + }, + getOffsetX : function(node){ + if( !node )return 0; + return (node.getStyle("margin-left").toInt() || 0 ) + + (node.getStyle("margin-right").toInt() || 0 ) + + (node.getStyle("padding-left").toInt() || 0 ) + + (node.getStyle("padding-right").toInt() || 0 )+ + (node.getStyle("border-left-width").toInt() || 0 ) + + (node.getStyle("border-right-width").toInt() || 0 ); + }, loadToolBar: function(){ - this.toolbarNode = new Element("div.toolbar", { - "styles" : this.css.toolbar - }).inject(this.container); + if(layout.mobile){ + this.toolbar = new o2.widget.Tablet.ToolbarMobile( this ); + this.toolbar.load(); + }else{ + this.toolbarNode = new Element("div.toolbar", { + "styles" : this.css.toolbar + }).inject(this.container); - this.toolbar = new o2.widget.Tablet.Toolbar( this , this.toolbarNode ); - this.toolbar.load(); + this.toolbar = new o2.widget.Tablet.Toolbar( this , this.toolbarNode ); + this.toolbar.load(); + } }, storeToPreArray : function(){ //当前绘图表面状态 @@ -193,6 +236,7 @@ o2.widget.Tablet = o2.Tablet = new Class({ } }, loadContent : function( ){ + var _self = this; this.canvasWrap = new Element("div.canvasWrap", { styles : this.css.canvasWrap}).inject(this.contentNode); this.canvasWrap.setStyles({ @@ -207,10 +251,22 @@ o2.widget.Tablet = o2.Tablet = new Class({ this.ctx = this.canvas.getContext("2d"); - - var preData=this.ctx.getImageData(0,0,this.contentWidth,this.contentHeight); - //空绘图表面进栈 - this.middleAry.push(preData); + if( this.options.imageSrc ){ + var img = new Element("img", { + "crossOrigin": "", + "src": this.options.imageSrc, + "events": { + "load": function () { + _self.ctx.drawImage(this, 0, 0); + var preData=_self.ctx.getImageData(0,0,_self.contentWidth,_self.contentHeight); + _self.middleAry.push(preData); + } + } + }) + }else{ + var preData=this.ctx.getImageData(0,0,this.contentWidth,this.contentHeight); + this.middleAry.push(preData); + } this.canvas.ontouchstart = this.canvas.onmousedown = function(ev){ var ev = ev || event; @@ -224,12 +280,33 @@ o2.widget.Tablet = o2.Tablet = new Class({ if( this.options.lineWidth )ctx.lineWidth= this.currentWidth || this.options.lineWidth; //默认1 像素 ctx.beginPath(); - ctx.moveTo(ev.clientX-position.x,ev.clientY-position.y); + + var x , y; + if(this.rotate && _self.transform > 0){ + var clientY = ev.type.indexOf('touch') !== -1 ? ev.touches[0].clientY : ev.clientY; + var clientX = ev.type.indexOf('touch') !== -1 ? ev.touches[0].clientX : ev.clientX; + var newX = clientY; + var newY = _self.canvas.height - clientX; //y轴旋转偏移 // - parseInt(_self.transformOrigin) + }else{ + x = ev.clientX-position.x; + y = ev.clientY-position.y + } + + ctx.moveTo(x, y); this.storeToPreArray(); var mousemove = function(ev){ - ctx.lineTo(ev.client.x - position.x,ev.client.y - position.y); + debugger; + var mx , my; + if(_self.rotate && _self.transform > 0){ + mx = ev.client.y; + my = _self.canvas.height - ev.client.x //y轴旋转偏移 // - + parseInt(_self.transformOrigin); + }else{ + mx = ev.client.x - position.x; + my = ev.client.y - position.y; + } + ctx.lineTo(mx, my); ctx.stroke(); }; doc.addEvent( "mousemove", mousemove ); @@ -254,6 +331,40 @@ o2.widget.Tablet = o2.Tablet = new Class({ //} }.bind(this) }, + detectOrient: function(){ + // 利用 CSS3 旋转 对根容器逆时针旋转 90 度 + var size = $(document.body).getSize(); + var width = size.x, + height = size.y, + styles = {}; + + if( width >= height ){ // 横屏 + this.transform = 0; + this.transformOrigin = 0; + styles = { + "width": width+"px", + "height": height+"px", + "webkit-transform": "rotate(0)", + "transform": "rotate(0)", + "webkit-transform-origin": "0 0", + "transform-origin": "0 0" + } + } + else{ // 竖屏 + this.options.lineWidth = 1.5; + this.transform = 90; + this.transformOrigin = width / 2; + styles = { + "width": height+"px", + "height": width+"px", + "webkit-transform": "rotate(90deg)", + "transform": "rotate(90deg)", + "webkit-transform-origin": ( this.transformOrigin + "px " + this.transformOrigin + "px"), + "transform-origin": ( this.transformOrigin + "px " + this.transformOrigin + "px") + } + } + this.container.setStyles(styles); + }, uploadImage: function( success, failure ){ var image = this.getImage( null, true ); if( image ){ @@ -578,6 +689,16 @@ o2.widget.Tablet.Toolbar = new Class({ ]; } + items = items.filter(function(tool){ + return !(this.tablet.options.toolHidden || []).contains(tool) + }.bind(this)); + items = items.clean(); + + for( var i=1; i{{$.lp.writingBoard}}
{{$.lp.width}}: px +
({{$.lp.tabletSizeNote}})
{{$.lp.writingBoard}}
{{$.lp.height}}: px +
({{$.lp.tabletSizeNote}})
diff --git a/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/default/css.wcss b/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/default/css.wcss index f5db2b83e47b13c4d21f8eb609a301e1f77dc49d..2eab7f20f5a704fe7f69e98657abb282a9ee6a19 100644 --- a/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/default/css.wcss +++ b/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/default/css.wcss @@ -47,7 +47,7 @@ "cursor": "pointer", "height": "25px", "line-height": "25px", - "width": "30px", + "min-width": "30px", "padding-left": "24px", "padding-right": "5px", "margin-left": "5px", diff --git a/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/writingBoard.html b/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/writingBoard.html index 1615a7e7516da7f026560a7aa37c4cf26594b808..2431eeae31459e158a6f7af370fd1714ab27f6d5 100644 --- a/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/writingBoard.html +++ b/o2web/source/x_component_process_FormDesigner/Module/WritingBoard/writingBoard.html @@ -27,12 +27,24 @@ {{$.lp.tabletWidth}} px +
({{$.lp.tabletSizeNote}})
{{$.lp.tabletHeight}} px +
({{$.lp.tabletSizeNote}})
+ + + + {{$.lp.actionBar}}: + + {{$.lp.hideSizeButton}}
+ {{$.lp.hideColorButton}}
+ {{$.lp.hideImageButton}}
+ {{$.lp.hideImageClipperButton}}
+
({{$.lp.tabletToolbarNote}})
diff --git a/o2web/source/x_component_process_FormDesigner/lp/en.js b/o2web/source/x_component_process_FormDesigner/lp/en.js index 9d66acb5f4b8f7dcafe2a4735e350a594a9e9b46..5f97fe0cd13558dc5bedd24666ae22d06945b153 100644 --- a/o2web/source/x_component_process_FormDesigner/lp/en.js +++ b/o2web/source/x_component_process_FormDesigner/lp/en.js @@ -594,6 +594,11 @@ MWF.xApplication.process.FormDesigner.LP = { "hideModeButton": "Hide Mode Button", "showInDatagrid": "Show In Datagrid", + "hideSizeButton": "Hide Size Button", + "hideColorButton": "Hide Color Button", + "hideImageButton": "Hide the Insert Picture Button", + "hideImageClipperButton": "Hide ImageClipper Button", + "tableSize": "Table Size", "row": "Row", "col": "Column", diff --git a/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js b/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js index ab58b4d55f69f8bbe31884246dea3a6a6ab78110..f6793891cddeebcb25070247be297a3ec77cd9f5 100644 --- a/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js +++ b/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js @@ -597,6 +597,11 @@ MWF.xApplication.process.FormDesigner.LP = { "hideModeButton": "隐藏模式操作", "showInDatagrid": "数据网格中的展现", + "hideSizeButton": "隐藏粗细按钮", + "hideColorButton": "隐藏颜色按钮", + "hideImageButton": "隐藏插入图片按钮", + "hideImageClipperButton": "隐藏图片剪切按钮", + "tableSize": "表格大小", "row": "行", "col": "列", @@ -1205,7 +1210,9 @@ MWF.xApplication.process.FormDesigner.LP = { "logoUrl":"logo链接" }, "tabletWidth": "手写板宽度", - "tabletHeight": "手写板高度" + "tabletHeight": "手写板高度", + "tabletSizeNote": "仅PC端有效，移动端横向满屏", + "tabletToolbarNote": "仅PC端有效，移动端不显示" }, "actionBar": { "close":"关闭", diff --git a/o2web/source/x_component_process_Xform/$Module.js b/o2web/source/x_component_process_Xform/$Module.js index c2f84ee06df23eafc807d916d10febb14af76323..23149774ed5058b53932a71e306a4ff961876f44 100644 --- a/o2web/source/x_component_process_Xform/$Module.js +++ b/o2web/source/x_component_process_Xform/$Module.js @@ -487,7 +487,6 @@ MWF.xApplication.process.Xform.$Module = MWF.APP$Module = new Class( } }, setBusinessDataById: function(v, id){ - debugger; //对id类似于 xx..0..xx 的字段进行拆分 var evdata = this.form.Macro.environment.data; var data = this.form.businessData.data; diff --git a/o2web/source/x_component_process_Xform/Opinion.js b/o2web/source/x_component_process_Xform/Opinion.js index 492f4a40aeae985539695f10f9c3661fb9d3126a..b29bf8d748ab19444486a50d0b03bafd1727ecdd 100644 --- a/o2web/source/x_component_process_Xform/Opinion.js +++ b/o2web/source/x_component_process_Xform/Opinion.js @@ -360,7 +360,12 @@ MWF.xApplication.process.Xform.Opinion = MWF.APPOpinion = new Class( this.previewNode.destroy(); this.previewNode = null; } - if(this.json.isHandwritingPreview!=="no") this.previewNode = new Element("img", {"src": base64Image}).inject(this.node); + if(this.json.isHandwritingPreview!=="no"){ + this.previewNode = new Element("img", {"src": base64Image}).inject(this.node); + this.previewNode.setStyles({ + "max-width": "90%" + }) + } this.handwritingNode.hide(); // this.page.get("div_image").node.set("src",base64Image); }.bind(this), diff --git a/o2web/source/x_component_process_Xform/WritingBoard.js b/o2web/source/x_component_process_Xform/WritingBoard.js index 48d6e7615dc2360ed37963de3745080ea78d6d25..204642dcdf00ba3e0b1d504656a4fc8a584bac29 100644 --- a/o2web/source/x_component_process_Xform/WritingBoard.js +++ b/o2web/source/x_component_process_Xform/WritingBoard.js @@ -11,346 +11,436 @@ MWF.xDesktop.requireApp("process.Xform", "$Module", null, false); * @o2range {Process|CMS} * @hideconstructor */ -MWF.xApplication.process.Xform.WritingBoard = MWF.APPWritingBoard = new Class( +MWF.xApplication.process.Xform.WritingBoard = MWF.APPWritingBoard = new Class( /** @lends MWF.xApplication.process.Xform.WritingBoard# */ { - Implements: [Events], - Extends: MWF.APP$Module, - initialize: function(node, json, form, options){ - this.node = $(node); - this.node.store("module", this); - this.json = json; - this.form = form; - this.field = true; - this.fieldModuleLoaded = false; - }, - _loadUserInterface: function(){ - debugger; - this.field = true; - this.node.empty(); + Implements: [Events], + Extends: MWF.APP$Module, + initialize: function (node, json, form, options) { + this.node = $(node); + this.node.store("module", this); + this.json = json; + this.form = form; + this.field = true; + this.fieldModuleLoaded = false; + }, + _loadUserInterface: function () { + debugger; + this.field = true; + this.node.empty(); - if( !this.readonly && !this.json.isReadonly ){ + if (!this.readonly && !this.json.isReadonly) { - var actionNode = new Element("div").inject( this.node ); - actionNode.set({ - //"id": this.json.id, - "text": this.json.name || this.json.id, - "styles": this._parseStyles(this.json.actionStyles||{}) - }); - actionNode.addEvent("click", function(){ - this.validationMode(); - var d = this._getBusinessData(); - if (layout.mobile){ - o2.writingBoardCallback = function( str ){ - var data = JSON.parse( str ); - this.setData( data ? data.fileId : "" ); - this.validation(); - o2.writingBoardCallback = null; - }.bind(this); - // 兼容cms编辑表单 - var referencetype = "processPlatformJob"; - if(this.form.businessData.work && this.form.businessData.work.referencetype) { - referencetype = this.form.businessData.work.referencetype - } - var jsonString = JSON.stringify({ - "mwfId" : this.json.id, - "callback" : "o2.writingBoardCallback", - "referencetype": referencetype, - "reference": this.form.businessData.work.job - }); - if( window.o2android && window.o2android.uploadImage2FileStorage ){ - window.o2android.uploadImage2FileStorage(jsonString) - }else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.uploadImage2FileStorage){ - window.webkit.messageHandlers.uploadImage2FileStorage.postMessage(jsonString); - }else { - this.selectImage( d, function(data){ - this.setData( data ? data.id : "" ); - this.validation(); - }.bind(this)); + var actionNode = new Element("div").inject(this.node); + actionNode.set({ + //"id": this.json.id, + "text": this.json.name || this.json.id, + "styles": this._parseStyles(this.json.actionStyles || {}) + }); + actionNode.addEvent("click", function () { + this.validationMode(); + var d = this._getBusinessData(); + if (layout.mobile) { + window.setTimeout(function () { + this.handwriting(d); + }.bind(this), 100) + } else { + this.handwriting(d); } - }else{ - this.selectImage( d, function(data){ - this.setData( data ? data.id : "" ); - this.validation(); - }.bind(this)); - } - }.bind(this)); - } + }.bind(this)); + } - var data = this._getBusinessData(); - if( data ){ - var img = new Element("img",{ - src : MWF.xDesktop.getImageSrc( data ) - }); - if( this.json.imageStyles ){ + var data = this._getBusinessData(); + if (data) { + var img = new Element("img", { + src: MWF.xDesktop.getImageSrc(data) + }); + if (this.json.imageStyles) { + img.setStyles(this._parseStyles(this.json.imageStyles)); + } + if( !this.json.imageStyles || !this.json.imageStyles["max-width"] ){ + img.setStyles({ + "max-width": "90%" + }) + } + img.inject(this.node); + } + + this.fieldModuleLoaded = true; + }, + getTextData: function () { + var value = this._getBusinessData() || ""; + return {"value": [value], "text": [value]}; + }, + /** + * @summary 判断组件值是否为空. + * @example + * if( this.form.get('fieldId').isEmpty() ){ + * this.form.notice('请进行手写', 'warn'); + * } + * @return {Boolean} 值是否为空. + */ + isEmpty: function () { + return !this.getData(); + }, + /** + * 获取手写图片的ID。 + * @summary 获取手写图片的ID。 + * @example + * var id = this.form.get('fieldId').getData(); //获取手写图片的ID + * var url = MWF.xDesktop.getImageSrc( id ); //获取图片的url + */ + getData: function (data) { + return this._getBusinessData() || ""; + }, + setData: function (data) { + this._setBusinessData(data); + var img = this.node.getElement("img"); + if( !data ){ + if(img)img.destroy(); + return; + } + if (img){ + img.set("src", MWF.xDesktop.getImageSrc(data)) + }else{ + img = new Element("img", { + src: MWF.xDesktop.getImageSrc(data) + }).inject(this.node); + } + if (this.json.imageStyles) { img.setStyles(this._parseStyles(this.json.imageStyles)); - }else if (layout.mobile || COMMON.Browser.Platform.isMobile) { + } + if( !this.json.imageStyles || !this.json.imageStyles["max-width"] ){ img.setStyles({ "max-width": "90%" }) } - img.inject( this.node ); - } + }, + /** + * @summary 弹出手写板. + * @example + * this.form.get("fieldId").handwriting(); + */ + handwriting: function () { + if (!this.handwritingNode) this.createHandwriting(); + this.handwritingNode.show(); + if (layout.mobile) { + this.handwritingNode.setStyles({ + "top": "0px", + "left": "0px" + }); - this.fieldModuleLoaded = true; - }, - getTextData : function(){ - var value = this._getBusinessData() || ""; - return {"value": [value], "text": [value]}; - }, - /** - * @summary 判断组件值是否为空. - * @example - * if( this.form.get('fieldId').isEmpty() ){ - * this.form.notice('请上传图片', 'warn'); - * } - * @return {Boolean} 值是否为空. - */ - isEmpty : function(){ - return !this.getData(); - }, - /** - * 获取上传的图片ID。 - * @summary 获取上传的图片ID。 - * @example - * var id = this.form.get('fieldId').getData(); //获取上传的图片id - * var url = MWF.xDesktop.getImageSrc( id ); //获取图片的url - */ - getData: function( data ){ - return this._getBusinessData() || ""; - }, - setData: function( data ){ - this._setBusinessData(data); - var img = this.node.getElements("img"); - if( img && img.length )img.destroy(); - if( !data )return; - var img = new Element("img",{ - src : MWF.xDesktop.getImageSrc( data ) - }).inject( this.node, "top" ); - if (layout.mobile || COMMON.Browser.Platform.isMobile) { - img.setStyles({ - "max-width": "90%" - }) - }else if( this.json.clipperType == "size" ){ - var width = (this.json.imageWidth) ? this.json.imageWidth.toInt() : 600; - var height = (this.json.imageHeight) ? this.json.imageHeight.toInt() : 500; - if (width && height) { - img.setStyles({ - width: width + "px", - height: height + "px" - }) + } else { + this.handwritingNode.position({ + "relativeTo": this.node, + "position": "center", + "edge": "center" + }); + //var p = this.handwritingNode.getPosition(this.form.app.content); + var p = this.handwritingNode.getPosition(this.handwritingNode.getOffsetParent()); + var top = p.y; + var left = p.x; + if (p.y < 0) top = 10; + if (p.x < 0) left = 10; + this.handwritingNode.setStyles({ + "top": "" + top + "px", + "left": "" + left + "px" + }); } - } - }, - selectImage: function(d, callback){ - var clipperType = this.json.clipperType || "unrestricted"; - var ratio = 1; - var description = ""; - var maxSize = 800; - if( clipperType == "unrestricted" ){ - ratio = 0; - }else if( clipperType == "size" ){ - var width = (this.json.imageWidth) ? this.json.imageWidth.toInt() : 600; - var height = (this.json.imageHeight) ? this.json.imageHeight.toInt() : 500; - ratio = width / height; - maxSize = Math.max( width, height ); - if( !isNaN( width ) && !isNaN( height ) ){ - description = MWF.LP.widget.pictureSize.replace(/{width}/g, width).replace(/{height}/g, height); + }, + createHandwriting: function () { + /** + * @summary 手写板容器. + * @member {Element} + */ + debugger; + this.handwritingNode = new Element("div", {"styles": this.form.css.handwritingNode}).inject(this.node, "after"); + var x, y; + if(layout.mobile){ + var bodySize = $(document.body).getSize(); + x = bodySize.x; + y = bodySize.y; + this.json.tabletWidth = 0; + this.json.tabletHeight = 0; + }else{ + var size = this.node.getSize(); + x = Math.max(this.json.tabletWidth || size.x, 500); + y = Math.max(this.json.tabletHeight ? (parseInt(this.json.tabletHeight) + 110) : size.y, 320); } - }else if( clipperType == "ratio" ){ - ratio = this.json.imageRatio || 1; - description = MWF.LP.widget.pictureRatio.replace(/{ratio}/g, ratio); - } - MWF.xDesktop.requireApp("process.Xform", "widget.WritingBoard", function(){ - this.writingBoard = new MWF.xApplication.process.Xform.widget.WritingBoard(this.form.app, { - "style": "default", - "aspectRatio" : ratio, - "description" : description, - "imageUrl" : d ? MWF.xDesktop.getImageSrc( d ) : "", - "reference" : this.form.businessData.work.job, - "referenceType": "processPlatformJob", - "resultMaxSize" : maxSize, - "onChange" : function(){ - callback( { src : this.writingBoard.imageSrc, id : this.writingBoard.imageId } ); - }.bind(this) + + var zidx = this.node.getStyle("z-index").toInt() || 0; + zidx = (zidx < 1000) ? 1000 : zidx; + this.handwritingNode.setStyles({ + "height": "" + y + "px", + "width": "" + x + "px", + "z-index": zidx + 1 }); - this.writingBoard.load(); - }.bind(this)); - }, - createErrorNode: function(text){ - var node = new Element("div"); - var iconNode = new Element("div", { - "styles": { - "width": "20px", - "height": "20px", - "float": "left", - "background": "url("+"../x_component_process_Xform/$Form/default/icon/error.png) center center no-repeat" + if (layout.mobile) { + this.handwritingNode.addEvent('touchmove', function (e) { + e.preventDefault(); + }); + this.handwritingNode.setStyles({ + "top": "0px", + "left": "0px" + }).inject($(document.body)); + } else { + this.handwritingNode.position({ + "relativeTo": this.node, + "position": "center", + "edge": "center" + }); + } + this.handwritingAreaNode = new Element("div", {"styles": this.form.css.handwritingAreaNode}).inject(this.handwritingNode); + if( !layout.mobile ){ + this.handwritingActionNode = new Element("div", { + "styles": this.form.css.handwritingActionNode, + "text": MWF.xApplication.process.Work.LP.saveWrite + }).inject(this.handwritingNode); + var h = this.handwritingActionNode.getSize().y + this.handwritingActionNode.getStyle("margin-top").toInt() + this.handwritingActionNode.getStyle("margin-bottom").toInt(); + h = y - h; + this.handwritingAreaNode.setStyle("height", "" + h + "px"); + }else{ + this.handwritingAreaNode.setStyle("height", "" + y + "px"); } - }).inject(node); - var textNode = new Element("div", { - "styles": { - "line-height": "20px", - "margin-left": "20px", - "color": "red", - "word-break": "keep-all" - }, - "text": text - }).inject(node); - return node; - }, - notValidationMode: function(text){ - if (!this.isNotValidationMode){ - this.isNotValidationMode = true; - this.node.store("borderStyle", this.node.getStyles("border-left", "border-right", "border-top", "border-bottom")); - this.node.setStyle("border", "1px solid red"); - this.errNode = this.createErrorNode(text).inject(this.node, "after"); - this.showNotValidationMode(this.node); - if (!this.node.isIntoView()) this.node.scrollIntoView(); - } - }, - showNotValidationMode: function(node){ - var p = node.getParent("div"); - if (p){ - if (p.get("MWFtype") == "tab$Content"){ - if (p.getParent("div").getStyle("display")=="none"){ - var contentAreaNode = p.getParent("div").getParent("div"); - var tabAreaNode = contentAreaNode.getPrevious("div"); - var idx = contentAreaNode.getChildren().indexOf(p.getParent("div")); - var tabNode = tabAreaNode.getLast().getFirst().getChildren()[idx]; - tabNode.click(); - p = tabAreaNode.getParent("div"); + this.handwritingFile = {}; + MWF.require("MWF.widget.Tablet", function () { + /** + * @summary 手写板组件. + * @member {o2.widget.Tablet} + */ + var id = this.getData(); + var opt = { + "style": "default", + "imageSrc": id ? MWF.xDesktop.getImageSrc( id ) : "", + "toolHidden": this.json.toolHidden || [], + "contentWidth": this.json.tabletWidth || 0, + "contentHeight": this.json.tabletHeight || 0, + "onSave": function (base64code, base64Image, imageFile) { + this.handwritingNode.hide(); + + this.upload(function (json) { + var data = json.data; + this.setData(data ? data.id : ""); + this.validation(); + }.bind(this)); + + + }.bind(this), + "onCancel": function () { + this.handwritingNode.hide(); + }.bind(this) } + if (layout.mobile) { + opt.tools = [ + "save", "|", + "undo", + "redo", "|", + "reset", "|", + "cancel" + ] + } + this.tablet = new MWF.widget.Tablet(this.handwritingAreaNode, opt, null); + this.tablet.load(); + }.bind(this)); + + if(this.handwritingActionNode){ + this.handwritingActionNode.addEvent("click", function () { + //this.handwritingNode.hide(); + if (this.tablet) this.tablet.save(); + }.bind(this)); } - this.showNotValidationMode(p); - } - }, - validationMode: function(){ - if (this.isNotValidationMode){ - this.isNotValidationMode = false; - this.node.setStyles(this.node.retrieve("borderStyle")); - if (this.errNode){ - this.errNode.destroy(); - this.errNode = null; + }, + upload: function( callback ){ + var image = this.tablet.getImage( null, true ); + o2.xDesktop.uploadImageByScale( + this.form.businessData.work.job, + "processPlatformJob", + 0, //maxSize + this.tablet.getFormData(image), + image, + function (json) { + if(callback)callback(json); + }.bind(this), + function () { + + }.bind(this) + ); + }, + createErrorNode: function (text) { + var node = new Element("div"); + var iconNode = new Element("div", { + "styles": { + "width": "20px", + "height": "20px", + "float": "left", + "background": "url(" + "../x_component_process_Xform/$Form/default/icon/error.png) center center no-repeat" + } + }).inject(node); + var textNode = new Element("div", { + "styles": { + "line-height": "20px", + "margin-left": "20px", + "color": "red", + "word-break": "keep-all" + }, + "text": text + }).inject(node); + return node; + }, + notValidationMode: function (text) { + if (!this.isNotValidationMode) { + this.isNotValidationMode = true; + this.node.store("borderStyle", this.node.getStyles("border-left", "border-right", "border-top", "border-bottom")); + this.node.setStyle("border", "1px solid red"); + + this.errNode = this.createErrorNode(text).inject(this.node, "after"); + this.showNotValidationMode(this.node); + if (!this.node.isIntoView()) this.node.scrollIntoView(); } - } - }, - validationConfigItem: function(routeName, data){ - var flag = (data.status=="all") ? true: (routeName == data.decision); - if (flag){ - var n = this.getData(); - var v = (data.valueType=="value") ? n : n.length; - switch (data.operateor){ - case "isnull": - if (!v){ - this.notValidationMode(data.prompt); - return false; - } - break; - case "notnull": - if (v){ - this.notValidationMode(data.prompt); - return false; - } - break; - case "gt": - if (v>data.value){ - this.notValidationMode(data.prompt); - return false; - } - break; - case "lt": - if (v data.value) { + this.notValidationMode(data.prompt); + return false; + } + break; + case "lt": + if (v < data.value) { + this.notValidationMode(data.prompt); + return false; + } + break; + case "equal": + if (v == data.value) { + this.notValidationMode(data.prompt); + return false; + } + break; + case "neq": + if (v != data.value) { + this.notValidationMode(data.prompt); + return false; + } + break; + case "contain": + if (v.indexOf(data.value) != -1) { + this.notValidationMode(data.prompt); + return false; + } + break; + case "notcontain": + if (v.indexOf(data.value) == -1) { + this.notValidationMode(data.prompt); + return false; + } + break; } } return true; - } - return true; - }, - /** - * @summary 根据组件的校验设置进行校验。 - * @param {String} [routeName] - 可选，路由名称. - * @example - * if( !this.form.get('fieldId').validation() ){ - * return false; - * } - * @return {Boolean} 是否通过校验 - */ - validation: function(routeName, opinion){ - if (!this.validationConfig(routeName, opinion)) return false; + }, + validationConfig: function (routeName, opinion) { + if (this.json.validationConfig) { + if (this.json.validationConfig.length) { + for (var i = 0; i < this.json.validationConfig.length; i++) { + var data = this.json.validationConfig[i]; + if (!this.validationConfigItem(routeName, data)) return false; + } + } + return true; + } + return true; + }, + /** + * @summary 根据组件的校验设置进行校验。 + * @param {String} [routeName] - 可选，路由名称. + * @example + * if( !this.form.get('fieldId').validation() ){ + * return false; + * } + * @return {Boolean} 是否通过校验 + */ + validation: function (routeName, opinion) { + if (!this.validationConfig(routeName, opinion)) return false; - if (!this.json.validation) return true; - if (!this.json.validation.code) return true; - this.currentRouteName = routeName; - var flag = this.form.Macro.exec(this.json.validation.code, this); - this.currentRouteName = ""; - if (!flag) flag = MWF.xApplication.process.Xform.LP.notValidation; - if (flag.toString()!="true"){ - this.notValidationMode(flag); - return false; - } - return true; - }, - _parseStyles: function(styles){ - Object.each(styles, function(value, key){ - if ((value.indexOf("x_processplatform_assemble_surface")!=-1 || value.indexOf("x_portal_assemble_surface")!=-1 || value.indexOf("x_cms_assemble_control")!=-1)){ + if (!this.json.validation) return true; + if (!this.json.validation.code) return true; + this.currentRouteName = routeName; + var flag = this.form.Macro.exec(this.json.validation.code, this); + this.currentRouteName = ""; + if (!flag) flag = MWF.xApplication.process.Xform.LP.notValidation; + if (flag.toString() != "true") { + this.notValidationMode(flag); + return false; + } + return true; + }, + _parseStyles: function (styles) { + Object.each(styles, function (value, key) { + if ((value.indexOf("x_processplatform_assemble_surface") != -1 || value.indexOf("x_portal_assemble_surface") != -1 || value.indexOf("x_cms_assemble_control") != -1)) { var host1 = MWF.Actions.getHost("x_processplatform_assemble_surface"); var host2 = MWF.Actions.getHost("x_portal_assemble_surface"); var host3 = MWF.Actions.getHost("x_cms_assemble_control"); - if (value.indexOf("/x_processplatform_assemble_surface")!==-1){ - value = value.replace("/x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface"); - }else if (value.indexOf("x_processplatform_assemble_surface")!==-1){ - value = value.replace("x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface"); + if (value.indexOf("/x_processplatform_assemble_surface") !== -1) { + value = value.replace("/x_processplatform_assemble_surface", host1 + "/x_processplatform_assemble_surface"); + } else if (value.indexOf("x_processplatform_assemble_surface") !== -1) { + value = value.replace("x_processplatform_assemble_surface", host1 + "/x_processplatform_assemble_surface"); } - if (value.indexOf("/x_portal_assemble_surface")!==-1){ - value = value.replace("/x_portal_assemble_surface", host2+"/x_portal_assemble_surface"); - }else if (value.indexOf("x_portal_assemble_surface")!==-1){ - value = value.replace("x_portal_assemble_surface", host2+"/x_portal_assemble_surface"); + if (value.indexOf("/x_portal_assemble_surface") !== -1) { + value = value.replace("/x_portal_assemble_surface", host2 + "/x_portal_assemble_surface"); + } else if (value.indexOf("x_portal_assemble_surface") !== -1) { + value = value.replace("x_portal_assemble_surface", host2 + "/x_portal_assemble_surface"); } - if (value.indexOf("/x_cms_assemble_control")!==-1){ - value = value.replace("/x_cms_assemble_control", host3+"/x_cms_assemble_control"); - }else if (value.indexOf("x_cms_assemble_control")!==-1){ - value = value.replace("x_cms_assemble_control", host3+"/x_cms_assemble_control"); + if (value.indexOf("/x_cms_assemble_control") !== -1) { + value = value.replace("/x_cms_assemble_control", host3 + "/x_cms_assemble_control"); + } else if (value.indexOf("x_cms_assemble_control") !== -1) { + value = value.replace("x_cms_assemble_control", host3 + "/x_cms_assemble_control"); } value = o2.filterUrl(value); } @@ -358,5 +448,5 @@ MWF.xApplication.process.Xform.WritingBoard = MWF.APPWritingBoard = new Class( return styles; } - -}); \ No newline at end of file + + }); \ No newline at end of file