wp-admin/js/upload.js

   1 jQuery(document).ready( function() {
   2         theFileList = {
   3                 currentImage: {ID: 0},
   4                 nonce: '',
   5                 tab: '',
   6                 postID: 0,
   7
   8                 // cookie create and read functions adapted from http://www.quirksmode.org/js/cookies.html
   9                 createCookie: function(name,value,days) {
  10                         if (days) {
  11                                 var date = new Date();
  12                                 date.setTime(date.getTime()+(days*24*60*60*1000));
  13                                 var expires = "; expires="+date.toGMTString();
  14                         }
  15                         else var expires = "";
  16                         document.cookie = name+"="+value+expires+"; path=/";
  17                 },
  18
  19                 readCookie: function(name) {
  20                         var nameEQ = name + "=";
  21                         var ca = document.cookie.split(';');
  22                         for(var i=0;i < ca.length;i++) {
  23                                 var c = ca[i];
  24                                 while (c.charAt(0)==' ') c = c.substring(1,c.length);
  25                                 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  26                         }
  27                         return null;
  28                 },
  29
  30                 assignCookieOnChange: function() {
  31                         jQuery(this).bind("change", function(){
  32                                 theFileList.createCookie(jQuery(this).attr('name'),jQuery(this).attr('id'),365);
  33                         });
  34                 },
  35
  36                 checkCookieSetting: function(name, defaultSetting) {
  37                         return this.readCookie(name) ? this.readCookie(name) : defaultSetting;
  38                 },
  39
  40                 toQueryParams: function( s ) {
  41                         var r = {}; if ( !s ) { return r; }
  42                         var q = s.split('?'); if ( q[1] ) { s = q[1]; }
  43                         var pp = s.split('&');
  44                         for ( var i in pp ) {
  45                                 var p = pp[i].split('=');
  46                                 r[p[0]] = p[1];
  47                         }
  48                         return r;
  49                 },
  50
  51                 toQueryString: function(params) {
  52                         var qryStr = '';
  53                         for ( var key in params )
  54                                 qryStr += key + '=' + params[key] + '&';
  55                         return qryStr;
  56                 },
  57
  58                 initializeVars: function() {
  59                         this.urlData  = document.location.href.split('?');
  60                         this.params = this.toQueryParams(this.urlData[1]);
  61                         this.postID = this.params['post_id'];
  62                         this.tab = this.params['tab'];
  63                         this.style = this.params['style'];
  64                         this.ID = this.params['ID'];
  65                         if ( !this.style )
  66                                 this.style = 'default';
  67                         var nonceEl = jQuery('#nonce-value');
  68                         if ( nonceEl )
  69                                 this.nonce = jQuery(nonceEl).val();
  70                         if ( this.ID ) {
  71                                 this.grabImageData( this.ID );
  72                                 this.imageView( this.ID );
  73                         }
  74                 },
  75
  76                 initializeLinks: function() {
  77                         if ( this.ID )
  78                                 return;
  79                         jQuery('a.file-link').each(function() {
  80                                 var id = jQuery(this).attr('id').split('-').pop();
  81                                 jQuery(this).attr('href','javascript:void(0)').click(function(e) {
  82                                         theFileList[ 'inline' == theFileList.style ? 'imageView' : 'editView' ](id, e);
  83                                 });
  84                         });
  85                 },
  86
  87                 grabImageData: function(id) {
  88                         if ( id == this.currentImage.ID )
  89                                 return;
  90                         var thumbEl = jQuery('#attachment-thumb-url-' + id);
  91                         if ( thumbEl ) {
  92                                 this.currentImage.thumb = ( 0 == id ? '' : jQuery(thumbEl).val() );
  93                                 this.currentImage.thumbBase = ( 0 == id ? '' : jQuery('#attachment-thumb-url-base-' + id).val() );
  94                         } else {
  95                                 this.currentImage.thumb = false;
  96                         }
  97                         this.currentImage.src = ( 0 == id ? '' : jQuery('#attachment-url-' + id).val() );
  98                         this.currentImage.srcBase = ( 0 == id ? '' : jQuery('#attachment-url-base-' + id).val() );
  99                         this.currentImage.page = ( 0 == id ? '' : jQuery('#attachment-page-url-' + id).val() );
 100                         this.currentImage.title = ( 0 == id ? '' : jQuery('#attachment-title-' + id).val() );
 101                         this.currentImage.description = ( 0 == id ? '' : jQuery('#attachment-description-' + id).val() );
 102                         var widthEl = jQuery('#attachment-width-' + id);
 103                         if ( widthEl ) {
 104                                 this.currentImage.width = ( 0 == id ? '' : jQuery(widthEl).val() );
 105                                 this.currentImage.height = ( 0 == id ? '' : jQuery('#attachment-height-' + id).val() );
 106                         } else {
 107                                 this.currentImage.width = false;
 108                                 this.currentImage.height = false;
 109                         }
 110                         this.currentImage.isImage = ( 0 == id ? 0 : jQuery('#attachment-is-image-' + id).val() );
 111                         this.currentImage.ID = id;
 112                 },
 113
 114                 imageView: function(id, e) {
 115                         this.prepView(id);
 116                         var h = '';
 117
 118                         h += "<div id='upload-file'>"
 119                         if ( this.ID ) {
 120                                 var params = this.params;
 121                                 params.ID = '';
 122                                 params.action = '';
 123                                 h += "<a href='" + this.urlData[0] + '?' + this.toQueryString(params) + "'";
 124                         } else {
 125                                 h += "<a href='#' onclick='return theFileList.cancelView();'";
 126                         }
 127                         h += " title='" + this.browseTitle + "' class='back'>" + this.back + "</a>";
 128                         h += "<div id='file-title'>"
 129                         if ( 0 == this.currentImage.isImage )
 130                                 h += "<h2><a href='" + this.currentImage.srcBase + this.currentImage.src + "' onclick='return false;' title='" + this.directTitle + "'>" + this.currentImage.title + "</a></h2>";
 131                         else
 132                                 h += "<h2>" + this.currentImage.title + "</h2>";
 133                         h += " &#8212; <span>";
 134                         h += "<a href='#' onclick='return theFileList.editView(" + id + ");'>" + this.edit + "</a>"
 135                         h += "</span>";
 136                         h += '</div>'
 137                         h += "<div id='upload-file-view' class='alignleft'>";
 138                         if ( 1 == this.currentImage.isImage ) {
 139                                 h += "<a href='" + this.currentImage.srcBase + this.currentImage.src + "' onclick='return false;' title='" + this.directTitle + "'>";
 140                                 h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' />";
 141                                 h += "</a>";
 142                         } else
 143                                 h += '&nbsp;';
 144                         h += "</div>";
 145
 146                         h += "<form name='uploadoptions' id='uploadoptions' class='alignleft'>";
 147                         h += "<table>";
 148                         var display = [];
 149                         var checkedDisplay = 'display-title';
 150                         if ( 1 == this.currentImage.isImage ) {
 151                                 checkedDisplay = 'display-full';
 152                                 if ( this.currentImage.thumb ) {
 153                                         display.push("<label for='display-thumb'><input type='radio' name='display' id='display-thumb' value='thumb' /> " + this.thumb + "</label><br />");
 154                                         checkedDisplay = 'display-thumb';
 155                                 }
 156                                 display.push("<label for='display-full'><input type='radio' name='display' id='display-full' value='full' /> " + this.full + "</label>");
 157                         } else if ( this.currentImage.thumb ) {
 158                                 display.push("<label for='display-thumb'><input type='radio' name='display' id='display-thumb' value='thumb' /> " + this.icon + "</label>");
 159                         }
 160                         if ( display.length ) {
 161                                 display.push("<br /><label for='display-title'><input type='radio' name='display' id='display-title' value='title' /> " + this.title + "</label>");
 162                                 h += "<tr><th style='padding-bottom:.5em'>" + this.show + "</th><td style='padding-bottom:.5em'>";
 163                                 jQuery(display).each( function() { h += this; } );
 164                                 h += "</td></tr>";
 165                         }
 166
 167                         var checkedLink = 'link-file';
 168                         h += "<tr><th>" + this.link + "</th><td>";
 169                         h += "<label for='link-file'><input type='radio' name='link' id='link-file' value='file' /> " + this.file + "</label><br />";                   h += "<label for='link-page'><input type='radio' name='link' id='link-page' value='page' /> " + this.page + "</label><br />";
 170                         h += "<label for='link-none'><input type='radio' name='link' id='link-none' value='none' /> " + this.none + "</label>";
 171                         h += "</td></tr>";
 172
 173                         h += "<tr><td colspan='2'><p class='submit'>";
 174                         h += "<input type='button' class='button' name='send' onclick='theFileList.sendToEditor(" + id + ")' value='" + this.editorText + "' />";
 175                         h += "</p></td></tr></table>";
 176                         h += "</form>";
 177
 178                         h += "</div>";
 179
 180                         jQuery(h).prependTo('#upload-content');
 181                         jQuery("input[@name='display']").each(theFileList.assignCookieOnChange);
 182                         jQuery("input[@name='link']").each(theFileList.assignCookieOnChange);
 183                         checkedDisplay = this.checkCookieSetting('display', checkedDisplay);
 184                         checkedLink = this.checkCookieSetting('link', checkedLink);
 185                         jQuery('#' + checkedDisplay).attr('checked','checked');
 186                         jQuery('#' + checkedLink).attr('checked','checked');
 187                         if (e) return e.stopPropagation();
 188                         return false;
 189                 },
 190
 191                 editView: function(id, e) {
 192                         this.prepView(id);
 193                         var h = '';
 194
 195                         var action = 'upload.php?style=' + this.style + '&amp;tab=upload';
 196                         if ( this.postID )
 197                                 action += '&amp;post_id=' + this.postID;
 198
 199                         h += "<form id='upload-file' method='post' action='" + action + "'>";
 200                         if ( this.ID ) {
 201                                 var params = this.params;
 202                                 params.ID = '';
 203                                 params.action = '';
 204                                 h += "<a href='" + this.urlData[0] + '?' + this.toQueryString(params) + "'";
 205                         } else {
 206                                 h += "<a href='#' onclick='return theFileList.cancelView();'";
 207                         }
 208                         h += " title='" + this.browseTitle + "' class='back'>" + this.back + "</a>";
 209                         h += "<div id='file-title'>"
 210                         if ( 0 == this.currentImage.isImage )
 211                                 h += "<h2><a href='" + this.currentImage.srcBase + this.currentImage.src + "' onclick='return false;' title='" + this.directTitle + "'>" + this.currentImage.title + "</a></h2>";
 212                         else
 213                                 h += "<h2>" + this.currentImage.title + "</h2>";
 214                         h += " &#8212; <span>";
 215                         h += "<a href='#' onclick='return theFileList.imageView(" + id + ");'>" + this.insert + "</a>";
 216                         h += "</span>";
 217                         h += '</div>'
 218                         h += "<div id='upload-file-view' class='alignleft'>";
 219                         if ( 1 == this.currentImage.isImage ) {
 220                                 h += "<a href='" + this.currentImage.srcBase + this.currentImage.src + "' onclick='return false;' title='" + this.directTitle + "'>";
 221                                 h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' />";
 222                                 h += "</a>";
 223                         } else
 224                                 h += '&nbsp;';
 225                         h += "</div>";
 226
 227
 228                         h += "<table><col /><col class='widefat' /><tr>";
 229                         h += "<th scope='row'><label for='url'>" + this.urlText + "</label></th>";
 230                         h += "<td><input type='text' id='url' class='readonly' value='" + this.currentImage.srcBase + this.currentImage.src + "' readonly='readonly' /></td>";
 231                         h += "</tr><tr>";
 232                         h += "<th scope='row'><label for='post_title'>" + this.title + "</label></th>";
 233                         h += "<td><input type='text' id='post_title' name='post_title' value='" + this.currentImage.title + "' /></td>";
 234                         h += "</tr><tr>";
 235                         h += "<th scope='row'><label for='post_content'>" + this.desc + "</label></th>";
 236                         h += "<td><textarea name='post_content' id='post_content'>" + this.currentImage.description + "</textarea></td>";
 237                         h += "</tr><tr id='buttons' class='submit'><td colspan='2'><input type='button' id='delete' name='delete' class='delete alignleft' value='" + this.deleteText + "' onclick='theFileList.deleteFile(" + id + ");' />";
 238                         h += "<input type='hidden' name='from_tab' value='" + this.tab + "' />";
 239                         h += "<input type='hidden' name='post_parent' value='" + parseInt(this.postID,10) + "' />";
 240                         h += "<input type='hidden' name='action' id='action-value' value='save' />";
 241                         h += "<input type='hidden' name='ID' value='" + id + "' />";
 242                         h += "<input type='hidden' name='_wpnonce' value='" + this.nonce + "' />";
 243                         h += "<div class='submit'><input type='submit' value='" + this.saveText + "' /></div>";
 244                         h += "</td></tr></table></form>";
 245
 246                         jQuery(h).prependTo('#upload-content');
 247                         if (e) e.stopPropagation();
 248                         return false;
 249                 },
 250
 251                 prepView: function(id) {
 252                         this.cancelView( true );
 253                         var filesEl = jQuery('#upload-files');
 254                         if ( filesEl )
 255                                 filesEl.hide();
 256                         var navEl = jQuery('#current-tab-nav');
 257                         if ( navEl )
 258                                 navEl.hide();
 259                         this.grabImageData(id);
 260                 },
 261
 262                 cancelView: function( prep ) {
 263                         if ( !prep ) {
 264                                 var filesEl = jQuery('#upload-files');
 265                                 if ( filesEl )
 266                                         jQuery(filesEl).show();
 267                                 var navEl = jQuery('#current-tab-nav');
 268                                 if ( navEl )
 269                                         jQuery(navEl).show();
 270                         }
 271                         if ( !this.ID )
 272                                 this.grabImageData(0);
 273                         var div = jQuery('#upload-file');
 274                         if ( div )
 275                                 jQuery(div).remove();
 276                         return false;
 277                 },
 278
 279                 sendToEditor: function(id) {
 280                         this.grabImageData(id);
 281                         var link = '';
 282                         var display = '';
 283                         var h = '';
 284
 285                         link = jQuery('input[@type=radio][@name="link"][@checked]','#uploadoptions').val();
 286                         displayEl = jQuery('input[@type=radio][@name="display"][@checked]','#uploadoptions');
 287                         if ( displayEl )
 288                                 display = jQuery(displayEl).val();
 289                         else if ( 1 == this.currentImage.isImage )
 290                                 display = 'full';
 291
 292                         if ( 'none' != link )
 293                                 h += "<a href='" + ( 'file' == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + "' rel='attachment wp-att-" + this.currentImage.ID ) ) + "' title='" + this.currentImage.title + "'>";
 294                         if ( display && 'title' != display )
 295                                 h += "<img src='" + ( 'thumb' == display ? ( this.currentImage.thumbBase + this.currentImage.thumb ) : ( this.currentImage.srcBase + this.currentImage.src ) ) + "' alt='" + this.currentImage.title + "' />";
 296                         else
 297                                 h += this.currentImage.title;
 298                         if ( 'none' != link )
 299                                 h += "</a>";
 300
 301                         var win = window.opener ? window.opener : window.dialogArguments;
 302                         if ( !win )
 303                                 win = top;
 304                         tinyMCE = win.tinyMCE;
 305                         if ( typeof tinyMCE != 'undefined' && tinyMCE.getInstanceById('content') ) {
 306                                 tinyMCE.selectedInstance.getWin().focus();
 307                                 tinyMCE.execCommand('mceInsertContent', false, h);
 308                         } else
 309                                 win.edInsertContent(win.edCanvas, h);
 310                         if ( !this.ID )
 311                                 this.cancelView();
 312                         return false;
 313                 },
 314
 315                 deleteFile: function(id) {
 316                         if ( confirm( this.confirmText.replace(/%title%/g, this.currentImage.title) ) ) {
 317                                 jQuery('#action-value').attr('value','delete');
 318                                 jQuery('#upload-file').submit();
 319                                 return true;
 320                         }
 321                         return false;
 322                 }
 323
 324         };
 325
 326         for ( var property in uploadL10n )
 327                 theFileList[property] = uploadL10n[property];
 328         theFileList.initializeVars();
 329         theFileList.initializeLinks();
 330 } );