Skip to content

Commit a30b7bc

Browse files
aheinzeaheinze
authored
Merge pull request #1346 from Pervanovo/pr-single-asset
Select single asset in image field and asset field
2 parents f27fe3a + fb849c3 commit a30b7bc

File tree

6 files changed

+80
-105
lines changed

6 files changed

+80
-105
lines changed

‎modules/Cockpit/assets/cockpit.js‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080

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

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

8585
selected.push(s.paths[path].rel_site_path);
8686
}
@@ -96,29 +96,33 @@
9696
},
9797

9898
assets: {
99-
10099
select: function (callback, options) {
101100

102101
options = App.$.extend({
103102
selected: [],
104-
typefilter: ''
103+
typefilter: '',
104+
single: false
105105
}, options);
106106

107-
var selected = [], dialog = UIkit.modal.dialog([
107+
var selected = [];
108+
var dialog = UIkit.modal.dialog([
108109
'<div>',
109110
'<div class="uk-modal-header uk-text-large">' + App.i18n.get('Select asset') + '</div>',
110-
'<cp-assets typefilter="' + (options.typefilter || '') + '" modal="true"></cp-assets>',
111+
'<cp-assets path="' + (options.path || '') + '" typefilter="' + (options.typefilter || '') + '" single="' + options.single + '" modal="true"></cp-assets>',
111112
'<div class="uk-modal-footer uk-text-right">',
112-
'<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>',
113+
'<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>',
113114
'<a class="uk-button uk-button-large uk-button-link uk-modal-close">' + App.i18n.get('Close') + '</a>',
114115
'</div>',
115116
'</div>'
116117
].join(''), { modal: false });
117118

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

120-
var selectbtn = dialog.dialog.find('.js-select-button'),
121-
selectcount = selectbtn.find('span');
121+
var selectbtn = dialog.dialog.find('.js-select-button');
122+
var selectcount = selectbtn.find('.selectcount');
123+
var count = selectcount.find('span');
124+
125+
selectcount.hide(options.single);
122126

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

@@ -132,17 +136,15 @@
132136
selected = [];
133137

134138
if (Array.isArray(s) && s.length) {
135-
136139
s.forEach(function (asset) {
137-
138140
//if (options.pattern == '*' || App.Utils.fnmatch(options.pattern, path)) {
139141
selected.push(asset);
140142
//}
141143
});
142144
}
143145

144146
selectbtn[selected.length ? 'removeClass' : 'addClass']('uk-hidden');
145-
selectcount.text(selected.length);
147+
count.text(selected.length);
146148
});
147149

148150
dialog.show();
@@ -173,26 +175,20 @@
173175
}
174176
};
175177

176-
177178
var _accounts = {}; // cache
178179

179180
Cockpit.account = function (id) {
180-
181181
if (!_accounts[id]) {
182-
183182
_accounts[id] = new Promise(function (resolve, reject) {
184-
185183
App.request('/accounts/find', { options: { filter: { _id: id } } }).then(function (response) {
186184
resolve(response && Array.isArray(response.accounts) && response.accounts[0] ? response.accounts[0] : null);
187185
});
188186
});
189187
}
190-
191188
return _accounts[id];
192-
}
189+
};
193190

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

196193
window.Cockpit = Cockpit;
197-
198194
})(jQuery);

‎modules/Cockpit/assets/components.js‎

Lines changed: 22 additions & 29 deletions
Large diffs are not rendered by default.

‎modules/Cockpit/assets/components/cp-assets.tag‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,26 @@
44
.uk-breadcrumb { margin-bottom: 0; }
55
</style>
66

7-
<div ref="list" show="{ mode=='list' }">
7+
<div ref="list" show="{ mode === 'list' }">
88

99
<div ref="uploadprogress" class="uk-margin uk-hidden">
1010
<div class="uk-progress">
11-
<div ref="progressbar" class="uk-progress-bar" style="width: 0%;">&nbsp;</div>
11+
<div ref="progressbar" class="uk-progress-bar" style="width: 0;">&nbsp;</div>
1212
</div>
1313
</div>
1414

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

1717
<div class="uk-grid">
1818
<div>
1919
<div class="uk-grid uk-grid-small uk-flex-middle">
2020
<div>
2121
<span class="uk-button-group uk-margin-right">
22-
<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>
23-
<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>
22+
<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>
23+
<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>
2424
</span>
2525
</div>
26-
<div show="{!opts.typefilter}">
26+
<div show="{ !opts.typefilter }">
2727
<div class="uk-form-select">
2828

2929
<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>
@@ -52,7 +52,7 @@
5252
<div class="uk-flex uk-flex-middle">
5353

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

5858
<button class="uk-button uk-button-large uk-button-link" onclick="{addFolder}">{ App.i18n.get('Add folder') }</button>
@@ -71,11 +71,11 @@
7171
<li>
7272
<a class="uk-form-file">
7373
<i class="uk-icon-file-o uk-icon-justify"></i> { App.i18n.get('File') }
74-
<input class="js-upload-select" aria-label="{ App.i18n.get('Select file') }" type="file" multiple="true">
74+
<input class="js-upload-select" aria-label="{ App.i18n.get('Select file') }" type="file" multiple>
7575
</a>
7676
<a class="uk-form-file">
7777
<i class="uk-icon-folder-o uk-icon-justify"></i> { App.i18n.get('Folder') }
78-
<input class="js-upload-folder" type="file" title="" multiple multiple directory webkitdirectory allowdirs>
78+
<input class="js-upload-folder" type="file" title="" multiple directory webkitdirectory allowdirs>
7979
</a>
8080
</li>
8181
</ul>
@@ -136,9 +136,9 @@
136136

137137
<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>
138138

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

167-
<table class="uk-table uk-table-tabbed" if="{ listmode=='list' }">
167+
<table class="uk-table uk-table-tabbed" if="{ listmode === 'list' }">
168168
<thead>
169169
<tr>
170170
<td width="30"></td>
@@ -176,7 +176,7 @@
176176
</tr>
177177
</thead>
178178
<tbody>
179-
<tr class="{ selected.length && selected.indexOf(asset) != -1 ? 'uk-selected':''}" each="{ asset,idx in assets }" onclick="{ select }">
179+
<tr class="{ selected.length && selected.indexOf(asset) !== -1 ? 'uk-selected':''}" each="{ asset,idx in assets }" onclick="{ select }">
180180
<td class="uk-text-center">
181181

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

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

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

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

281282
this.mode = 'list';
282283
this.listmode = App.session.get('app.assets.listmode', 'list');
@@ -411,7 +412,7 @@
411412
});
412413

413414
toggleListMode() {
414-
this.listmode = this.listmode=='list' ? 'grid':'list';
415+
this.listmode = this.listmode === 'list' ? 'grid':'list';
415416
App.session.set('app.assets.listmode', this.listmode);
416417
}
417418

@@ -556,8 +557,12 @@
556557

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

559-
if (idx == -1) {
560-
this.selected.push(e.item.asset);
560+
if (idx === -1) {
561+
if (this.single) {
562+
this.selected = [e.item.asset];
563+
} else {
564+
this.selected.push(e.item.asset);
565+
}
561566
} else {
562567
this.selected.splice(idx, 1);
563568
}
@@ -653,7 +658,7 @@
653658

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

656-
if (this.folder == folder._id) {
661+
if (this.folder === folder._id) {
657662
return;
658663
}
659664

@@ -664,7 +669,7 @@
664669
var skip = false;
665670

666671
this.foldersPath = this.foldersPath.filter(function(f) {
667-
if (f._id == folder._id) skip = true;
672+
if (f._id === folder._id) skip = true;
668673
return !skip;
669674
});
670675

@@ -709,17 +714,17 @@
709714
<div class="uk-form" if="{asset}">
710715

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

716-
<div class="uk-grid" show="{!panel}">
721+
<div class="uk-grid" show="{ !panel }">
717722
<div class="uk-width-2-3">
718723

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

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

811816
for (var tag in riot.tags) {
812817

813-
if (tag.indexOf('assetspanel-')==0) {
818+
if (tag.indexOf('assetspanel-') === 0) {
814819

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

‎modules/Cockpit/assets/components/field-asset.tag‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@
22

33
<div ref="uploadprogress" class="uk-margin uk-hidden">
44
<div class="uk-progress">
5-
<div ref="progressbar" class="uk-progress-bar" style="width: 0%;">&nbsp;</div>
5+
<div ref="progressbar" class="uk-progress-bar" style="width: 0;">&nbsp;</div>
66
</div>
77
</div>
88

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

1714
<div class="uk-panel uk-panel-box uk-padding-remove uk-panel-card" if="{asset}">
@@ -20,19 +17,18 @@
2017
<canvas class="uk-responsive-width" width="200" height="150"></canvas>
2118
<div class="uk-position-absolute uk-position-cover uk-flex uk-flex-middle">
2219
<div class="uk-width-1-1 uk-text-center">
23-
2420
<span if="{ asset.mime.match(/^image\//) == null }"><i class="uk-h1 uk-text-muted uk-icon-{ getIconCls(asset.path) }"></i></span>
2521

2622
<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') }">
27-
<cp-thumbnail src="{asset && ASSETS_URL+asset.path}" height="160"></cp-thumbnail>
23+
<cp-thumbnail src="{ asset && ASSETS_URL + asset.path }" height="160"></cp-thumbnail>
2824
</a>
2925
</div>
3026
</div>
3127
</div>
3228

3329
<div class="uk-panel-body">
3430
<div class="uk-margin-small-top uk-text-truncate">
35-
<a href="{ASSETS_URL+asset.path}" target="_blank">{ asset.title }</a>
31+
<a href="{ ASSETS_URL + asset.path }" target="_blank">{ asset.title }</a>
3632
</div>
3733
<div class="uk-text-small uk-text-muted">
3834
<strong>{ asset.mime }</strong>
@@ -66,7 +62,7 @@
6662

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

69-
if (force || (JSON.stringify(this.asset) != JSON.stringify(value))) {
65+
if (force || (JSON.stringify(this.asset) !== JSON.stringify(value))) {
7066

7167
if (value && !value._id) {
7268
value = false;
@@ -79,7 +75,6 @@
7975
}.bind(this);
8076

8177
this.on('mount', function() {
82-
8378
// handle uploads
8479
App.assets.require(['/assets/lib/uikit/js/components/upload.js'], function() {
8580

@@ -119,17 +114,14 @@
119114
}
120115
});
121116
});
122-
})
117+
});
123118

124119
selectAsset() {
125-
126-
Cockpit.assets.select(function(assets){
127-
120+
Cockpit.assets.select(function (assets) {
128121
if (Array.isArray(assets)) {
129122
$this.$setValue(assets[0]);
130123
}
131-
132-
}, {typefilter: opts.typefilter});
124+
}, { typefilter: opts.typefilter, single: true });
133125
}
134126

135127
reset() {
@@ -138,7 +130,6 @@
138130
}
139131

140132
edit() {
141-
142133
var dialog = UIkit.modal.dialog([
143134
'<div>',
144135
'<div class="uk-modal-header uk-text-large"><h3>'+App.i18n.get('Edit asset')+'</h3></div>',
@@ -165,7 +156,6 @@
165156
}
166157

167158
getIconCls(path) {
168-
169159
var name = path.toLowerCase();
170160

171161
if (name.match(typefilters.image)) {
@@ -196,8 +186,5 @@
196186
return 'paperclip';
197187
}
198188
}
199-
200-
201189
</script>
202-
203190
</field-asset>

0 commit comments

Comments
 (0)