Skip to content

Commit

Permalink
Fix #222: Enhance to include dynamically replaceable thumbnail tags
Browse files Browse the repository at this point in the history
  • Loading branch information
kartik-v committed Mar 25, 2015
1 parent b75eeb6 commit b9b1924
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 20 deletions.
3 changes: 2 additions & 1 deletion CHANGE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
version 4.1.8
=============
**Date**: 23-Mar-2015
**Date**: 25-Mar-2015

1. (bug #171): Fix typo for files validation.
2. (enh #167, #173): New `deleteExtraData` property for ajax deletions.
Expand Down Expand Up @@ -50,6 +50,7 @@ version 4.1.8
27. (enh #216): Add Hungarian Translations.
28. (enh #217): Ensure `filebatchselected` event is triggered after FileReader completes reading files selected.
29. (enh #218): Do not clear preview for ajaxuploads until remove button clicked.
30. (enh #222): Enhance to include dynamically replaceable thumbnail tags. Two new properties `previewThumbTags` and `initialPreviewThumbTags` will be available for configuration.

version 4.1.7
=============
Expand Down
44 changes: 44 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,50 @@ initialPreviewConfig: [
### initialPreviewShowDelete
_bool_, whether the delete button will be displayed for each thumbnail that has been created with `initialPreview`.

### previewThumbTags
_array_, this will be a list of tags used in thumbnail templates that will be replaced dynamically within the thumbnail markup, when the thumbnail is rendered. For example:

```js
// change thumbnail footer template
layoutTemplates.footer = '<div class="file-thumbnail-footer">\n' +
' <div class="file-caption-name">{caption}</div>\n' +
' {CUSTOM_TAG_NEW}\n' +
' {CUSTOM_TAG_INIT}\n' +
' {actions}\n' +
'</div>';

// set preview template tags
previewThumbTags = {
'{CUSTOM_TAG_NEW}': '<span class="custom-css">CUSTOM MARKUP</span>',
'{CUSTOM_TAG_INIT}': '&nbsp;'
};
```

### initialPreviewThumbTags
_array_, this is an extension of `previewThumbTags` specifically for initial preview content - but will be configured as an array of objects corresponding to each initial preview thumbnail. The initial preview thumbnails set via `initialPreview` will read this configuration for replacing tags. Extending example above:


```js
// change thumbnail footer template
layoutTemplates.footer = '<div class="file-thumbnail-footer">\n' +
' <div class="file-caption-name">{caption}</div>\n' +
' {CUSTOM_TAG_NEW}\n' +
' {CUSTOM_TAG_INIT}\n' +
' {actions}\n' +
'</div>';

// setup initial preview with data keys
initialPreview: [
"<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>",
"<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>",
],

// set initial preview template tags
initialPreviewThumbTags = {
'{CUSTOM_TAG_NEW}': '&nbsp;',
'{CUSTOM_TAG_INIT}': '<span class="custom-css">CUSTOM MARKUP</span>'
};
```

### deleteExtraData
_object | function_ the extra data that will be passed as data to the initial preview delete url/AJAX server call via POST. This will be overridden by the `initialPreviewConfig['extra']` property. This can be setup either as an object (associative array of keys and values) or as a function callback. As an object, it can be set for example as:
Expand Down
52 changes: 35 additions & 17 deletions js/fileinput.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
previewCache.data[id] = {
content: content,
config: config,
tags: obj.initialPreviewThumbTags,
delimiter: obj.initialPreviewDelimiter,
template: obj.previewGenericTemplate,
msg: obj.msgSelected,
Expand All @@ -60,17 +61,21 @@
},
get: function (id, i, isDisabled) {
var ind = 'init_' + i, data = previewCache.data[id],
previewId = data.initId + '-' + ind;
previewId = data.initId + '-' + ind, out;
isDisabled = isDisabled === undefined ? true : isDisabled;
if (data.content[i] === undefined) {
return '';
}
return data.template
out = data.template
.repl('{previewId}', previewId)
.repl('{frameClass}', ' file-preview-initial')
.repl('{fileindex}', ind)
.repl('{content}', data.content[i])
.repl('{footer}', previewCache.footer(id, i, isDisabled));
if (data.tags.length && data.tags[i]) {
out = replaceTags(out, data.tags[i]);
}
return out;
},
add: function (id, content, config, append) {
var data = $.extend(true, {}, previewCache.data[id]), index;
Expand All @@ -88,7 +93,7 @@
previewCache.data[id] = data;
return index;
},
set: function (id, content, config, append) {
set: function (id, content, config, tags, append) {
var data = $.extend(true, {}, previewCache.data[id]), i;
if (!isArray(content)) {
content = content.split(data.delimiter);
Expand All @@ -100,9 +105,13 @@
for (i = 0; i < config.length; i++) {
data.config.push(config[i]);
}
for (i = 0; i < tags.length; i++) {
data.tags.push(tags[i]);
}
} else {
data.content = content;
data.config = config;
data.tags = tags;
}
previewCache.data[id] = data;
},
Expand Down Expand Up @@ -403,6 +412,7 @@
},
replaceTags = function (str, tags) {
var out = str;
tags = tags || {};
$.each(tags, function (key, value) {
if (typeof value === "function") {
value = value();
Expand Down Expand Up @@ -675,7 +685,7 @@
outData = self.getOutData();
self.raise('filebatchpreupload', [outData]);
self.fileBatchCompleted = false;
self.uploadCache = {content: [], config: [], append: true};
self.uploadCache = {content: [], config: [], tags: [], append: true};
for (i = 0; i < len; i += 1) {
if (self.filestack[i] !== undefined) {
self.uploadSingle(i, self.filestack, true);
Expand Down Expand Up @@ -827,20 +837,23 @@
});
},
renderFileFooter: function (caption, width) {
var self = this, config = self.fileActionSettings, footer,
var self = this, config = self.fileActionSettings, footer, out,
template = self.getLayoutTemplate('footer');
if (self.isUploadable) {
footer = template.repl('{actions}', self.renderFileActions(true, true, false, false, false, false));
return footer.repl('{caption}', caption)
out = footer.repl('{caption}', caption)
.repl('{width}', width)
.repl('{indicator}', config.indicatorNew)
.repl('{indicatorTitle}', config.indicatorNewTitle);
} else {
out = template.repl('{actions}', '')
.repl('{caption}', caption)
.repl('{width}', width)
.repl('{indicator}', '')
.repl('{indicatorTitle}', '');
}
return template.repl('{actions}', '')
.repl('{caption}', caption)
.repl('{width}', width)
.repl('{indicator}', '')
.repl('{indicatorTitle}', '');
out = replaceTags(out, self.previewThumbTags);
return out;
},
renderFileActions: function (showUpload, showDelete, disabled, url, key, index) {
if (!showUpload && !showDelete) {
Expand Down Expand Up @@ -992,7 +1005,7 @@
},
resetUpload: function () {
var self = this;
self.uploadCache = {content: [], config: [], append: true};
self.uploadCache = {content: [], config: [], tags: [], append: true};
self.uploadCount = 0;
self.uploadPercent = 0;
self.$btnUpload.removeAttr('disabled');
Expand Down Expand Up @@ -1151,18 +1164,19 @@
self.ajaxRequests.push($.ajax(settings));
},
initUploadSuccess: function (out, $thumb, allFiles) {
var self = this, append, data, index, $newThumb, content, config;
var self = this, append, data, index, $newThumb, content, config, tags;
if (typeof out !== 'object' || $.isEmptyObject(out)) {
return;
}
if (out.initialPreview !== undefined && out.initialPreview.length > 0) {
self.hasInitData = true;
content = out.initialPreview || [];
config = out.initialPreviewConfig || [];
tags = out.initialPreviewThumbTags || [];
append = out.append === undefined || out.append ? true : false;
self.overwriteInitial = false;
if ($thumb !== undefined && !!allFiles) {
index = previewCache.add(self.id, content, config[0], append);
index = previewCache.add(self.id, content, config[0], tags[0], append);
data = previewCache.get(self.id, index, false);
$newThumb = $(data).hide();
$thumb.after($newThumb).fadeOut('slow', function () {
Expand All @@ -1173,9 +1187,10 @@
if (allFiles) {
self.uploadCache.content.push(content[0]);
self.uploadCache.config.push(config[0]);
self.uploadCache.config.push(tags[0]);
self.uploadCache.append = append;
} else {
previewCache.set(self.id, content, config, append);
previewCache.set(self.id, content, config, tags, append);
self.initPreview();
self.initPreviewDeletes();
}
Expand All @@ -1199,7 +1214,8 @@
if ($thumbs.length > 0 && self.fileBatchCompleted) {
return;
}
previewCache.set(self.id, self.uploadCache.content, self.uploadCache.config, self.uploadCache.append);
previewCache.set(self.id, self.uploadCache.content, self.uploadCache.config, self.uploadCache.tags,
self.uploadCache.append);
if (self.hasInitData) {
self.initPreview();
self.initPreviewDeletes();
Expand Down Expand Up @@ -1633,7 +1649,7 @@
if (isEmpty($el.attr('multiple'))) {
numFiles = 1;
}
if (i >= numFiles) {
if (i >= numFiles) {
if (self.isUploadable && self.filestack.length > 0) {
self.raise('filebatchselected', [self.getFileStack()]);
} else {
Expand Down Expand Up @@ -1999,6 +2015,8 @@
initialPreview: [],
initialPreviewDelimiter: '*$$*',
initialPreviewConfig: [],
initialPreviewThumbTags: [],
previewThumbTags: {},
initialPreviewShowDelete: true,
deleteUrl: '',
deleteExtraData: {},
Expand Down
4 changes: 2 additions & 2 deletions js/fileinput.min.js

Large diffs are not rendered by default.

0 comments on commit b9b1924

Please sign in to comment.