Skip to content

Commit

Permalink
Merge pull request agentejo#1346 from Pervanovo/pr-single-asset
Browse files Browse the repository at this point in the history 
Select single asset in image field and asset field
  • Loading branch information
@aheinze
aheinze authored Nov 21, 2021
2 parents f27fe3a + fb849c3 commit a30b7bc
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 105 deletions.
32 changes: 14 additions & 18 deletions modules/Cockpit/assets/cockpit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@

Object.keys(s.paths).forEach(function (path) {

if (options.pattern == '*' || App.Utils.fnmatch(options.pattern, path)) {
if (options.pattern === '*' || App.Utils.fnmatch(options.pattern, path)) {

selected.push(s.paths[path].rel_site_path);
}
Expand All @@ -96,29 +96,33 @@
},

assets: {

select: function (callback, options) {

options = App.$.extend({
selected: [],
typefilter: ''
typefilter: '',
single: false
}, options);

var selected = [], dialog = UIkit.modal.dialog([
var selected = [];
var dialog = UIkit.modal.dialog([
'<div>',
'<div class="uk-modal-header uk-text-large">' + App.i18n.get('Select asset') + '</div>',
'<cp-assets typefilter="' + (options.typefilter || '') + '" modal="true"></cp-assets>',
'<cp-assets path="' + (options.path || '') + '" typefilter="' + (options.typefilter || '') + '" single="' + options.single + '" modal="true"></cp-assets>',
'<div class="uk-modal-footer uk-text-right">',
'<button class="uk-button uk-button-primary uk-margin-right uk-button-large uk-hidden js-select-button">' + App.i18n.get('Select') + ': <span></span> item(s)</button>',
'<button class="uk-button uk-button-primary uk-margin-right uk-button-large uk-hidden js-select-button">' + App.i18n.get('Select') + '<span class="selectcount">: <span></span> item(s)</span></button>',
'<a class="uk-button uk-button-large uk-button-link uk-modal-close">' + App.i18n.get('Close') + '</a>',
'</div>',
'</div>'
].join(''), { modal: false });

dialog.dialog.addClass('uk-modal-dialog-large');

var selectbtn = dialog.dialog.find('.js-select-button'),
selectcount = selectbtn.find('span');
var selectbtn = dialog.dialog.find('.js-select-button');
var selectcount = selectbtn.find('.selectcount');
var count = selectcount.find('span');

selectcount.hide(options.single);

riot.mount(dialog.element[0], '*', options);

Expand All @@ -132,17 +136,15 @@
selected = [];

if (Array.isArray(s) && s.length) {

s.forEach(function (asset) {

//if (options.pattern == '*' || App.Utils.fnmatch(options.pattern, path)) {
selected.push(asset);
//}
});
}

selectbtn[selected.length ? 'removeClass' : 'addClass']('uk-hidden');
selectcount.text(selected.length);
count.text(selected.length);
});

dialog.show();
Expand Down Expand Up @@ -173,26 +175,20 @@
}
};


var _accounts = {}; // cache

Cockpit.account = function (id) {

if (!_accounts[id]) {

_accounts[id] = new Promise(function (resolve, reject) {

App.request('/accounts/find', { options: { filter: { _id: id } } }).then(function (response) {
resolve(response && Array.isArray(response.accounts) && response.accounts[0] ? response.accounts[0] : null);
});
});
}

return _accounts[id];
}
};

App.$.extend(true, App, Cockpit);

window.Cockpit = Cockpit;

})(jQuery);
51 changes: 22 additions & 29 deletions modules/Cockpit/assets/components.js
View file

Large diffs are not rendered by default.

57 changes: 31 additions & 26 deletions modules/Cockpit/assets/components/cp-assets.tag
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@
.uk-breadcrumb { margin-bottom: 0; }
</style>

<div ref="list" show="{ mode=='list' }">
<div ref="list" show="{ mode === 'list' }">

<div ref="uploadprogress" class="uk-margin uk-hidden">
<div class="uk-progress">
<div ref="progressbar" class="uk-progress-bar" style="width: 0%;">&nbsp;</div>
<div ref="progressbar" class="uk-progress-bar" style="width: 0;">&nbsp;</div>
</div>
</div>

<div class="uk-form" if="{ mode=='list' }">
<div class="uk-form" if="{ mode === 'list' }">

<div class="uk-grid">
<div>
<div class="uk-grid uk-grid-small uk-flex-middle">
<div>
<span class="uk-button-group uk-margin-right">
<button class="uk-button uk-button-large {listmode=='list' && 'uk-button-primary'}" type="button" onclick="{ toggleListMode }" aria-label="{ App.i18n.get('Switch to list-mode') }"><i class="uk-icon-list"></i></button>
<button class="uk-button uk-button-large {listmode=='grid' && 'uk-button-primary'}" type="button" onclick="{ toggleListMode }" aria-label="{ App.i18n.get('Switch to tile-mode') }"><i class="uk-icon-th"></i></button>
<button class="uk-button uk-button-large {listmode === 'list' && 'uk-button-primary'}" type="button" onclick="{ toggleListMode }" aria-label="{ App.i18n.get('Switch to list-mode') }"><i class="uk-icon-list"></i></button>
<button class="uk-button uk-button-large {listmode === 'grid' && 'uk-button-primary'}" type="button" onclick="{ toggleListMode }" aria-label="{ App.i18n.get('Switch to tile-mode') }"><i class="uk-icon-th"></i></button>
</span>
</div>
<div show="{!opts.typefilter}">
<div show="{ !opts.typefilter }">
<div class="uk-form-select">

<span class="uk-button uk-button-large { getRefValue('filtertype') && 'uk-button-primary'} uk-text-capitalize"><i class="uk-icon-eye uk-margin-small-right"></i> { getRefValue('filtertype') || App.i18n.get('All') }</span>
Expand Down Expand Up @@ -52,7 +52,7 @@
<div class="uk-flex uk-flex-middle">

<button class="uk-button uk-button-large uk-button-danger" type="button" onclick="{ removeSelected }" show="{ selected.length }">
{ App.i18n.get('Delete') } <span class="uk-badge uk-badge-contrast uk-margin-small-left">{ selected.length }</span>
{ App.i18n.get('Delete') }<span class="uk-badge uk-badge-contrast uk-margin-small-left" if="{ !this.single }"> { selected.length }</span>
</button>

<button class="uk-button uk-button-large uk-button-link" onclick="{addFolder}">{ App.i18n.get('Add folder') }</button>
Expand All @@ -71,11 +71,11 @@
<li>
<a class="uk-form-file">
<i class="uk-icon-file-o uk-icon-justify"></i> { App.i18n.get('File') }
<input class="js-upload-select" aria-label="{ App.i18n.get('Select file') }" type="file" multiple="true">
<input class="js-upload-select" aria-label="{ App.i18n.get('Select file') }" type="file" multiple>
</a>
<a class="uk-form-file">
<i class="uk-icon-folder-o uk-icon-justify"></i> { App.i18n.get('Folder') }
<input class="js-upload-folder" type="file" title="" multiple multiple directory webkitdirectory allowdirs>
<input class="js-upload-folder" type="file" title="" multiple directory webkitdirectory allowdirs>
</a>
</li>
</ul>
Expand Down Expand Up @@ -136,9 +136,9 @@

<strong class="uk-text-small uk-text-muted"><i class="uk-icon-file-o uk-margin-small-right"></i> {count} {App.i18n.get('Assets')}</strong>

<div class="uk-grid uk-grid-match uk-grid-small uk-grid-width-medium-1-5" if="{ listmode=='grid' }">
<div class="uk-grid-margin" each="{ asset,idx in assets }" onclick="{ select }">
<div class="uk-panel uk-panel-box uk-panel-card uk-padding-remove { selected.length && selected.indexOf(asset) != -1 ? 'uk-selected':''}">
<div class="uk-grid uk-grid-match uk-grid-small uk-grid-width-medium-1-5" if="{ listmode === 'grid' }">
<div class="uk-grid-margin" each="{ asset, idx in assets }" onclick="{ select }">
<div class="uk-panel uk-panel-box uk-panel-card uk-padding-remove { selected.length && selected.indexOf(asset) !== -1 ? 'uk-selected':''}">
<div class="uk-overlay uk-display-block uk-position-relative { asset.mime.match(/^image\//) && 'uk-bg-transparent-pattern' }">
<canvas class="uk-responsive-width" width="200" height="150"></canvas>
<div class="uk-position-absolute uk-position-cover uk-flex uk-flex-middle">
Expand All @@ -164,7 +164,7 @@
</div>
</div>

<table class="uk-table uk-table-tabbed" if="{ listmode=='list' }">
<table class="uk-table uk-table-tabbed" if="{ listmode === 'list' }">
<thead>
<tr>
<td width="30"></td>
Expand All @@ -176,7 +176,7 @@
</tr>
</thead>
<tbody>
<tr class="{ selected.length && selected.indexOf(asset) != -1 ? 'uk-selected':''}" each="{ asset,idx in assets }" onclick="{ select }">
<tr class="{ selected.length && selected.indexOf(asset) !== -1 ? 'uk-selected':''}" each="{ asset,idx in assets }" onclick="{ select }">
<td class="uk-text-center">

<span if="{ asset.mime.match(/^image\//) == null }"><i class="uk-text-muted uk-icon-{ parent.getIconCls(asset.path) }"></i></span>
Expand Down Expand Up @@ -245,7 +245,7 @@
</div>
</div>

<div class="uk-form" if="{asset && mode=='edit'}">
<div class="uk-form" if="{asset && mode === 'edit'}">

<h3 class="uk-text-bold">{ App.i18n.get('Edit Asset') }</h3>

Expand Down Expand Up @@ -277,6 +277,7 @@
'document' : /\.(txt|pdf|md)$/i,
'code' : /\.(htm|html|php|css|less|js|json|yaml|xml|htaccess)$/i
};
this.single = opts.single === "true";

this.mode = 'list';
this.listmode = App.session.get('app.assets.listmode', 'list');
Expand Down Expand Up @@ -411,7 +412,7 @@
});

toggleListMode() {
this.listmode = this.listmode=='list' ? 'grid':'list';
this.listmode = this.listmode === 'list' ? 'grid':'list';
App.session.set('app.assets.listmode', this.listmode);
}

Expand Down Expand Up @@ -556,8 +557,12 @@

var idx = this.selected.indexOf(e.item.asset);

if (idx == -1) {
this.selected.push(e.item.asset);
if (idx === -1) {
if (this.single) {
this.selected = [e.item.asset];
} else {
this.selected.push(e.item.asset);
}
} else {
this.selected.splice(idx, 1);
}
Expand Down Expand Up @@ -653,7 +658,7 @@

var folder = e.item ? e.item.folder : {_id:''};

if (this.folder == folder._id) {
if (this.folder === folder._id) {
return;
}

Expand All @@ -664,7 +669,7 @@
var skip = false;

this.foldersPath = this.foldersPath.filter(function(f) {
if (f._id == folder._id) skip = true;
if (f._id === folder._id) skip = true;
return !skip;
});

Expand Down Expand Up @@ -709,17 +714,17 @@
<div class="uk-form" if="{asset}">

<ul class="uk-tab uk-flex-center uk-margin" show="{ App.Utils.count(panels) }">
<li class="{!panel && 'uk-active'}"><a onclick="{selectPanel}">Main</a></li>
<li class="uk-text-capitalize {p.name == panel && 'uk-active'}" each="{p in panels}"><a onclick="{parent.selectPanel}">{p.name}</a></li>
<li class="{!panel && 'uk-active'}"><a onclick="{ selectPanel }">Main</a></li>
<li class="uk-text-capitalize {p.name === panel && 'uk-active'}" each="{p in panels}"><a onclick="{parent.selectPanel}">{p.name}</a></li>
</ul>

<div class="uk-grid" show="{!panel}">
<div class="uk-grid" show="{ !panel }">
<div class="uk-width-2-3">

<div class="uk-panel uk-panel-box uk-panel-card uk-panel-space">
<div class="uk-form-row">
<label class="uk-text-small uk-text-bold">{ App.i18n.get('Title') }</label>
<input class="uk-width-1-1" type="text" bind="asset.title" required>
<input class="uk-width-1-1" type="text" bind="asset.title" required />
</div>

<div class="uk-form-row">
Expand All @@ -730,7 +735,7 @@
<div class="uk-margin-large-top uk-text-center" if="{asset}">
<span class="uk-h1" if="{asset.mime.match(/^image\//) == null }"><i class="uk-icon-{ parent.getIconCls(asset.path) }"></i></span>
<div class="uk-display-inline-block uk-position-relative asset-fp-image" if="{asset.mime.match(/^image\//) }">
<cp-thumbnail src="{ASSETS_URL+asset.path}" width="800"></cp-thumbnail>
<cp-thumbnail src="{ ASSETS_URL + asset.path }" width="800"></cp-thumbnail>
<div class="cp-assets-fp" title="Focal Point" data-uk-tooltip></div>
</div>
<div class="uk-margin-top uk-text-truncate uk-text-small uk-text-muted">
Expand Down Expand Up @@ -810,7 +815,7 @@

for (var tag in riot.tags) {

if (tag.indexOf('assetspanel-')==0) {
if (tag.indexOf('assetspanel-') === 0) {

var f = tag.replace('assetspanel-', '');

Expand Down
31 changes: 9 additions & 22 deletions modules/Cockpit/assets/components/field-asset.tag
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,13 @@

<div ref="uploadprogress" class="uk-margin uk-hidden">
<div class="uk-progress">
<div ref="progressbar" class="uk-progress-bar" style="width: 0%;">&nbsp;</div>
<div ref="progressbar" class="uk-progress-bar" style="width: 0;">&nbsp;</div>
</div>
</div>

<div class="uk-placeholder uk-text-center uk-text-muted" if="{!asset}">

<img class="uk-svg-adjust" riot-src="{ App.base('/assets/app/media/icons/assets.svg') }" width="100" data-uk-svg>

<div class="uk-placeholder uk-text-center uk-text-muted" if="{ !asset }">
<img class="uk-svg-adjust" riot-src="{ App.base('/assets/app/media/icons/assets.svg') }" width="100" data-uk-svg />
<p>{ App.i18n.get('No asset selected') }. <a onclick="{ selectAsset }">{ App.i18n.get('Select one') }</a></p>

</div>

<div class="uk-panel uk-panel-box uk-padding-remove uk-panel-card" if="{asset}">
Expand All @@ -20,19 +17,18 @@
<canvas class="uk-responsive-width" width="200" height="150"></canvas>
<div class="uk-position-absolute uk-position-cover uk-flex uk-flex-middle">
<div class="uk-width-1-1 uk-text-center">

<span if="{ asset.mime.match(/^image\//) == null }"><i class="uk-h1 uk-text-muted uk-icon-{ getIconCls(asset.path) }"></i></span>

<a href="{ASSETS_URL+asset.path}" if="{ asset.mime.match(/^image\//) }" data-uk-lightbox="type:'image'" title="{ asset.width && [asset.width, asset.height].join('x') }">
<cp-thumbnail src="{asset && ASSETS_URL+asset.path}" height="160"></cp-thumbnail>
<cp-thumbnail src="{ asset && ASSETS_URL + asset.path }" height="160"></cp-thumbnail>
</a>
</div>
</div>
</div>

<div class="uk-panel-body">
<div class="uk-margin-small-top uk-text-truncate">
<a href="{ASSETS_URL+asset.path}" target="_blank">{ asset.title }</a>
<a href="{ ASSETS_URL + asset.path }" target="_blank">{ asset.title }</a>
</div>
<div class="uk-text-small uk-text-muted">
<strong>{ asset.mime }</strong>
Expand Down Expand Up @@ -66,7 +62,7 @@

this.$updateValue = function(value, field, force) {

if (force || (JSON.stringify(this.asset) != JSON.stringify(value))) {
if (force || (JSON.stringify(this.asset) !== JSON.stringify(value))) {

if (value && !value._id) {
value = false;
Expand All @@ -79,7 +75,6 @@
}.bind(this);

this.on('mount', function() {

// handle uploads
App.assets.require(['/assets/lib/uikit/js/components/upload.js'], function() {

Expand Down Expand Up @@ -119,17 +114,14 @@
}
});
});
})
});

selectAsset() {

Cockpit.assets.select(function(assets){

Cockpit.assets.select(function (assets) {
if (Array.isArray(assets)) {
$this.$setValue(assets[0]);
}

}, {typefilter: opts.typefilter});
}, { typefilter: opts.typefilter, single: true });
}

reset() {
Expand All @@ -138,7 +130,6 @@
}

edit() {

var dialog = UIkit.modal.dialog([
'<div>',
'<div class="uk-modal-header uk-text-large"><h3>'+App.i18n.get('Edit asset')+'</h3></div>',
Expand All @@ -165,7 +156,6 @@
}

getIconCls(path) {

var name = path.toLowerCase();

if (name.match(typefilters.image)) {
Expand Down Expand Up @@ -196,8 +186,5 @@
return 'paperclip';
}
}


</script>

</field-asset>
Loading

0 comments on commit a30b7bc

Please sign in to comment.