git.roojs.org Git - roojs1/blob - examples/dialog/uploadCropbox.js

   1 var uploadCropbox = {
   2     dialog : false,
   3     callback : false,
   4
   5     show : function(data, cb)
   6     {
   7         if (!this.dialog) {
   8             this.create();
   9         }
  10
  11         this.callback = cb;
  12         this.data = data;
  13         this.dialog.show();
  14     },
  15
  16     create : function()
  17     {
  18         var _this = this;
  19         this.dialog = Roo.factory({
  20             xns : Roo,
  21             xtype : 'LayoutDialog',
  22             width : 800,
  23             height : 600,
  24             north : {
  25                 xns : Roo,
  26                 xtype : 'LayoutRegion',
  27                 height : 50
  28             },
  29             center : {
  30                 xns : Roo,
  31                 xtype : 'LayoutRegion'
  32             },
  33             items : [
  34                 {
  35                     xtype: 'ContentPanel',
  36                     xns: Roo,
  37                     region : "center",
  38                     items : [
  39                         {
  40                             xtype : 'UploadCropbox',
  41                             xns : Roo.dialog,
  42                             minWidth : 720,
  43                             minHeight : 480,
  44                             outputMaxWidth : 1200,
  45                             windowSize : 300,
  46                             url: 'http://localhost/web.MediaOutreach/press.local.php/Roo/Images.php',
  47                             buttons: Roo.dialog.UploadCropbox.footer.CENTER,
  48                             listeners : {
  49                                 render : function (_self)
  50                                 {
  51                                     _this.cropbox = _self;
  52                                     _this.cropbox.bodyEl.dom.style.height = (parseInt(_this.cropbox.bodyEl.dom.parentNode.parentNode.parentNode.style.height) - 34) + 'px';
  53                                     _this.cropbox.bodyEl.dom.style.maxHeight = (parseInt(_this.cropbox.bodyEl.dom.parentNode.parentNode.parentNode.style.height) - 34) + 'px';
  54                                 },
  55                                 beforeloadcanvas : function(self, src)
  56                                 {
  57                                     console.log(src);
  58                                     src = 'http://localhost/web.MediaOutreach/press.local.php/Images/Download/162632/2000x1000.png';
  59                                 },
  60                                 loadcanvas : function (_self, imageEl)
  61                                 {
  62                                     if(imageEl.OriginWidth < 720) {
  63                                         Roo.Msg.show({
  64                                             title: 'Error',
  65                                             msg: "Image width should be at least 720",
  66                                             buttons: {ok : true},
  67                                             fn: function(res) {
  68                                                 _this.cropbox.selectorEl.dom.value = '';
  69                                                 _this.cropbox.selectorEl.dom.click();
  70                                             }
  71                                         });
  72                                         return false;
  73                                     }
  74                                 },
  75                                 arrange : function (_self, formData)
  76                                 {
  77                                     formData.append("onid", "43024");
  78                                     formData.append("ontable", "pressrelease_boilerplate");
  79                                 }
  80                             }
  81                         }
  82                     ]
  83                 },
  84                 {
  85                     xtype : 'ContentPanel',
  86                     xns: Roo,
  87                     region : 'north',
  88                     listeners : {
  89                         activate : function (_self)
  90                         {
  91                             var style = 'font:bold 16px sans serif,tahoma,verdana,helvetica; color:rgba(0, 0, 0, 0.5);';
  92                             this.setContent("<div style='width:100%; height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center'>"
  93                             + "<h3 style='" + style + "'>Scroll the mouse wheel to resize the image</h3>"
  94                             + "<h3 style='" + style + "'>Drag the image to move the image</h3></div>");
  95                         }
  96                     }
  97                }
  98             ],
  99             buttons : [
 100                 {
 101                     xtype : 'Button',
 102                     xns : Roo,
 103                     text : 'Save',
 104                     listeners : {
 105                         click : function () {
 106                             _this.cropbox.crop();
 107                             _this.dialog.hide();
 108                         }
 109                     }
 110                 },
 111                 {
 112                     xtype : 'Button',
 113                     xns : Roo,
 114                     text : 'Cancel',
 115                     listeners : {
 116                         click : function () {
 117                             _this.dialog.hide();
 118                         }
 119                     }
 120                 }
 121             ]
 122         });
 123     }
 124 }
 125
 126 var test = {
 127
 128     dialog : false,
 129     callback : false,
 130
 131     show : function(data, cb)
 132     {
 133         if (!this.dialog) {
 134             this.create();
 135         }
 136
 137         this.callback = cb;
 138         this.data = data;
 139         this.dialog.show();
 140     },
 141
 142     create : function()
 143     {
 144         var _this = this;
 145         this.dialog = Roo.factory({
 146             xns : Roo,
 147             xtype : 'LayoutDialog',
 148             width : 600,
 149             height : 450,
 150             center : {
 151                 xns : Roo,
 152                 xtype : 'LayoutRegion'
 153             },
 154             items : [
 155                 {
 156                     xns : Roo,
 157                     xtype: 'GridPanel',
 158                     region : "center",
 159                     grid : {
 160                         xns : Roo.grid,
 161                         xtype : 'Grid',
 162                         cm : [
 163                             {
 164                                 xns : Roo.grid,
 165                                 xtype : 'ColumnModel',
 166                                 header : 'test'
 167                             }
 168                         ],
 169                         ds : {
 170                             xns: Roo.data,
 171                             xtype: 'Store'
 172                         },
 173                         toolbar : {
 174                             xns: Roo,
 175                             xtype: 'Toolbar',
 176                             items : [
 177                                 {
 178                                     xtype : 'Button',
 179                                     text : 'Add',
 180                                     listeners : {
 181                                         click : function () {
 182                                             uploadCropbox.show();
 183                                             document.body.onfocus = function(e) {
 184                                                 if(!uploadCropbox.cropbox.selectorEl.dom.files.length) {
 185                                                     uploadCropbox.dialog.hide();
 186                                                 }
 187                                             }
 188                                             uploadCropbox.cropbox.selectorEl.dom.click();
 189                                         }
 190                                     }
 191                                 }
 192                             ]
 193                         }
 194                     }
 195                 }
 196             ],
 197         });
 198     }
 199 }
 200
 201 Roo.onReady(function() {
 202
 203     Roo.get('show-dialog-btn').on('click',function () {
 204         test.show({});
 205     });
 206 });