Skip to content
Browse files

Merge pull request #164 from dotCMS/issue-136-error-placing-image-wys…

…iwyg

fixes #136
  • Loading branch information...
2 parents aee9bfd + 0b815ad commit bf99c144b5c40f9e2759ff881493622249e276c6 @jtesser jtesser committed
Showing with 130 additions and 125 deletions.
  1. +130 −125 dotCMS/html/js/dotcms/dijit/FileBrowserDialog.js
View
255 dotCMS/html/js/dotcms/dijit/FileBrowserDialog.js
@@ -1,56 +1,56 @@
/**
- *
+ *
* This is a dijit that present a dialog to select a file/page/link within the dotCMS, it renders a mini browser that lets the user navigate
* through dotCMS tree to search and pick files, pages or links within the system.
- *
+ *
* To include the dijit into your page
- *
+ *
* JS Side
- *
+ *
* <script type="text/javascript">
* dojo.require("dotcms.dijit.FileBrowserDialog");
- *
+ *
* ...
- *
+ *
* </script>
- *
+ *
* HTML side
- *
- * <div id="myDijitId" jsId="myJSVariable" style="cssStyleOptions"
- * currentView="details" title="My title" onlyFiles="false"
+ *
+ * <div id="myDijitId" jsId="myJSVariable" style="cssStyleOptions"
+ * currentView="details" title="My title" onlyFiles="false"
* mimeTypes="image" fileExtenstions="jpg" onFileSelected="alert(file.fileName)" dojoType="dotcms.dijit.FileBrowserDialog"></div>
- *
+ *
* How to show the dialog
- *
+ *
* <script type="text/javascript">
* myJSVariable.show();
* </script>
- *
+ *
* To show the dialog
- *
+ *
* Properties
- *
+ *
* id: non-required - this is the id of the widget if not specified then it will be autogenerated.
- *
+ *
* jsId: non-required - if specified then dijit will be registered in the JS global environment with this name.
- *
+ *
* currentView: non-required - default details - The widget has three different views details, list, thumbnails.
- *
+ *
* title: non-required - Title of the dialog.
- *
+ *
* onlyFiles: non-required - default false - If true only shows files and filters out pages and links.
- *
- * mimeTypes: non-required - A comma separated list of mime types to filter for, mime types specified not need to match the whole name,
+ *
+ * mimeTypes: non-required - A comma separated list of mime types to filter for, mime types specified not need to match the whole name,
* I.E. if "image" is specified as mime type it will match files with mime types like "image/jpeg" or "image/png".
- *
+ *
* fileExtenstions: non-required - A comma separated list of file extensions to filter for. E.G. "jpg,png,gif".
- *
+ *
* onFileSelected: non-required - JS script or JS function callback to be executed when the user selects a file within the browser, the file object is passed
* to the function.
- *
+ *
* allowFileUpload: non-required - true by default - if it is true then it will let the user upload a file while looking a folder.
- *
- *
+ *
+ *
*/
dojo.provide("dotcms.dijit.FileBrowserDialog");
@@ -64,7 +64,7 @@ dojo.require("dijit.Dialog")
dojo.require("dotcms.dijit.tree.HostFolderTreeReadStoreModel")
dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated], {
-
+
templatePath: dojo.moduleUrl("dotcms", "dijit/FileBrowserDialog.jsp"),
detailsRowTemplate: '<td id="file-{id}"><a class="selectableFile"><img src="{icon}">{name}</a></td><td>{description}</td><td>{modUser}</td><td>{modDate}</td>',
listRowTemplate: '<td id="file-{id}"><a class="selectableFile"><img src="{icon}">{name}</a></td>',
@@ -75,33 +75,33 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
title: 'Select a file',
onlyFiles: false,
mimeTypes: new Array(),
- fileExtensions: new Array(),
+ fileExtensions: new Array(),
_initialized: false,
addFileTitle: 'Upload a file',
allowFileUpload: true,
-
+
postCreate: function () {
-
+
dojo.connect(this.listViewIcon, 'click', dojo.hitch(this, this._changeView, 'list'));
dojo.connect(this.detailViewIcon, 'click', dojo.hitch(this, this._changeView, 'details'));
dojo.connect(this.thumbnailViewIcon, 'click', dojo.hitch(this, this._changeView, 'thumbnails'));
-
+
},
-
+
initializeTree: function() {
-
-
-
+
+
+
var treeStore = new dotcms.dijit.tree.HostFolderTreeReadStoreModel();
-
+
this.tree = new dijit.Tree({
id: this.id + "-tree",
-
+
model: treeStore,
persist: false,
-
+
showRoot: false,
getIconClass: (function (item, opened) {
@@ -118,68 +118,68 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
_createTreeNode: function (args) {
args.id = this.id + "-treeNode-" + args.item.id;
return new dijit._TreeNode(args);
- }
+ }
}, this.foldersTree);
dojo.connect(this.tree, 'onClick', this, this._selectFolder);
-
-
+
+
this._initialized = true;
-
+
},
-
+
show: function () {
if(!dojo.isArray(this.mimeTypes)) {
this.mimeTypes = (this.mimeTypes + "").split(',');
}
-
+
if(!dojo.isArray(this.fileExtensions)) {
this.fileExtensions = (this.fileExtensions + "").split(',');
}
-
+
if(!this._initialized) {
-
+
this.initializeTree();
}
-
+
this.dialog.show();
},
-
+
uninitialize : function (event) {
},
-
+
/**
* Stub method that you can use dojo.connect to catch every time a user selects a file
* @param {Object} file
*/
onFileSelected: function (file) {
-
+
},
-
-
+
+
_norm: function (value) {
return dojo.isArray(value)?value[0]:value;
- },
-
+ },
+
_changeView: function(newView) {
this.currentView = newView;
if(this.currentFolder)
this._selectFolder (this.currentFolder);
},
-
+
_currentFolder: '',
_currentOffset: 0,
_maxNumberOfAssets: 24,
_totalResults: 0,
_currentFilter: '',
-
+
_getRootFiles: function(hostId){
this.currentFolder= hostId;
- this._loadFolder();
+ this._loadFolder();
},
-
- _selectFolder: function(item) {
+
+ _selectFolder: function(item) {
this.currentFolder = item;
this._currentOffset = 0;
@@ -188,12 +188,12 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
dojo.style(this.uploadFileButton, { display: '' });
else
dojo.style(this.uploadFileButton, { display: 'none' });
-
- this._loadFolder();
- },
-
+
+ this._loadFolder();
+ },
+
_filterHandle: null,
-
+
_filter: function () {
this._currentFilter = this.filterTextBox.attr('value');
clearTimeout(this._filterHandle);
@@ -203,14 +203,14 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
_filterDelayed: function () {
this._loadFolder();
},
-
+
_clearFilter: function () {
this.filterTextBox.attr('value', '')
this._currentFilter = '';
this._loadFolder();
},
-
- _loadFolder: function() {
+
+ _loadFolder: function() {
this._hide(this.noContent);
this._hide(this.noResults);
@@ -223,17 +223,17 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
this._removeRows(this.detailsTableBody);
this._removeRows(this.listTableBody);
this._removeRows(this.thumbnailsTableBody);
-
- BrowserAjax.getFolderContent(this._norm(this.currentFolder.id), this._currentOffset, this._maxNumberOfAssets, this._currentFilter, this.mimeTypes,
+
+ BrowserAjax.getFolderContent(this._norm(this.currentFolder.id), this._currentOffset, this._maxNumberOfAssets, this._currentFilter, this.mimeTypes,
this.fileExtensions, false, true, this.onlyFiles, "name", false, dojo.hitch(this, this._selectFolderCallback));
-
- },
-
+
+ },
+
_selectFolderCallback: function(assetsInfo) {
-
+
var assets = assetsInfo.list;
this._totalResults = assetsInfo.total;
-
+
switch (this.currentView) {
case 'details':
var table = this.detailsTable;
@@ -248,27 +248,27 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
var tableBody = this.thumbnailsTableBody;
break;
}
-
+
var className = 'alternate_1';
var template = this.currentView == 'details'?this.detailsRowTemplate:this.currentView == 'list'?this.listRowTemplate:this.thumbRowTemplate;
-
+
var columnNumber = 0;
var tableHTML = '';
for (var i = 0; i < assets.length; i++){
var asset = assets[i];
-
+
this._normalizeAssetData(asset);
-
- var rowHTML = dojo.replace(template, { id: asset.identifier, name: asset.name, description: asset.friendlyName,
+
+ var rowHTML = dojo.replace(template, { id: asset.identifier, name: asset.name, description: asset.friendlyName,
modUser: asset.modUserName, modDate: asset.modDateFormatted, className: className, icon: asset.icon, thumbnail: asset.thumbnail });
if(columnNumber == 0) {
if(this.currentView == 'details')
- rowHTML = '<tr class="' + className + '">' + rowHTML;
- else
- rowHTML = '<tr>' + rowHTML;
+ rowHTML = '<tr class="' + className + '">' + rowHTML;
+ else
+ rowHTML = '<tr>' + rowHTML;
}
-
+
switch (this.currentView) {
case 'details':
break;
@@ -282,7 +282,7 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
break;
}
if(columnNumber == 0)
- rowHTML += "</tr>";
+ rowHTML += "</tr>";
className = className == 'alternate_1'?'alternate_2':'alternate_1';
tableHTML += rowHTML;
@@ -303,28 +303,28 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
anchor.onclick = dojo.hitch(this, selected, this, asset);
}
}
-
+
this._hide(this.loadingContentWrapper);
var dimensions = dojo.coords(this.tablesContentPane.domNode);
dojo.style(this.foldersTreeWrapper, { height: (dimensions.h - 36) + "px", overflow: 'auto' });
dojo.style(this.tablesWrapper, { height: (dimensions.h - 85) + "px", overflow: 'auto' });
-
+
var startFileIndex = this._totalResults == 0?0:this._currentOffset + 1;
var ceil = this._currentOffset + this._maxNumberOfAssets > this._totalResults?this._totalResults:this._currentOffset + this._maxNumberOfAssets;
this.resultsSummary.innerHTML = 'Viewing ' + startFileIndex + '-' + ceil + ' of ' + this._totalResults;
-
+
if(ceil < this._totalResults)
this.nextButton.attr('disabled', false);
else
this.nextButton.attr('disabled', true);
-
+
if(this._currentOffset > 0)
this.previousButton.attr('disabled', false);
else
this.previousButton.attr('disabled', true);
-
+
if(this._totalResults > 0) {
this._show(this.tablesWrapper);
this._show(table);
@@ -333,48 +333,48 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
this._show(this.noResults);
}
-
+
},
-
+
_previousButtonClick: function () {
this._currentOffset -= this._maxNumberOfAssets;
if(this.offset < 0) offset = 0;
- this._loadFolder();
+ this._loadFolder();
},
-
+
_nextButtonClick: function () {
this._currentOffset += this._maxNumberOfAssets;
if(this._currentOffset >= this._totalResults)
this._currentOffset = this._totalResults - 1;
- this._loadFolder();
+ this._loadFolder();
},
-
+
_assetSelected: function (asset) {
this.onFileSelected(asset);
this.dialog.hide();
},
-
+
_within: function (event, elem) {
var x = event.clientX;
var y = event.clientY;
var coords = dojo.coords(elem);
-
+
if(x < coords.x || x > coords.x + coords.w || y < coords.y || y > coords.y + coords.h) {
return false;
}
- return true;
+ return true;
},
-
+
_normalizeAssetData: function(asset) {
-
+
var name = asset.title;
var assetIcon = '/icon?i=' + asset.extension;
var assetThumbnail = '/icon?i=' + asset.extension;
-
+
if (asset.type == 'file_asset') {
name = asset.fileName;
assetIcon = '/icon?i=' + asset.extension;
-
+
if(asset.mimeType != null){
if(asset.mimeType.indexOf('image') >= 0)
assetThumbnail = '/thumbnail?w=100&h=100&id=' + asset.identifier;
@@ -389,50 +389,55 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
assetIcon = '/icon?i=entry16';
assetThumbnail = assetIcon;
}
-
+
if(asset.modDate) {
var hours = asset.modDate.getHours() < 10?"0" + asset.modDate.getHours():asset.modDate.getHours();
var AMPM = asset.modDate.getHours() >= 12?"PM":"AM";
hours = hours > 12?hours - 12:hours;
var minutes = asset.modDate.getMinutes() < 10?"0" + asset.modDate.getMinutes():asset.modDate.getMinutes();
var seconds = asset.modDate.getSeconds() < 10?"0" + asset.modDate.getSeconds():asset.modDate.getSeconds();
- var modDate = (asset.modDate.getMonth() + 1) + "/" + asset.modDate.getDate() + "/" + asset.modDate.getFullYear() + " " +
+ var modDate = (asset.modDate.getMonth() + 1) + "/" + asset.modDate.getDate() + "/" + asset.modDate.getFullYear() + " " +
hours + ":" + minutes + ":" + seconds + AMPM;
-
+
}
else
var modDate = "";
-
+
asset.name = name;
asset.icon = assetIcon;
asset.thumbnail = assetThumbnail;
asset.modDateFormatted = modDate;
-
+
},
-
+
_show: function(elem) {
dojo.style(elem, { display: "" });
},
-
+
_hide: function(elem) {
dojo.style(elem, { display: "none" });
},
-
+
_removeRows: function(table) {
if(dojo.isIE) {
- while(table.hasChildNodes())
- table.deleteRow(0);
+ try {
+ while(table.hasChildNodes()) {
+ table.deleteRow(0);
+ }
+ } catch(e) {
+ // not supported by broswer
+ }
} else {
table.innerHTML = '';
}
},
-
+
_addNewFile: function () {
this.addingAFile = true;
this.firstLoad = true;
- var addFilePorletURL = "/c/portal/layout?p_l_id=" + this._getRequestParameter('p_l_id') +
- "&p_p_id=" + this._getRequestParameter('p_p_id') +
- "&referer=/html/blank.jsp" +
+ var addFilePorletURL = "/c/portal/layout?p_l_id=" + this._getRequestParameter('p_l_id') +
+ "&p_p_id=" + this._getRequestParameter('p_p_id') +
+ "&referer=/html/blank.jsp" +
"&p_p_action=1&p_p_state=maximized&p_p_mode=view&struts_action=/ext/files/upload_multiple&cmd=edit&in_frame=true&parent=" + this.currentFolder.id;
this.addAFileIFrame.src = addFilePorletURL;
this.addFileDialog.show();
@@ -441,7 +446,7 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
if(dojo.isIE)
dojo.global.fileSubmitted = dojo.hitch(this, this._fileSubmitted);
},
-
+
_getRequestParameter: function (name, url)
{
if(!url) {
@@ -456,17 +461,17 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
else
return results[1];
},
-
+
_addFileIFrameLoaded: function () {
-
+
if(!this.addingAFile)
return;
-
+
if(this.firstLoad) {
this.firstLoad = false;
return;
}
-
+
var url = this.addAFileIFrame.contentWindow.location.href;
if(url.indexOf('blank.jsp') >= 0) {
@@ -475,21 +480,21 @@ dojo.declare("dotcms.dijit.FileBrowserDialog", [dijit._Widget, dijit._Templated]
this._loadFolder();
}
},
-
+
/* hack for IE only */
_fileSubmitted: function() {
dojo.global.fileSubmittedWaitToSave = dojo.hitch(this, this._fileSubmittedWaitToSave);
setTimeout('fileSubmittedWaitToSave()', 1000);
},
-
+
_fileSubmittedWaitToSave: function() {
this.addFileDialog.hide();
this.addingAFile = false;
this._loadFolder();
},
-
+
_closeAddFileDialog: function(){
this.addFileDialog.hide();
}
-
+
})

0 comments on commit bf99c14

Please sign in to comment.
Something went wrong with that request. Please try again.