Skip to content

Commit f729e22

Browse files
rasmusjprasmusjp
committed
Update UI to match Umbraco 7.6
1 parent d30d381 commit f729e22

File tree

2 files changed

+182
-174
lines changed

2 files changed

+182
-174
lines changed

‎src/RJP.MultiUrlPicker.Web.UI/MultiUrlPicker.html

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
1-
<div class="umb-contentpicker umb-editor" ng-controller="RJP.MultiUrlPickerController">
2-
<ng-form name="multiUrlPickerForm">
3-
<ul class="unstyled list-icons" ui-sortable="sortableOptions" ng-model="renderModel">
4-
<li ng-repeat="node in renderModel">
5-
<i ng-if="renderModel.length > 1" class="icon icon-navigation handle"></i>
6-
<a href="#" prevent-default ng-click="remove($index)"><i class="icon-delete red"></i></a>
7-
<a href="#" prevent-default ng-click="edit($index)">
8-
<i class="icon icon-edit hover-show"></i>
9-
<i class="{{node.icon}} hover-hide"></i>
10-
{{node.name}}
11-
</a>
12-
</li>
13-
</ul>
1+
<div ng-controller="RJP.MultiUrlPickerController" class="umb-editor umb-contentpicker">
2+
<ng-form name="multiUrlPickerForm">
3+
<div ui-sortable="sortableOptions" ng-model="renderModel">
4+
<umb-node-preview ng-repeat="node in renderModel"
5+
icon="node.icon"
6+
name="node.name"
7+
published="node.published"
8+
description="node.url"
9+
sortable="true"
10+
allow-remove="true"
11+
allow-open="true"
12+
on-remove="remove($index)"
13+
on-open="edit($index)">
14+
</umb-node-preview>
15+
</div>
1416

15-
<ul class="unstyled list-icons" ng-show="!cfg.maxNumberOfItems || renderModel.length < cfg.maxNumberOfItems">
16-
<li>
17-
<i class="icon icon-add blue"></i>
18-
<a href="#" ng-click="openLinkPicker()" prevent-default>
19-
<localize key="general_add">Add</localize>
17+
<a ng-show="!cfg.maxNumberOfItems || renderModel.length < cfg.maxNumberOfItems"
18+
class="umb-node-preview-add"
19+
href=""
20+
ng-click="openLinkPicker()"
21+
prevent-default>
22+
<localize key="general_add">Add</localize>
2023
</a>
21-
</li>
22-
</ul>
2324

24-
<input type="hidden" name="minCount" ng-model="renderModel">
25-
<input type="hidden" name="maxCount" ng-model="renderModel">
25+
<input type="hidden" name="minCount" ng-model="renderModel" />
26+
<input type="hidden" name="maxCount" ng-model="renderModel" />
27+
28+
<div class="help-inline" val-msg-for="minCount" val-toggle-msg="minCount">
29+
You need to add at least {{cfg.minNumberOfItems}} items
30+
</div>
2631

27-
<div class="help-inline" val-msg-for="minCount" val-toggle-msg="minCount">
28-
You need to add at least {{cfg.minNumberOfItems-renderModel.length}} more item(s)
29-
</div>
30-
31-
<div class="help-inline" val-msg-for="maxCount" val-toggle-msg="maxCount">
32-
You can only have {{cfg.maxNumberOfItems}} item(s) selected
33-
</div>
34-
</ng-form>
32+
<div class="help-inline" val-msg-for="maxCount" val-toggle-msg="maxCount">
33+
You can only have {{model.config.maxNumberOfItems}} items selected
34+
</div>
35+
</ng-form>
3536
</div>

‎src/RJP.MultiUrlPicker.Web.UI/MultiUrlPicker.js

Lines changed: 151 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,163 @@
1-
(function(angular, _) {
2-
'use strict';
3-
4-
angular.module("umbraco").controller("RJP.MultiUrlPickerController", function($scope, $q, dialogService, iconHelper, entityResource) {
5-
var documentIds = [];
6-
var mediaIds = [];
7-
8-
$scope.renderModel = [];
9-
$scope.cfg = { maxNumberOfItems: 0, minNumberOfItems: 0 };
10-
$scope.sortableOptions = { handle: '.handle' };
11-
$scope.editedMediaId = -1;
12-
13-
if( $scope.model.value ) {
14-
_.each($scope.model.value, function( item, i ) {
15-
if( item.id ) {
16-
(item.isMedia ? mediaIds : documentIds).push( item.id );
1+
(function (angular, _) {
2+
'use strict';
3+
4+
angular.module("umbraco").controller("RJP.MultiUrlPickerController", function ($scope, $q, dialogService, iconHelper, entityResource) {
5+
var documentIds = [];
6+
var mediaIds = [];
7+
8+
$scope.renderModel = [];
9+
$scope.cfg = { maxNumberOfItems: 0, minNumberOfItems: 0 };
10+
$scope.sortableOptions = {
11+
distance: 10,
12+
tolerance: "pointer",
13+
scroll: true,
14+
zIndex: 6000
15+
};
16+
$scope.editedMediaId = -1;
17+
18+
if ($scope.model.value) {
19+
_.each($scope.model.value, function (item, i) {
20+
if (item.id) {
21+
(item.isMedia ? mediaIds : documentIds).push(item.id);
22+
}
23+
});
1724
}
18-
});
19-
}
20-
21-
var setIcon = function( node ) {
22-
var item = _.find( $scope.renderModel, function( item ) {
23-
return +item.id === node.id;
24-
});
25-
item.icon = iconHelper.convertFromLegacyIcon( node.icon );
26-
};
27-
28-
$q.all([
29-
entityResource.getByIds(documentIds, 'Document'),
30-
entityResource.getByIds(mediaIds, 'Media')
31-
]).then(function (result) {
32-
var entities = result[0].concat(result[1]);
33-
34-
_.each($scope.model.value, function (item) {
35-
if (item.id) {
36-
var entity = _.find(entities, function (e) {
37-
return e.id == item.id;
38-
});
39-
40-
if (entity) {
41-
item.icon = iconHelper.convertFromLegacyIcon(entity.icon);
42-
$scope.renderModel.push(new Link(item));
25+
26+
var entityLoaded = function (node) {
27+
var item = _.find($scope.renderModel, function (item) {
28+
return +item.id === node.id;
29+
});
30+
item.icon = iconHelper.convertFromLegacyIcon(node.icon);
31+
item.published = node.metaData.NodeObjectType !== 'c66ba18e-eaf3-4cff-8a22-41b16d66a972' || node.metaData.IsPublished;
32+
};
33+
34+
$q.all([
35+
entityResource.getByIds(documentIds, 'Document'),
36+
entityResource.getByIds(mediaIds, 'Media')
37+
]).then(function (result) {
38+
var entities = result[0].concat(result[1]);
39+
40+
_.each($scope.model.value, function (item) {
41+
if (item.id) {
42+
var entity = _.find(entities, function (e) {
43+
return e.id == item.id;
44+
});
45+
46+
if (entity) {
47+
item.icon = iconHelper.convertFromLegacyIcon(entity.icon);
48+
$scope.renderModel.push(new Link(item, entity.metaData.NodeObjectType !== 'c66ba18e-eaf3-4cff-8a22-41b16d66a972' || entity.metaData.IsPublished));
49+
}
50+
} else {
51+
$scope.renderModel.push(new Link(item, true));
4352
}
53+
});
54+
55+
$scope.$watch(
56+
function () {
57+
return $scope.renderModel.length;
58+
},
59+
function (newVal) {
60+
if ($scope.renderModel.length) {
61+
$scope.model.value = $scope.renderModel;
62+
} else {
63+
$scope.model.value = null;
64+
}
65+
66+
if ($scope.cfg.minNumberOfItems && +$scope.cfg.minNumberOfItems > $scope.renderModel.length) {
67+
$scope.multiUrlPickerForm.minCount.$setValidity('minCount', false);
68+
} else {
69+
$scope.multiUrlPickerForm.minCount.$setValidity('minCount', true);
70+
}
71+
if ($scope.cfg.maxNumberOfItems && +$scope.cfg.maxNumberOfItems < $scope.renderModel.length) {
72+
$scope.multiUrlPickerForm.maxCount.$setValidity('maxCount', false);
73+
} else {
74+
$scope.multiUrlPickerForm.maxCount.$setValidity('maxCount', true);
75+
}
76+
}
77+
);
78+
});
79+
80+
if ($scope.model.config) {
81+
$scope.cfg = angular.extend($scope.cfg, $scope.model.config);
82+
}
83+
84+
if ($scope.cfg.maxNumberOfItems <= 0) {
85+
delete $scope.cfg.maxNumberOfItems;
86+
}
87+
if ($scope.cfg.minNumberOfItems <= 0) {
88+
$scope.cfg.minNumberOfItems = 0;
89+
}
90+
91+
$scope.openLinkPicker = function () {
92+
dialogService.linkPicker({ callback: $scope.onContentSelected });
93+
};
94+
95+
$scope.edit = function (index) {
96+
var link = $scope.renderModel[index];
97+
98+
// store the current edited media id
99+
if (link.isMedia && link.id !== null) {
100+
$scope.editedMediaId = link.id;
101+
}
102+
103+
dialogService.linkPicker({
104+
currentTarget: {
105+
id: link.isMedia ? null : link.id, // the linkPicker breaks if it get an id for media
106+
index: index,
107+
name: link.name,
108+
url: link.url,
109+
target: link.target,
110+
isMedia: link.isMedia,
111+
},
112+
callback: $scope.onContentSelected
113+
});
114+
};
115+
116+
$scope.remove = function (index) {
117+
$scope.renderModel.splice(index, 1);
118+
$scope.model.value = $scope.renderModel;
119+
};
120+
121+
$scope.$on("formSubmitting", function (ev, args) {
122+
if ($scope.renderModel.length) {
123+
$scope.model.value = $scope.renderModel;
44124
} else {
45-
$scope.renderModel.push(new Link(item));
125+
$scope.model.value = null;
46126
}
47127
});
48128

49-
$scope.$watch(
50-
function () {
51-
return $scope.renderModel.length;
52-
},
53-
function (newVal) {
54-
if ($scope.renderModel.length) {
55-
$scope.model.value = $scope.renderModel;
56-
} else {
57-
$scope.model.value = null;
58-
}
59-
60-
if ($scope.cfg.minNumberOfItems && +$scope.cfg.minNumberOfItems > $scope.renderModel.length) {
61-
$scope.multiUrlPickerForm.minCount.$setValidity('minCount', false);
62-
} else {
63-
$scope.multiUrlPickerForm.minCount.$setValidity('minCount', true);
64-
}
65-
if ($scope.cfg.maxNumberOfItems && +$scope.cfg.maxNumberOfItems < $scope.renderModel.length) {
66-
$scope.multiUrlPickerForm.maxCount.$setValidity('maxCount', false);
67-
} else {
68-
$scope.multiUrlPickerForm.maxCount.$setValidity('maxCount', true);
69-
}
70-
}
71-
);
72-
});
73129

74-
if ( $scope.model.config ) {
75-
$scope.cfg = angular.extend( $scope.cfg, $scope.model.config );
76-
}
77-
78-
if( $scope.cfg.maxNumberOfItems <= 0 ) {
79-
delete $scope.cfg.maxNumberOfItems;
80-
}
81-
if( $scope.cfg.minNumberOfItems <= 0 ) {
82-
$scope.cfg.minNumberOfItems = 0;
83-
}
84-
85-
$scope.openLinkPicker = function() {
86-
dialogService.linkPicker({ callback: $scope.onContentSelected });
87-
};
88-
89-
$scope.edit = function(index) {
90-
var link = $scope.renderModel[index];
91-
92-
// store the current edited media id
93-
if(link.isMedia && link.id !== null) {
94-
$scope.editedMediaId = link.id;
95-
}
96-
97-
dialogService.linkPicker({
98-
currentTarget: {
99-
id: link.isMedia ? null : link.id, // the linkPicker breaks if it get an id for media
100-
index: index,
101-
name: link.name,
102-
url: link.url,
103-
target: link.target,
104-
isMedia: link.isMedia,
105-
},
106-
callback: $scope.onContentSelected
107-
});
108-
};
109-
110-
$scope.remove = function(index) {
111-
$scope.renderModel.splice( index, 1 );
112-
$scope.model.value = $scope.renderModel;
113-
};
114-
115-
$scope.$on("formSubmitting", function(ev, args) {
116-
if( $scope.renderModel.length ) {
117-
$scope.model.value = $scope.renderModel;
118-
} else {
119-
$scope.model.value = null;
120-
}
121-
});
130+
$scope.onContentSelected = function (e) {
131+
var link = new Link(e, true);
122132

133+
if (e.index !== undefined && e.index !== null) {
134+
if (link.isMedia && link.id === null) {
135+
// we can assume the existing media item is changed and no new file has been selected
136+
// so we can restorte the existing id
137+
link.id = $scope.editedMediaId;
138+
}
139+
$scope.renderModel[e.index] = link;
140+
} else {
141+
$scope.renderModel.push(link);
142+
}
123143

124-
$scope.onContentSelected = function(e) {
125-
var link = new Link(e);
144+
if (link.id && link.id > 0) {
145+
entityResource.getById(link.id, link.isMedia ? 'Media' : 'Document').then(entityLoaded);
146+
}
126147

127-
if( e.index !== undefined && e.index !== null ) {
128-
if(link.isMedia && link.id === null) {
129-
// we can assume the existing media item is changed and no new file has been selected
130-
// so we can restorte the existing id
131-
link.id = $scope.editedMediaId;
148+
$scope.model.value = $scope.renderModel;
149+
$scope.editedMediaId = -1;
150+
dialogService.close();
151+
};
152+
153+
function Link(link, published) {
154+
this.id = link.id;
155+
this.name = link.name || link.url;
156+
this.url = link.url;
157+
this.target = link.target;
158+
this.isMedia = link.isMedia;
159+
this.icon = link.icon || 'icon-link';
160+
this.published = published;
132161
}
133-
$scope.renderModel[ e.index ] = link;
134-
} else {
135-
$scope.renderModel.push( link );
136-
}
137-
138-
if( link.id && link.id > 0 ) {
139-
entityResource.getById( link.id, link.isMedia ? 'Media' : 'Document' ).then( setIcon );
140-
}
141-
142-
$scope.model.value = $scope.renderModel;
143-
$scope.editedMediaId = -1;
144-
dialogService.close();
145-
};
146-
147-
function Link(link) {
148-
this.id = link.id;
149-
this.name = link.name || link.url;
150-
this.url = link.url;
151-
this.target = link.target;
152-
this.isMedia = link.isMedia;
153-
this.icon = link.icon || 'icon-link';
154-
}
155-
});
162+
});
156163
})(window.angular, window._);

0 commit comments

Comments
 (0)