ImageClipper.js 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. MWF.xApplication.process.FormDesigner.widget = MWF.xApplication.process.FormDesigner.widget || {};
  2. MWF.require("MWF.widget.ImageClipper", null, false);
  3. MWF.xApplication.process.FormDesigner.widget.ImageClipper = new Class({
  4. Implements: [Options, Events],
  5. Extends: MWF.widget.Common,
  6. options: {
  7. "title": "Select Image",
  8. "style": "default",
  9. "width": "92",
  10. "height": "73",
  11. "referenceType": "",
  12. "reference": "",
  13. "imageUrl":""
  14. },
  15. initialize: function(designer, options){
  16. this.setOptions(options);
  17. this.app = designer;
  18. this.path = "../x_component_process_FormDesigner/widget/$ImageClipper/";
  19. this.cssPath = "../x_component_process_FormDesigner/widget/$ImageClipper/"+this.options.style+"/css.wcss";
  20. this._loadCss();
  21. },
  22. load: function(data){
  23. this.data = data;
  24. var options = {};
  25. var width = options.width || "770";
  26. var height = options.height || "580";
  27. width = width.toInt();
  28. height = height.toInt();
  29. var size = this.app.content.getSize();
  30. var x = (size.x-width)/2;
  31. var y = (size.y-height)/2;
  32. if (x<0) x = 0;
  33. if (y<0) y = 0;
  34. if (layout.mobile){
  35. x = 20;
  36. y = 0;
  37. }
  38. var _self = this;
  39. MWF.require("MWF.xDesktop.Dialog", function() {
  40. var dlg = new MWF.xDesktop.Dialog({
  41. "title": this.options.title || "Select Image",
  42. "style": options.style || "image",
  43. "top": y,
  44. "left": x - 20,
  45. "fromTop": y,
  46. "fromLeft": x - 20,
  47. "width": width,
  48. "height": height,
  49. "html": "<div></div>",
  50. "maskNode": this.app.content,
  51. "container": this.app.content,
  52. "buttonList": [
  53. {
  54. "text": MWF.LP.process.button.ok,
  55. "action": function () {
  56. _self.image.uploadImage( function( json ){
  57. _self.imageSrc = MWF.xDesktop.getImageSrc( json.id );
  58. _self.imageId = json.id;
  59. _self.fireEvent("change");
  60. this.close();
  61. }.bind(this));
  62. //_self.uploadImage();
  63. //_self.data = _self.image.getBase64Image();
  64. //_self.fireEvent("change");
  65. this.close();
  66. }
  67. },
  68. {
  69. "text": MWF.LP.process.button.cancel,
  70. "action": function () {
  71. this.close();
  72. }
  73. }
  74. ]
  75. });
  76. dlg.show();
  77. this.image = new MWF.widget.ImageClipper(dlg.content.getFirst(), {
  78. "aspectRatio": this.options.width.toInt()/this.options.height.toInt(),
  79. "imageUrl" : this.options.imageUrl,
  80. "reference" : this.options.reference,
  81. "referenceType": this.options.referenceType,
  82. "resetEnable" : true
  83. });
  84. this.image.load(this.data);
  85. }.bind(this))
  86. },
  87. uploadImage: function(){
  88. }
  89. });