sources/plugins/imagebrowser/browser/browser.js

   1 var CkEditorImageBrowser = {};
   2
   3 CkEditorImageBrowser.folders = [];
   4 CkEditorImageBrowser.images = {}; //folder => list of images
   5 CkEditorImageBrowser.ckFunctionNum = null;
   6
   7 CkEditorImageBrowser.$folderSwitcher = null;
   8 CkEditorImageBrowser.$imagesContainer = null;
   9
  10 CkEditorImageBrowser.init = function () {
  11         CkEditorImageBrowser.$folderSwitcher = $('#js-folder-switcher');
  12         CkEditorImageBrowser.$imagesContainer = $('#js-images-container');
  13
  14         var baseHref = CkEditorImageBrowser.getQueryStringParam("baseHref");
  15         if (baseHref) {
  16                 var h = (document.head || document.getElementsByTagName("head")[0]),
  17                         el = h.getElementsByTagName("link")[0];
  18                 el.href = location.href.replace(/\/[^\/]*$/,"/browser.css");
  19                 (h.getElementsByTagName("base")[0]).href = baseHref;
  20         }
  21
  22         CkEditorImageBrowser.ckFunctionNum = CkEditorImageBrowser.getQueryStringParam('CKEditorFuncNum');
  23
  24         CkEditorImageBrowser.initEventHandlers();
  25
  26         CkEditorImageBrowser.loadData(CkEditorImageBrowser.getQueryStringParam('listUrl'), function () {
  27                 CkEditorImageBrowser.initFolderSwitcher();
  28         });
  29 };
  30
  31 CkEditorImageBrowser.loadData = function (url, onLoaded) {
  32         CkEditorImageBrowser.folders = [];
  33         CkEditorImageBrowser.images = {};
  34
  35         $.getJSON(url, function (list) {
  36                 $.each(list, function (_idx, item) {
  37                         if (typeof(item.folder) === 'undefined') {
  38                                 item.folder = 'Images';
  39                         }
  40
  41                         if (typeof(item.thumb) === 'undefined') {
  42                                 item.thumb = item.image;
  43                         }
  44
  45                         CkEditorImageBrowser.addImage(item.folder, item.image, item.thumb);
  46                 });
  47
  48                 onLoaded();
  49         }).error(function(jqXHR, textStatus, errorThrown) {
  50                 var errorMessage;
  51                 if (jqXHR.status < 200 || jqXHR.status >= 400) {
  52                         errorMessage = 'HTTP Status: ' + jqXHR.status + '/' + jqXHR.statusText + ': "<strong style="color: red;">' + url + '</strong>"';
  53                 } else if (textStatus === 'parsererror') {
  54                         errorMessage = textStatus + ': invalid JSON file: "<strong style="color: red;">' + url + '</strong>": ' + errorThrown.message;
  55                 } else {
  56                         errorMessage = textStatus + ' / ' + jqXHR.statusText + ' / ' + errorThrown.message;
  57                 }
  58                 CkEditorImageBrowser.$imagesContainer.html(errorMessage);
  59     });
  60 };
  61
  62 CkEditorImageBrowser.addImage = function (folderName, imageUrl, thumbUrl) {
  63         if (typeof(CkEditorImageBrowser.images[folderName]) === 'undefined') {
  64                 CkEditorImageBrowser.folders.push(folderName);
  65                 CkEditorImageBrowser.images[folderName] = [];
  66         }
  67
  68         CkEditorImageBrowser.images[folderName].push({
  69                 "imageUrl": imageUrl,
  70                 "thumbUrl": thumbUrl
  71         });
  72 };
  73
  74 CkEditorImageBrowser.initFolderSwitcher = function () {
  75         var $switcher = CkEditorImageBrowser.$folderSwitcher;
  76
  77         $switcher.find('li').remove();
  78
  79         $.each(CkEditorImageBrowser.folders, function (idx, folderName) {
  80                 var $option = $('<li></li>').data('idx', idx).text(folderName);
  81                 $option.appendTo($switcher);
  82         });
  83
  84
  85         if (CkEditorImageBrowser.folders.length === 0) {
  86                 $switcher.remove();
  87                 CkEditorImageBrowser.$imagesContainer.text('No images.');
  88         } else {
  89                 if (CkEditorImageBrowser.folders.length === 1) {
  90                         $switcher.hide();
  91                 }
  92
  93                 $switcher.find('li:first').click();
  94         }
  95 };
  96
  97 CkEditorImageBrowser.renderImagesForFolder = function (folderName) {
  98         var images = CkEditorImageBrowser.images[folderName],
  99                 templateHtml = $('#js-template-image').html();
 100
 101         CkEditorImageBrowser.$imagesContainer.html('');
 102
 103         $.each(images, function (_idx, imageData) {
 104                 var html = templateHtml;
 105                 html = html.replace('%imageUrl%', imageData.imageUrl);
 106                 html = html.replace('%thumbUrl%', imageData.thumbUrl);
 107
 108                 var $item = $($.parseHTML(html));
 109
 110                 CkEditorImageBrowser.$imagesContainer.append($item);
 111         });
 112 };
 113
 114 CkEditorImageBrowser.initEventHandlers = function () {
 115         $(document).on('click', '#js-folder-switcher li', function () {
 116                 var idx = parseInt($(this).data('idx'), 10),
 117                         folderName = CkEditorImageBrowser.folders[idx];
 118
 119                 $(this).siblings('li').removeClass('active');
 120                 $(this).addClass('active');
 121
 122                 CkEditorImageBrowser.renderImagesForFolder(folderName);
 123         });
 124
 125         $(document).on('click', '.js-image-link', function () {
 126                 window.opener.CKEDITOR.tools.callFunction(CkEditorImageBrowser.ckFunctionNum, $(this).data('url'));
 127                 window.close();
 128         });
 129 };
 130
 131 CkEditorImageBrowser.getQueryStringParam = function (name) {
 132         var regex = new RegExp('[?&]' + name + '=([^&]*)'),
 133                 result = window.location.search.match(regex);
 134
 135         return (result && result.length > 1 ? decodeURIComponent(result[1]) : null);
 136 };