diff options
Diffstat (limited to 'sources/plugins/imagebrowser/browser/browser.js')
-rw-r--r-- | sources/plugins/imagebrowser/browser/browser.js | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/sources/plugins/imagebrowser/browser/browser.js b/sources/plugins/imagebrowser/browser/browser.js new file mode 100644 index 00000000..5d52dbdd --- /dev/null +++ b/sources/plugins/imagebrowser/browser/browser.js | |||
@@ -0,0 +1,136 @@ | |||
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 | }; | ||