git.roojs.org Git - Pman.BAdmin/blob - Pman.Dialog.BAdminImageManager.js

   1 //<script type="text/javascript">
   2
   3 // Auto generated file - created by app.Builder.js- do not edit directly (at present!)
   4
   5 Roo.namespace('Pman.Dialog');
   6
   7 Pman.Dialog.BAdminImageManager= function() {}
   8 Roo.apply(Pman.Dialog.BAdminImageManager.prototype, {
   9
  10  _strings : {
  11   'ef797d5638c2e1c6b6225b2247541ea5' :"Upload Image or File:",
  12   'd9787032e54a7facd5c7b1db2ae61c7b' :"Image Manager",
  13   '37c1097cf82226d511586ecd99ed97cf' :"search for image",
  14   'cdb6b6bab1fd18b9dbfe3fb84a5d34ae' :"<i class=\"fa fa-search\"></i>",
  15   '5350277f16d9998c57fa7e1d17be2a76' :"<i class=\"fa fa-upload\"></i> Upload Image",
  16   '14834a16229091f47cf1810177d07916' :"Created Date:",
  17   '1a0ce561842e3caef9098f46ecaa1dcf' :"Add Images with Settings",
  18   '78d0f5aac952e2ce840a381976a3b01e' :"Image Details",
  19   '708ea0e601087e73c4764d5086e3ea3c' :"File Name:",
  20   'e0a53da57dd79cca5d3b6a7c42e463ef' :"File Type:",
  21   '3f986fa4066f6bded1376eb69de18da2' :"File Size:",
  22   'd3d2e617335f08df83599665eef8a418' :"Close",
  23   '84378f54966381befd040dafbdc221d6' :"<i class=\"fa fa-plus\"></i> Add into the email",
  24   '361bacb1a72a350ee34e2f31a6a91dab' :"Alignment:",
  25   'f48f7c7bccb5e29c83d87984c49ad8d4' :"Show image for this email",
  26   'ed807858fcb68abdd180481f1fcba5c5' :"<i class=\"fa fa-trash\"></i> Delete",
  27   '031fa343a28d221a25d2bcd942437174' :"Alternate Text:",
  28   '48ccf48dcf2218a413ce473262f21a0c' :"Width: ",
  29   'd0042a700e9bdf79689d63ee6846dc0e' :"Description:",
  30   'd6d93f0d6b7c6018d8949e73ed6efb6c' :"<i class=\"fa fa-save\"></i> Save Changes",
  31   'e933dc24fb245d863a43b4fefe9b45f5' :"Height:"
  32  },
  33  _named_strings : {
  34   'align_fieldLabel' : '361bacb1a72a350ee34e2f31a6a91dab' /* Alignment: */ ,
  35   'filename_fieldLabel' : '708ea0e601087e73c4764d5086e3ea3c' /* File Name: */ ,
  36   'add_html' : '84378f54966381befd040dafbdc221d6' /* <i class="fa fa-plus"></i> Add into the email */ ,
  37   'created_fieldLabel' : '14834a16229091f47cf1810177d07916' /* Created Date: */ ,
  38   'height_fieldLabel' : 'e933dc24fb245d863a43b4fefe9b45f5' /* Height: */ ,
  39   'mimetype_fieldLabel' : 'e0a53da57dd79cca5d3b6a7c42e463ef' /* File Type: */ ,
  40   'close_html' : 'd3d2e617335f08df83599665eef8a418' /* Close */ ,
  41   'imageUpload_fieldLabel' : 'ef797d5638c2e1c6b6225b2247541ea5' /* Upload Image or File: */ ,
  42   'width_fieldLabel' : '48ccf48dcf2218a413ce473262f21a0c' /* Width:  */ ,
  43   'filesize_fieldLabel' : '3f986fa4066f6bded1376eb69de18da2' /* File Size: */ ,
  44   'descript_fieldLabel' : 'd0042a700e9bdf79689d63ee6846dc0e' /* Description: */
  45  },
  46
  47  dialog : false,
  48  callback:  false,
  49
  50  show : function(data, cb)
  51  {
  52   if (!this.dialog) {
  53    this.create();
  54   }
  55
  56   this.callback = cb;
  57   this.data = data;
  58   this.dialog.show(this.data._el);
  59   if (this.form) {
  60    this.form.reset();
  61    this.form.setValues(data);
  62    this.form.fireEvent('actioncomplete', this.form,  { type: 'setdata', data: data });
  63   }
  64
  65  },
  66
  67  create : function()
  68  {
  69   var _this = this;
  70   this.dialog = Roo.factory({
  71     xtype : 'Modal',
  72     cls : 'modal-body-enable-overflow-y pman-badmin-image-manager',
  73     fitwindow : true,
  74     haveProgress : false,
  75     title : _this._strings['d9787032e54a7facd5c7b1db2ae61c7b'] /* Image Manager */,
  76     uploadComplete : false,
  77     uploadProgress : function()
  78     {
  79         Roo.log('uploadProgress');
  80
  81         var dlg = this;
  82         if (!dlg.haveProgress) {
  83             Roo.MessageBox.progress("Uploading", "Uploading");
  84         }
  85
  86         if (dlg.haveProgress == 2) {
  87             // it's been closed elsewhere..
  88             return;
  89         }
  90         if (dlg.uploadComplete) {
  91             Roo.MessageBox.hide();
  92             return;
  93         }
  94
  95         dlg.haveProgress = 1;
  96
  97         var uid = _this.form.findField('UPLOAD_IDENTIFIER').getValue();
  98
  99         new Pman.Request({
 100             url : baseURL + '/Core/UploadProgress.php',
 101             params: {
 102                 id : uid
 103
 104             },
 105             method: 'GET',
 106             success : function(res){
 107                 var data = res.data;
 108                 if (dlg.haveProgress == 2) {
 109                     return;
 110                 }
 111
 112                 if (dlg.uploadComplete) {
 113                     Roo.MessageBox.hide();
 114                     return;
 115                 }
 116
 117                 if (data){
 118                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
 119                         Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
 120                     );
 121                 } else {
 122                     Roo.MessageBox.updateProgress(1,
 123                         "Upload Complete - processing"
 124                     );
 125                     return;
 126                 }
 127                 dlg.uploadProgress.defer(2000,dlg);
 128             },
 129             failure: function(data) {
 130             }
 131         })
 132
 133     },
 134     listeners : {
 135      resize : function (_self)
 136       {
 137           if (_this.dialog && _this.container && _this.toolbar) {
 138
 139               _this.document_container.el.setHeight(
 140                   _this.dialog.bodyEl.getHeight() -
 141                   _this.dialog.headerEl.getHeight() -
 142                   _this.toolbar.el.dom.offsetHeight -
 143                   _this.dialog.footerEl.getHeight()
 144               );
 145
 146           }
 147       }
 148     },
 149     xns : Roo.bootstrap,
 150     '|xns' : 'Roo.bootstrap',
 151     buttons : [
 152      {
 153       xtype : 'Button',
 154       html : _this._strings['d3d2e617335f08df83599665eef8a418'] /* Close */,
 155       name : 'close',
 156       weight : 'default',
 157       listeners : {
 158        click : function (_self, e)
 159         {
 160             _this.dialog.hide();
 161         }
 162       },
 163       xns : Roo.bootstrap,
 164       '|xns' : 'Roo.bootstrap'
 165      }
 166     ],
 167     items  : [
 168      {
 169       xtype : 'Row',
 170       xns : Roo.bootstrap,
 171       '|xns' : 'Roo.bootstrap',
 172       items  : [
 173        {
 174         xtype : 'Column',
 175         sm : 8,
 176         xns : Roo.bootstrap,
 177         '|xns' : 'Roo.bootstrap',
 178         items  : [
 179          {
 180           xtype : 'Form',
 181           fileUpload : true,
 182           method : 'POST',
 183           style : 'display: none;',
 184           timeout : 300,
 185           url : baseURL + '/Roo/Images.php',
 186           listeners : {
 187            actioncomplete : function(_self,action)
 188             {
 189                 _this.dialog.uploadComplete = true;
 190
 191                 _this.dialog.haveProgress = 2;
 192
 193                 Roo.MessageBox.hide();
 194
 195                 if (action.type == 'setdata') {
 196
 197                     this.url = _this.data._url ? baseURL + _this.data._url : baseURL + '/Roo/Images.php';
 198
 199                     this.el.dom.action = this.url;
 200
 201                     if (typeof(_this.data.timeout) != 'undefined') {
 202                         this.timeout = _this.data.timeout;
 203                     }
 204
 205                     this.findField('UPLOAD_IDENTIFIER').setValue(
 206                         (new Date() * 1) + '' + Math.random());
 207
 208                     _this.masonry.load();
 209
 210                     return;
 211                 }
 212
 213
 214                 if (action.type == 'load') {
 215
 216                     _this.data = action.result.data;
 217
 218                     return;
 219                 }
 220
 221
 222                 if (action.type == 'submit') { // only submitted here if we are
 223
 224                     _this.masonry.load();
 225
 226                     return;
 227                 }
 228
 229
 230
 231             },
 232            actionfailed : function (_self, action)
 233             {
 234                 _this.dialog.uploadComplete = true;
 235
 236                  _this.dialog.haveProgress = 2;
 237
 238                 if (action.type == 'submit') {
 239                     Roo.log("Upload error");
 240                     Roo.log(action);
 241
 242                     try {
 243
 244                         Roo.MessageBox.alert("Error", action.result.errorMsg.split(/\n/).join('<BR/>'));
 245
 246                     } catch(e) {
 247
 248                         Roo.MessageBox.alert("Error", "Saving failed = fix errors and try again");
 249                     }
 250                     return;
 251                 }
 252
 253                 Roo.MessageBox.alert("Error", "Error loading details");
 254             },
 255            render : function (_self)
 256             {
 257                 _this.form = this;
 258
 259             }
 260           },
 261           xns : Roo.bootstrap,
 262           '|xns' : 'Roo.bootstrap',
 263           items  : [
 264            {
 265             xtype : 'Input',
 266             fieldLabel : _this._strings['ef797d5638c2e1c6b6225b2247541ea5'] /* Upload Image or File: */,
 267             inputType : 'file',
 268             labelWidth : 4,
 269             name : 'imageUpload',
 270             listeners : {
 271              render : function (_self)
 272               {
 273                   _this.uploadDL = this;
 274
 275                   _this.uploadDL.inputEl().on("change",function(){
 276
 277                       _this.form.findField('onid').setValue(_this.showTypeBtn.isActive() ? _this.data.onid : 0);
 278                       _this.form.doAction('submit');
 279
 280                       //_this.dialog.uploadProgress.defer(1000, _this.dialog);
 281                   });
 282
 283
 284               }
 285             },
 286             xns : Roo.bootstrap,
 287             '|xns' : 'Roo.bootstrap'
 288            },
 289            {
 290             xtype : 'Input',
 291             inputType : 'hidden',
 292             name : 'UPLOAD_IDENTIFIER',
 293             xns : Roo.bootstrap,
 294             '|xns' : 'Roo.bootstrap'
 295            },
 296            {
 297             xtype : 'Input',
 298             inputType : 'hidden',
 299             name : 'post_max_size',
 300             xns : Roo.bootstrap,
 301             '|xns' : 'Roo.bootstrap'
 302            },
 303            {
 304             xtype : 'Input',
 305             inputType : 'hidden',
 306             name : 'upload_max_filesize',
 307             xns : Roo.bootstrap,
 308             '|xns' : 'Roo.bootstrap'
 309            },
 310            {
 311             xtype : 'Input',
 312             inputType : 'hidden',
 313             name : 'ontable',
 314             xns : Roo.bootstrap,
 315             '|xns' : 'Roo.bootstrap'
 316            },
 317            {
 318             xtype : 'Input',
 319             inputType : 'hidden',
 320             name : 'onid',
 321             xns : Roo.bootstrap,
 322             '|xns' : 'Roo.bootstrap'
 323            },
 324            {
 325             xtype : 'Input',
 326             inputType : 'hidden',
 327             name : 'id',
 328             xns : Roo.bootstrap,
 329             '|xns' : 'Roo.bootstrap'
 330            }
 331           ]
 332          },
 333          {
 334           xtype : 'Container',
 335           listeners : {
 336            render : function (_self)
 337             {
 338                 _this.container = this;
 339
 340             }
 341           },
 342           xns : Roo.bootstrap,
 343           '|xns' : 'Roo.bootstrap',
 344           items  : [
 345            {
 346             xtype : 'Row',
 347             listeners : {
 348              render : function (_self)
 349               {
 350                   _this.toolbar = this;
 351               }
 352             },
 353             xns : Roo.bootstrap,
 354             '|xns' : 'Roo.bootstrap',
 355             items  : [
 356              {
 357               xtype : 'Column',
 358               md : 8,
 359               xns : Roo.bootstrap,
 360               '|xns' : 'Roo.bootstrap',
 361               items  : [
 362                {
 363                 xtype : 'Button',
 364                 html : _this._strings['f48f7c7bccb5e29c83d87984c49ad8d4'] /* Show image for this email */,
 365                 pressed : false,
 366                 style : 'float:left;',
 367                 listeners : {
 368                  render : function (_self)
 369                   {
 370                       _this.showTypeBtn = this;
 371                   },
 372                  toggle : function (b, e, pressed)
 373                   {
 374                       _this.showTypeBtn.setText(!pressed ? 'Show all images' : 'Show image for this email');
 375
 376                       _this.masonry.load();
 377                   }
 378                 },
 379                 xns : Roo.bootstrap,
 380                 '|xns' : 'Roo.bootstrap'
 381                },
 382                {
 383                 xtype : 'Input',
 384                 placeholder : _this._strings['37c1097cf82226d511586ecd99ed97cf'] /* search for image */,
 385                 style : 'float:left; width: 300px; margin-left: 15px;',
 386                 listeners : {
 387                  render : function (_self)
 388                   {
 389                       _this.searchBox = this;
 390                   },
 391                  specialkey : function (_self, e)
 392                   {
 393
 394                       var image_name = "";
 395
 396                       if(e.keyCode == e.ENTER) {
 397                           _this.masonry.clearAll();
 398                           _this.masonry.load();
 399
 400                       }
 401                   }
 402                 },
 403                 xns : Roo.bootstrap,
 404                 '|xns' : 'Roo.bootstrap',
 405                 after : {
 406                  xtype : 'Button',
 407                  html : _this._strings['cdb6b6bab1fd18b9dbfe3fb84a5d34ae'] /* <i class="fa fa-search"></i> */,
 408                  listeners : {
 409                   click : function (_self, e)
 410                    {
 411                        _this.masonry.clearAll();
 412                        _this.masonry.load();
 413                    }
 414                  },
 415                  xns : Roo.bootstrap,
 416                  '|xns' : 'Roo.bootstrap'
 417                 }
 418                }
 419               ]
 420              },
 421              {
 422               xtype : 'Column',
 423               cls : 'text-right',
 424               md : 4,
 425               xns : Roo.bootstrap,
 426               '|xns' : 'Roo.bootstrap',
 427               items  : [
 428                {
 429                 xtype : 'Button',
 430                 html : _this._strings['5350277f16d9998c57fa7e1d17be2a76'] /* <i class="fa fa-upload"></i> Upload Image */,
 431                 weight : 'primary',
 432                 listeners : {
 433                  click : function (_self, e)
 434                   {
 435                       var id = _this.data.onid;
 436
 437                       if(id*1 < 1){
 438                           Roo.MessageBox.alert('Error', 'Please save the email template first');
 439                           return;
 440                       }
 441
 442                       _this.uploadDL.inputEl().dom.click();
 443                   }
 444                 },
 445                 xns : Roo.bootstrap,
 446                 '|xns' : 'Roo.bootstrap'
 447                },
 448                {
 449                 xtype : 'Button',
 450                 html : _this._strings['ed807858fcb68abdd180481f1fcba5c5'] /* <i class="fa fa-trash"></i> Delete */,
 451                 style : 'margin-left: 15px;',
 452                 weight : 'default',
 453                 listeners : {
 454                  click : function (_self, e)
 455                   {
 456                       if (_this.masonry.getSelected().length > 1) {
 457
 458                           Roo.bootstrap.MessageBox.alert('Cannot delete the images !','Please select one image only');
 459                           return;
 460                       }
 461
 462                       if (_this.masonry.getSelected().length < 1) {
 463
 464                           Roo.bootstrap.MessageBox.alert('Cannot delete any image !','Please select an image');
 465                           return;
 466                       }
 467
 468                       Roo.bootstrap.MessageBox.confirm("Confirm", "Are sure you want to delete this image?", function (v){
 469                           if (v != 'yes') {
 470                               return;
 471                           }
 472
 473                           new Pman.Request({
 474                               url : baseURL + '/Roo/Images.php',
 475                               method: 'POST',
 476                               params : {
 477                                   _delete : Roo.bootstrap.MasonryBrick.get(_this.masonry.getSelected()[0]).image_id
 478                               },
 479                               success : function()
 480                               {
 481                                   _this.masonry.removeBrick(_this.masonry.getSelected()[0]);
 482                                   _this.detail_form.reset();
 483                                   _this.setting_form.reset();
 484                                   _this.masonry.initial();
 485                               }
 486                           });
 487                       });
 488                   },
 489                  render : function (_self)
 490                   {
 491                       _this.deleteBtn = this;
 492
 493                       this.hide();
 494                   }
 495                 },
 496                 xns : Roo.bootstrap,
 497                 '|xns' : 'Roo.bootstrap'
 498                }
 499               ]
 500              }
 501             ]
 502            },
 503            {
 504             xtype : 'Row',
 505             style : 'margin-top: 15px;',
 506             listeners : {
 507              render : function (_self)
 508               {
 509                   _this.document_container = this;
 510
 511                   this.el.setStyle('overflow', 'auto');
 512               }
 513             },
 514             xns : Roo.bootstrap,
 515             '|xns' : 'Roo.bootstrap',
 516             items  : [
 517              {
 518               xtype : 'Column',
 519               md : 12,
 520               xns : Roo.bootstrap,
 521               '|xns' : 'Roo.bootstrap',
 522               items  : [
 523                {
 524                 xtype : 'LayoutMasonry',
 525                 activeClass : 'active',
 526                 boxWidth : 250,
 527                 isAutoInitial : false,
 528                 isLayoutInstant : false,
 529                 load : function()
 530                 {
 531                     _this.setting_form.reset();
 532                     _this.detail_form.reset();
 533
 534                     _this.setting_form.hide();
 535                     _this.detail_form.hide();
 536
 537                     _this.masonry.clearAll();
 538
 539                     new Pman.Request({
 540                         url: baseURL + '/Roo/Images',
 541                         method: 'GET',
 542                         params: {
 543                             ontable : 'core_email',
 544                             onid : _this.showTypeBtn.isActive() ? _this.data.onid : 0,
 545                             'search[filename]' : _this.searchBox.getValue()
 546                         },
 547                         success: function(ret) {
 548
 549                             if(!ret.data.length){
 550                                 return;
 551                             }
 552
 553                             Roo.each(ret.data, function(r){
 554
 555                                 _this.masonry.addBrick({
 556                                     size: 'md',
 557                                     boxWidth: 150,
 558                                     cls: 'coba-image-mgmt-masonry-brick',
 559                                     active: false,
 560                                     activeClass: 'active',
 561                                     preventDefault: true,
 562                                     bgimage : baseURL + '/Images/' + r.id + '/' + r.filename,
 563                                     imageObj: r,
 564                                     listeners : {
 565                                         click : function (_self)
 566                                         {
 567                                             _this.setting_form.reset();
 568                                             _this.detail_form.reset();
 569
 570                                             _this.setting_form.hide();
 571                                             _this.detail_form.hide();
 572
 573                                             if(!this.isSelected()){
 574                                                 return;
 575                                             }
 576
 577                                             new Pman.Request({
 578                                                 url: baseURL + '/Roo/Images.php',
 579                                                 method : 'GET',
 580                                                 params : {
 581                                                     _id: _self.imageObj.id
 582                                                 },
 583                                                 success : function(rr) {
 584
 585                                                     _this.setting_form.show();
 586                                                     _this.detail_form.show();
 587
 588                                                     _this.detail_form.setValues(rr.data);
 589                                                     _this.setting_form.setValues(rr.data);
 590
 591                                                     _this.setting_form.findField('align').setValue("left");
 592                                                     _this.thumb.setSrc(baseURL + '/Images/' + rr.data.id + '/' + rr.data.filename);
 593
 594                                                     _self.imageObj = rr.data;
 595                                                 }
 596                                             });
 597
 598                                         }
 599                                      }
 600                                 })
 601
 602                             });
 603
 604                             _this.masonry.initial();
 605
 606                          },
 607
 608                          failure: function(res) {
 609                              Roo.log('cannot read Coba/Roo/Images');
 610                          }
 611                      });
 612                 },
 613                 listeners : {
 614                  render : function (_self)
 615                   {
 616                       _this.masonry = this;
 617
 618                   }
 619                 },
 620                 xns : Roo.bootstrap,
 621                 '|xns' : 'Roo.bootstrap'
 622                }
 623               ]
 624              }
 625             ]
 626            }
 627           ]
 628          }
 629         ]
 630        },
 631        {
 632         xtype : 'Column',
 633         sm : 4,
 634         xns : Roo.bootstrap,
 635         '|xns' : 'Roo.bootstrap',
 636         items  : [
 637          {
 638           xtype : 'Row',
 639           xns : Roo.bootstrap,
 640           '|xns' : 'Roo.bootstrap',
 641           items  : [
 642            {
 643             xtype : 'Column',
 644             md : 12,
 645             xns : Roo.bootstrap,
 646             '|xns' : 'Roo.bootstrap',
 647             items  : [
 648              {
 649               xtype : 'Form',
 650               loadMask : true,
 651               url : baseURL + '/Roo/Images',
 652               listeners : {
 653                render : function (_self)
 654                 {
 655                     _this.setting_form = this;
 656                 }
 657               },
 658               xns : Roo.bootstrap,
 659               '|xns' : 'Roo.bootstrap',
 660               items  : [
 661                {
 662                 xtype : 'Container',
 663                 header : _this._strings['1a0ce561842e3caef9098f46ecaa1dcf'] /* Add Images with Settings */,
 664                 panel : 'default',
 665                 style : 'width: 100%;',
 666                 xns : Roo.bootstrap,
 667                 '|xns' : 'Roo.bootstrap',
 668                 items  : [
 669                  {
 670                   xtype : 'Input',
 671                   cls : 'row-style',
 672                   fieldLabel : _this._strings['031fa343a28d221a25d2bcd942437174'] /* Alternate Text: */,
 673                   labelWidth : 4,
 674                   name : 'descript',
 675                   xns : Roo.bootstrap,
 676                   '|xns' : 'Roo.bootstrap'
 677                  },
 678                  {
 679                   xtype : 'Input',
 680                   cls : 'row-style',
 681                   fieldLabel : _this._strings['e933dc24fb245d863a43b4fefe9b45f5'] /* Height: */,
 682                   labelWidth : 4,
 683                   name : 'height',
 684                   xns : Roo.bootstrap,
 685                   '|xns' : 'Roo.bootstrap'
 686                  },
 687                  {
 688                   xtype : 'Input',
 689                   cls : 'row-style',
 690                   fieldLabel : _this._strings['48ccf48dcf2218a413ce473262f21a0c'] /* Width:  */,
 691                   labelWidth : 4,
 692                   name : 'width',
 693                   xns : Roo.bootstrap,
 694                   '|xns' : 'Roo.bootstrap'
 695                  },
 696                  {
 697                   xtype : 'ComboBox',
 698                   allowBlank : true,
 699                   alwaysQuery : true,
 700                   cls : 'row-style',
 701                   displayField : 'value',
 702                   editable : false,
 703                   fieldLabel : _this._strings['361bacb1a72a350ee34e2f31a6a91dab'] /* Alignment: */,
 704                   forceSelection : true,
 705                   labelWidth : 4,
 706                   mode : 'local',
 707                   name : 'align',
 708                   selectOnFocus : true,
 709                   triggerAction : 'all',
 710                   valueField : 'code',
 711                   xns : Roo.bootstrap,
 712                   '|xns' : 'Roo.bootstrap',
 713                   store : {
 714                    xtype : 'SimpleStore',
 715                    data : [
 716                        ['left', 'left'],
 717                        ['right', 'right'],
 718                        ['middle', 'middle'],
 719                        ['top', 'top'],
 720                        ['bottom', 'bottom']
 721                    ],
 722                    fields : ['code', 'value'],
 723                    xns : Roo.data,
 724                    '|xns' : 'Roo.data'
 725                   }
 726                  },
 727                  {
 728                   xtype : 'Row',
 729                   cls : 'form-group-button_row',
 730                   xns : Roo.bootstrap,
 731                   '|xns' : 'Roo.bootstrap',
 732                   items  : [
 733                    {
 734                     xtype : 'Column',
 735                     md : 12,
 736                     style : 'text-align: center',
 737                     xns : Roo.bootstrap,
 738                     '|xns' : 'Roo.bootstrap',
 739                     items  : [
 740                      {
 741                       xtype : 'Button',
 742                       html : _this._strings['84378f54966381befd040dafbdc221d6'] /* <i class="fa fa-plus"></i> Add into the email */,
 743                       name : 'add',
 744                       weight : 'default',
 745                       listeners : {
 746                        click : function (_self, e)
 747                         {
 748                             var b = _this.masonry.getSelected();
 749
 750                             if (b.length < 1) {
 751
 752                                 Roo.bootstrap.MessageBox.alert('Cannot add any image', 'Please select an image');
 753                                 return;
 754                             }
 755
 756                             var brick = Roo.bootstrap.MasonryBrick.get(b[0]);
 757
 758                             _this.dialog.hide();
 759
 760                             if(_this.callback){
 761
 762                                 var data = Roo.apply(b[0].imageObj, {
 763                                     align : _this.setting_form.findField('align').getValue()
 764                                 });
 765
 766                                 _this.callback.call(_this, data);
 767
 768                                 /*
 769                                 _this.callback({
 770                                     id : brick.image_id,
 771                                     filename : brick.image_filename,
 772                                     height : _this.setting_form.findField('height').getValue(),
 773                                     width : _this.setting_form.findField('width').getValue(),
 774                                     alt : _this.setting_form.findField('alt').getValue(),
 775                                     align : _this.setting_form.findField('align').getValue()
 776                                 });
 777                                 */
 778                             }
 779                         }
 780                       },
 781                       xns : Roo.bootstrap,
 782                       '|xns' : 'Roo.bootstrap'
 783                      }
 784                     ]
 785                    }
 786                   ]
 787                  }
 788                 ]
 789                }
 790               ]
 791              }
 792             ]
 793            }
 794           ]
 795          },
 796          {
 797           xtype : 'Row',
 798           xns : Roo.bootstrap,
 799           '|xns' : 'Roo.bootstrap',
 800           items  : [
 801            {
 802             xtype : 'Column',
 803             md : 12,
 804             xns : Roo.bootstrap,
 805             '|xns' : 'Roo.bootstrap',
 806             items  : [
 807              {
 808               xtype : 'Form',
 809               loadMask : true,
 810               url : baseURL + '/Roo/Images',
 811               listeners : {
 812                render : function (_self)
 813                 {
 814                     _this.detail_form = this;
 815                 }
 816               },
 817               xns : Roo.bootstrap,
 818               '|xns' : 'Roo.bootstrap',
 819               items  : [
 820                {
 821                 xtype : 'Container',
 822                 header : _this._strings['78d0f5aac952e2ce840a381976a3b01e'] /* Image Details */,
 823                 panel : 'default',
 824                 style : 'width: 100%; padding: 0',
 825                 xns : Roo.bootstrap,
 826                 '|xns' : 'Roo.bootstrap',
 827                 items  : [
 828                  {
 829                   xtype : 'Img',
 830                   alt : '*Please select an image in the media library',
 831                   border : 'thumbnail',
 832                   style : 'width: 100%; margin-bottom:15px; display: none;',
 833                   listeners : {
 834                    render : function (_self)
 835                     {
 836                         _this.thumb = this;
 837
 838                         //any default image?
 839
 840                     }
 841                   },
 842                   xns : Roo.bootstrap,
 843                   '|xns' : 'Roo.bootstrap'
 844                  },
 845                  {
 846                   xtype : 'Input',
 847                   cls : 'row-style',
 848                   disabled : true,
 849                   fieldLabel : _this._strings['708ea0e601087e73c4764d5086e3ea3c'] /* File Name: */,
 850                   labelWidth : 4,
 851                   name : 'filename',
 852                   style : 'padding: 0;',
 853                   xns : Roo.bootstrap,
 854                   '|xns' : 'Roo.bootstrap'
 855                  },
 856                  {
 857                   xtype : 'Input',
 858                   cls : 'row-style',
 859                   disabled : true,
 860                   fieldLabel : _this._strings['e0a53da57dd79cca5d3b6a7c42e463ef'] /* File Type: */,
 861                   labelWidth : 4,
 862                   name : 'mimetype',
 863                   xns : Roo.bootstrap,
 864                   '|xns' : 'Roo.bootstrap'
 865                  },
 866                  {
 867                   xtype : 'Input',
 868                   cls : 'row-style',
 869                   disabled : true,
 870                   fieldLabel : _this._strings['3f986fa4066f6bded1376eb69de18da2'] /* File Size: */,
 871                   labelWidth : 4,
 872                   name : 'filesize',
 873                   xns : Roo.bootstrap,
 874                   '|xns' : 'Roo.bootstrap'
 875                  },
 876                  {
 877                   xtype : 'Input',
 878                   cls : 'row-style',
 879                   disabled : true,
 880                   fieldLabel : _this._strings['14834a16229091f47cf1810177d07916'] /* Created Date: */,
 881                   labelWidth : 4,
 882                   name : 'created',
 883                   xns : Roo.bootstrap,
 884                   '|xns' : 'Roo.bootstrap'
 885                  },
 886                  {
 887                   xtype : 'Input',
 888                   cls : 'row-style',
 889                   fieldLabel : _this._strings['d0042a700e9bdf79689d63ee6846dc0e'] /* Description: */,
 890                   labelWidth : 4,
 891                   name : 'descript',
 892                   xns : Roo.bootstrap,
 893                   '|xns' : 'Roo.bootstrap'
 894                  },
 895                  {
 896                   xtype : 'Input',
 897                   inputType : 'hidden',
 898                   name : 'id',
 899                   xns : Roo.bootstrap,
 900                   '|xns' : 'Roo.bootstrap'
 901                  },
 902                  {
 903                   xtype : 'Row',
 904                   cls : 'form-group-button_row',
 905                   xns : Roo.bootstrap,
 906                   '|xns' : 'Roo.bootstrap',
 907                   items  : [
 908                    {
 909                     xtype : 'Column',
 910                     md : 12,
 911                     style : 'text-align: center',
 912                     xns : Roo.bootstrap,
 913                     '|xns' : 'Roo.bootstrap',
 914                     items  : [
 915                      {
 916                       xtype : 'Button',
 917                       html : _this._strings['d6d93f0d6b7c6018d8949e73ed6efb6c'] /* <i class="fa fa-save"></i> Save Changes */,
 918                       weight : 'default',
 919                       listeners : {
 920                        click : function (_self, e)
 921                         {
 922                             _this.detail_form.doAction('submit');
 923                         }
 924                       },
 925                       xns : Roo.bootstrap,
 926                       '|xns' : 'Roo.bootstrap'
 927                      }
 928                     ]
 929                    }
 930                   ]
 931                  }
 932                 ]
 933                }
 934               ]
 935              }
 936             ]
 937            }
 938           ]
 939          }
 940         ]
 941        }
 942       ]
 943      }
 944     ]
 945    }  );
 946  }
 947 });
 948 Roo.apply(Pman.Dialog.BAdminImageManager, Pman.Dialog.BAdminImageManager.prototype);