Add galleryitemview TV

_build/data/events/events.gallerycustomtv.php

@@ -29,6 +29,8 @@
 $events = array();
 
 $evs = array(
+ 'OnDocFormSave',
+ 'OnResourceDuplicate',
  'OnTVInputRenderList',
  'OnTVInputPropertiesList',
  'OnTVOutputRenderList',

assets/components/gallery/connector.php

@@ -47,7 +47,6 @@
  if ($modx->user->hasSessionContext($modx->context->get('key'))) {
  $_SERVER['HTTP_MODAUTH'] = $_SESSION["modx.{$modx->context->get('key')}.user.token"];
  } else {
- $_SESSION["modx.{$modx->context->get('key')}.user.token"] = 0;
  $_SERVER['HTTP_MODAUTH'] = 0;
  }
  } else {
@@ -61,4 +60,4 @@
 $modx->request->handleRequest(array(
  'processors_path' => $path,
  'location' => '',
-));
+));

assets/components/gallery/css/fileuploader.css

@@ -1,5 +1,11 @@
 .qq-uploader { position:relative; width: 100%;}
 
+.qq-uploader a {
+ display: inline-block;
+ margin-top: 10px;
+ text-decoration: none;
+}
+
 .qq-upload-button {
  display:block; /* or inline-block */
  padding: 7px 0;
@@ -11,6 +17,12 @@
  margin-top: 10px;
  font-weight: bold;
 }
+/* 2.3 style fixes */
+.qq-upload-button.x-btn {
+ border: 0;
+ padding: 10px 15px;
+ text-shadow: none;
+}
 .qq-upload-button-hover {background:#5C7F17;}
 .qq-upload-button-focus {outline:1px dotted black;}
 

assets/components/gallery/css/mgr.css

@@ -6,25 +6,38 @@
 .gal-item-inactive {
  opacity: 0.5;
 }
-.green { color: green; }
-.red { color: red; }
+/* unnecessary as defined in default styles */
+/*.green { color: green; }
+.red { color: red; }*/
 
 .gal-detail-active {
  float: right;
 }
 .gal-view-item-albums {
  overflow:auto;
- border-top: 1px solid #d4d4d4;
- margin-top: 4px;
+ border-top: 1px solid #E4E4E4;
+ margin-top: 7px;
 }
 
 .gal-item-thumb {
  border: 1px solid #ddd;
- padding: 5px 5px 3px;
+ padding: 5px;
 }
 
 .gal-item-update-preview {
  margin: 0 auto;
  text-align: center;
  padding: 2px;
+}
+
+#gal-album-items-detail {
+ border-left: 1px solid #E4E4E4;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-left: 0 !important; /* override default modx theme styles for .x-column */
+}
+
+.modx-browser-thumb-wrap .gal-item-thumb {
+ height: 100px;
 }

assets/components/gallery/js/mgr/gallery.js

@@ -16,8 +16,8 @@ GAL.window.CreateAlbum = function(config) {
  Ext.applyIf(config,{
  title: _('gallery.album_create')
  ,id: this.ident
- ,height: 150
- ,width: 650
+ // ,height: 150
+ ,width: 600
  ,url: GAL.config.connector_url
  ,action: 'mgr/album/create'
  ,fields: [{
@@ -57,6 +57,12 @@ GAL.window.CreateAlbum = function(config) {
  },{
  columnWidth: .5
  ,items: [{
+ xtype: 'textfield'
+ ,fieldLabel: _('gallery.year')
+ ,name: 'year'
+ ,anchor: '100%'
+ ,allowBlank: true
+ },{
  xtype: 'checkbox'
  ,boxLabel: _('gallery.active')
  ,description: MODx.expandHelp ? '' : _('gallery.active_desc')
@@ -104,8 +110,9 @@ GAL.window.UpdateItem = function(config) {
  title: _('gallery.item_update')
  ,id: this.ident
  ,closeAction: 'close'
- ,height: 150
- ,width: '55%'
+ // ,height: 150
+ // ,width: '55%'
+ ,width: 600
  ,url: GAL.config.connector_url
  ,action: 'mgr/item/update'
  ,fileUpload: true
@@ -177,6 +184,7 @@ GAL.window.UpdateItem = function(config) {
  ,name: 'id'
  ,fieldLabel: _('id')
  ,submitValue: true
+ ,anchor: '100%'
  },{
  xtype: 'checkbox'
  ,boxLabel: _('gallery.active')
@@ -218,9 +226,10 @@ GAL.window.UploadItem = function(config) {
  Ext.applyIf(config,{
  title: _('gallery.item_upload')
  ,id: this.ident
- ,height: 150
- ,width: '55%'
- ,minWidth: 650
+ // ,height: 150
+ // ,width: '55%'
+ ,width: 600
+ // ,minWidth: 650
  ,url: GAL.config.connector_url
  ,action: 'mgr/item/upload'
  ,fileUpload: true
@@ -235,7 +244,7 @@ GAL.window.UploadItem = function(config) {
  ,labelAlign: 'top'
  ,anchor: '100%'
  ,border: false
- ,cls:'main-wrapper'
+ ,cls: (MODx.config.connector_url) ? '' : 'main-wrapper' // check for 2.3
  ,labelSeparator: ''
  }
  ,items: [{
@@ -268,8 +277,8 @@ GAL.window.UploadItem = function(config) {
  },{
  columnWidth: .5
  ,items: [{
- xtype: 'textfield'
- ,inputType: 'file'
+ xtype: (MODx.config.connector_url) ? 'fileuploadfield' : 'textfield' // check for 2.3
+ ,inputType: (MODx.config.connector_url) ? 'text' : 'file' // check for 2.3
  ,fieldLabel: _('gallery.file')
  ,description: MODx.expandHelp ? '' : _('gallery.item_upload_file_desc')
  ,name: 'file'
@@ -327,9 +336,10 @@ GAL.window.UploadCover = function(config) {
  Ext.applyIf(config,{
  title: _('gallery.cover_upload')
  ,id: this.ident
- ,height: 150
- ,width: 350
- ,minWidth: 350
+ // ,height: 150
+ ,height: 300 // account for the preview thumbnail that is rendered after the window is opened
+ // ,width: 350
+ // ,minWidth: 350
  ,saveBtnText:_('gallery.upload_cover')
  ,url: GAL.config.connector_url
  ,action: 'mgr/album/uploadcover'
@@ -344,7 +354,7 @@ GAL.window.UploadCover = function(config) {
  layout: 'form'
  ,labelAlign: 'top'
  ,border: false
- ,cls:'main-wrapper'
+ ,cls: (MODx.config.connector_url) ? '' : 'main-wrapper' // check for 2.3
  ,labelSeparator: ''
  }
  ,items: [{
@@ -353,8 +363,8 @@ GAL.window.UploadCover = function(config) {
  xtype:'hidden'
  ,name:'id'
  },{
- xtype: 'textfield'
- ,inputType: 'file'
+ xtype: (MODx.config.connector_url) ? 'fileuploadfield' : 'textfield' // check for 2.3
+ ,inputType: (MODx.config.connector_url) ? 'text' : 'file' // check for 2.3
  ,fieldLabel: _('gallery.file')
  ,description: MODx.expandHelp ? '' : _('gallery.item_upload_file_desc')
  ,name: 'file'
@@ -382,7 +392,7 @@ GAL.window.UploadMultiItems = function(config) {
  title: _('gallery.multi_item_upload')
  ,id: this.ident
  ,height: 350
- ,width: 475
+ // ,width: 475
  ,fields: [{
  xtype: 'hidden'
  ,name: 'album'
@@ -483,8 +493,8 @@ GAL.window.BatchUpload = function(config) {
  Ext.applyIf(config,{
  title: _('gallery.batch_upload')
  ,id: this.ident
- ,height: 150
- ,width: 500
+ // ,height: 150
+ // ,width: 600
  ,url: GAL.config.connector_url
  ,action: 'mgr/item/batchupload'
  ,fileUpload: true
@@ -547,17 +557,17 @@ GAL.window.ZipUpload = function(config) {
  Ext.applyIf(config,{
  title: _('gallery.zip_upload')
  ,id: this.ident
- ,height: 150
- ,width: 500
+ // ,height: 150
+ // ,width: 600
  ,url: GAL.config.connector_url
  ,action: 'mgr/item/zipupload'
  ,fileUpload: true
  ,fields: [{
  xtype: 'hidden'
  ,name: 'album'
  },{
- xtype: 'textfield'
- ,inputType: 'file'
+ xtype: (MODx.config.connector_url) ? 'fileuploadfield' : 'textfield' // check for 2.3
+ ,inputType: (MODx.config.connector_url) ? 'text' : 'file' // check for 2.3
  ,fieldLabel: _('gallery.zip_file')
  ,description: MODx.expandHelp ? '' : _('gallery.zip_upload_intro')
  ,name: 'zip'

assets/components/gallery/js/mgr/sections/album/update.js

@@ -1,14 +1,11 @@
-Ext.onReady(function() {
- MODx.load({ xtype: 'gal-page-album-update'});
-});
-
 GAL.page.UpdateAlbum = function(config) {
  config = config || {};
  Ext.applyIf(config,{
  formpanel: 'gal-panel-album'
  ,buttons: [{
  text: _('save')
  ,id: 'gal-btn-save'
+ ,cls: 'primary-button'
  ,process: 'mgr/album/update'
  ,method: 'remote'
  ,keys: [{

assets/components/gallery/js/mgr/sections/home.js

@@ -1,7 +1,3 @@
-Ext.onReady(function() {
- MODx.load({ xtype: 'gal-page-home'});
-});
-
 GAL.page.Home = function(config) {
  config = config || {};
  Ext.applyIf(config,{

assets/components/gallery/js/mgr/utils/fileuploader.js

@@ -495,7 +495,7 @@ qq.FileUploader = function(o){
 
  template: '<div class="qq-uploader">' + 
  '<div class="qq-upload-drop-area"><span>' + _('gallery.dropfileshere') + '</span></div>' +
- '<div class="qq-upload-button">' + _('file_upload') + '</div>' +
+ '<div class="qq-upload-button ' + (MODx.config.connector_url ? 'x-btn primary-button' : '') + '">' + _('file_upload') + '</div>' +
  '<p><a href="#" onclick="clearSuccess(); return false;">' + _('gallery.clearsuccessful') + '</a> | ' +
  '<a href="#" onclick="clearFailure(); return false;">' + _('gallery.clearfailure') + '</a></p>' +
  '<ul class="qq-upload-list"></ul>' +

assets/components/gallery/js/mgr/widgets/album/album.items.view.js

@@ -15,7 +15,11 @@ GAL.view.AlbumItems = function(config) {
  ,tpl: this.templates.thumb
  ,enableDD: true
  ,multiSelect: true
- ,listeners: {}
+ ,itemSelector: 'div.modx-browser-thumb-wrap'
+ ,listeners: {
+ 'selectionchange': {fn:this.showDetails, scope:this, buffer:100}
+ ,'dblclick': config.onSelect || {fn:Ext.emptyFn,scope:this}
+ }
  ,prepareData: this.formatData.createDelegate(this)
  });
  GAL.view.AlbumItems.superclass.constructor.call(this,config);
@@ -186,8 +190,8 @@ Ext.extend(GAL.view.AlbumItems,MODx.DataView,{
  ,_initTemplates: function() {
  this.templates.thumb = new Ext.XTemplate(
  '<tpl for=".">'
- ,'<div class="modx-pb-thumb-wrap <tpl if="!active">gal-item-inactive</tpl>" id="gal-item-{id}">'
- ,'<div class="gal-item-thumb">'
+ ,'<div class="modx-browser-thumb-wrap modx-pb-thumb-wrap <tpl if="!active">gal-item-inactive</tpl>" id="gal-item-{id}">'
+ ,'<div class="modx-browser-thumb gal-item-thumb">'
  ,'<img src="{thumbnail}" title="{name}" />'
  ,'</div>'
  ,'<span>{shortName}</span>' 
@@ -200,8 +204,8 @@ Ext.extend(GAL.view.AlbumItems,MODx.DataView,{
  this.templates.details = new Ext.XTemplate(
  '<div class="details">'
  ,'<tpl for=".">'
- ,'<div class="modx-pb-detail-thumb"><img src="{thumbnail}" alt="{shortName}" onclick="Ext.getCmp(\'gal-album-items-view\').showScreenshot(\'{id}\'); return false;" /></div>'
- ,'<div class="modx-pb-details-info">'
+ ,'<div class="modx-browser-detail-thumb modx-pb-detail-thumb"><img src="{image}" alt="{shortName}" onclick="Ext.getCmp(\'gal-album-items-view\').showScreenshot(\'{id}\'); return false;" /></div>'
+ ,'<div class="modx-browser-details-info modx-pb-details-info">'
  ,'<span class="gal-detail-active">'
  ,'<tpl if="active"><span class="green">'+_('gallery.active')+'</span></tpl>'
  ,'<tpl if="!active"><span class="red">'+_('gallery.inactive')+'</span></tpl>'
@@ -232,7 +236,7 @@ Ext.extend(GAL.view.AlbumItems,MODx.DataView,{
  ,plain: true
  ,items: [{
  id: 'gal-item-ss'
- ,html: ''
+ ,html: ''
  }]
  ,buttons: [{
  text: _('close')
@@ -286,4 +290,3 @@ Ext.extend(GAL.view.AlbumItems,MODx.DataView,{
 });
 Ext.reg('gal-view-album-items',GAL.view.AlbumItems);
 
-

assets/components/gallery/js/mgr/widgets/album/album.panel.js

@@ -70,17 +70,18 @@ GAL.panel.Album = function(config) {
  ,columnWidth: .6
  },{
  xtype:'hidden'
- ,'name':'cover_filename_url'
+ ,name:'cover_filename_url'
  ,id:'cover_filename_url'
  },{
  xtype:'button'
  ,text: _('gallery.upload_cover')
- ,height: 39
+ ,cls: 'primary-button'
+ // ,height: 39
  ,handler: this.updateCover
  },{
  xtype:'button'
  ,text: _('gallery.delete_cover')
- ,height: 39
+ // ,height: 39
  ,handler:function() {
  var panel=Ext.getCmp('gal-panel-album').getForm();
  panel.findField('cover_filename').setValue('');
@@ -318,9 +319,9 @@ GAL.panel.AlbumItems = function(config) {
  ,region: 'east'
  ,split: true
  ,autoScroll: true
- ,width: '20%'
+ ,width: '25%'
  ,minWidth: 150
- ,maxWidth: 250
+ // ,maxWidth: 250
  ,height: 450
  ,border: false
  }]

assets/components/gallery/js/mgr/widgets/album/album.tree.js

@@ -7,6 +7,7 @@ GAL.tree.Album = function(config) {
  ,action: 'mgr/album/getNodes'
  ,tbar: [{
  text: _('gallery.album_create')
+ ,cls: 'primary-button'
  ,handler: function(btn,e) { this.createAlbum(btn,e,true); }
  ,scope: this
  },'-',{