yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds dialog, notications and scriptloader docs

Browse Source
This commit is contained in:
Per Ploug Krogslund
2013-07-11 14:01:33 +02:00
parent 5222cfcfe7
commit 18a0ff4fdd
3 changed files with 184 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/Umbraco.Web.UI.Client/src/common/services/dialog.service.js
View File

@@ -23,6 +23,7 @@
* var dialog = dialogService.open({template: 'path/to/page.html', show: true, callback: done});
* functon done(data){
* //The dialog has been submitted
* // data contains whatever the dialog has selected / attached
* }
* </pre>
*/
@@ -211,10 +212,14 @@ angular.module('umbraco.services')
* @param {DomElement} options.container the DOM element to inject the modal into, by default set to body
* @param {Function} options.callback function called when the modal is submitted
* @param {String} options.template the url of the template
* @param {String} options.animation animation csss class, by default set to "fade"
* @param {String} options.modalClass modal css class, by default "umb-modal"
* @param {Bool} options.show show the modal instantly
* @param {Object} options.scope scope to attach the modal to, by default rootScope.new()
* @param {Bool} options.iframe load template in an iframe, only needed for serverside templates
* @param {Int} options.width set a width on the modal, only needed for iframes
* @param {Bool} options.inline strips the modal from any animation and wrappers, used when you want to inject a dialog into an existing container
* @returns {Object} modal object
*/
open: function (options) {
return openDialog(options);
@@ -233,6 +238,18 @@ angular.module('umbraco.services')
removeDialog(dialog);
},
/**
* @ngdoc method
* @name umbraco.services.dialogService#mediaPicker
* @methodOf umbraco.services.dialogService
*
* @description
* Opens a media picker in a modal, the callback returns an array of selected media items
* @param {Object} options mediapicker dialog options object
* @param {$scope} options.scope dialog scope
* @param {Function} options.callback callback function
* @returns {Object} modal object
*/
mediaPicker: function (options) {
return openDialog({
scope: options.scope,
@@ -241,6 +258,19 @@ angular.module('umbraco.services')
show: true
});
},
/**
* @ngdoc method
* @name umbraco.services.dialogService#contentPicker
* @methodOf umbraco.services.dialogService
*
* @description
* Opens a content picker tree in a modal, the callback returns an array of selected documents
* @param {Object} options content picker dialog options object
* @param {$scope} options.scope dialog scope
* @param {Function} options.callback callback function
* @returns {Object} modal object
*/
contentPicker: function (options) {
return openDialog({
scope: options.scope,
@@ -249,6 +279,19 @@ angular.module('umbraco.services')
show: true
});
},
/**
* @ngdoc method
* @name umbraco.services.dialogService#macroPicker
* @methodOf umbraco.services.dialogService
*
* @description
* Opens a mcaro picker in a modal, the callback returns a object representing the macro and it's parameters
* @param {Object} options mediapicker dialog options object
* @param {$scope} options.scope dialog scope
* @param {Function} options.callback callback function
* @returns {Object} modal object
*/
macroPicker: function (options) {
return openDialog({
scope: options.scope,
@@ -257,6 +300,21 @@ angular.module('umbraco.services')
show: true
});
},
/**
* @ngdoc method
* @name umbraco.services.dialogService#propertyDialog
* @methodOf umbraco.services.dialogService
*
* @description
* Opens a dialog with a chosen property editor in, a value can be passed to the modal, and this value is returned in the callback
* @param {Object} options mediapicker dialog options object
* @param {$scope} options.scope dialog scope
* @param {Function} options.callback callback function
* @param {String} editor editor to use to edit a given value and return on callback
* @param {Object} value value sent to the property editor
* @returns {Object} modal object
*/
propertyDialog: function (options) {
return openDialog({
scope: options.scope,
@@ -264,28 +322,6 @@ angular.module('umbraco.services')
template: 'views/common/dialogs/property.html',
show: true
});
},
//deprecated
append: function (options) {
return openDialog(options);
/*
var scope = options.scope || $rootScope.$new(),
templateUrl = options.template;
return $q.when($templateCache.get(templateUrl) || $http.get(templateUrl, {cache: true}).then(function(res) { return res.data; }))
.then(function onSuccess(template) {
// Compile modal content
$timeout(function() {
options.container.html(template);
$compile(options.container)(scope);
});
return template;
});*/
}
};
}]);

104
src/Umbraco.Web.UI.Client/src/common/services/notifications.service.js
View File

@@ -1,3 +1,26 @@
/**
* @ngdoc service
* @name umbraco.services.notificationsService
*
* @requires $rootScope
* @requires $timeout
* @requires angularHelper
*
* @description
* Application-wide service for handling notifications, the umbraco application
* maintains a single collection of notications, which the UI watches for changes.
* By default when a notication is added, it is automaticly removed 7 seconds after
* This can be changed on add()
*
* ##usage
* To use, simply inject the notificationsService into any controller that needs it, and make
* sure the umbraco.services module is accesible - which it should be by default.
*
* <pre>
* notificationsService.success("Document Published", "hooraaaay for you!");
* notificationsService.error("Document Failed", "booooh");
* </pre>
*/
angular.module('umbraco.services')
.factory('notificationsService', function ($rootScope, $timeout, angularHelper) {
@@ -13,40 +36,119 @@ angular.module('umbraco.services')
nArray.splice(index, 1);
});
}, 5000);
}, 7000);
return nArray[index];
}
return {
/**
* @ngdoc method
* @name umbraco.services.notificationsService#success
* @methodOf umbraco.services.notificationsService
*
* @description
* Adds a green success notication to the notications collection
* This should be used when an operations *completes* without errors
*
* @param {String} headline Headline of the notification
* @param {String} message longer text for the notication, trimmed after 200 characters, which can then be exanded
* @returns {Object} notification object
*/
success: function (headline, message) {
angularHelper.safeApply($rootScope, function () {
return add({ headline: headline, message: message, type: 'success', time: new Date() });
});
},
/**
* @ngdoc method
* @name umbraco.services.notificationsService#error
* @methodOf umbraco.services.notificationsService
*
* @description
* Adds a red error notication to the notications collection
* This should be used when an operations *fails* and could not complete
*
* @param {String} headline Headline of the notification
* @param {String} message longer text for the notication, trimmed after 200 characters, which can then be exanded
* @returns {Object} notification object
*/
error: function (headline, message) {
angularHelper.safeApply($rootScope, function() {
return add({ headline: headline, message: message, type: 'error', time: new Date() });
});
},
/**
* @ngdoc method
* @name umbraco.services.notificationsService#warning
* @methodOf umbraco.services.notificationsService
*
* @description
* Adds a yellow warning notication to the notications collection
* This should be used when an operations *completes* but something was not as expected
*
*
* @param {String} headline Headline of the notification
* @param {String} message longer text for the notication, trimmed after 200 characters, which can then be exanded
* @returns {Object} notification object
*/
warning: function (headline, message) {
angularHelper.safeApply($rootScope, function() {
return add({ headline: headline, message: message, type: 'warning', time: new Date() });
});
},
/**
* @ngdoc method
* @name umbraco.services.notificationsService#remove
* @methodOf umbraco.services.notificationsService
*
* @description
* Removes a notification from the notifcations collection at a given index
*
* @param {Int} index index where the notication should be removed from
*/
remove: function (index) {
angularHelper.safeApply($rootScope, function() {
nArray.splice(index, 1);
});
},
/**
* @ngdoc method
* @name umbraco.services.notificationsService#removeAll
* @methodOf umbraco.services.notificationsService
*
* @description
* Removes all notifications from the notifcations collection
*/
removeAll: function () {
angularHelper.safeApply($rootScope, function() {
nArray = [];
});
},
/**
* @ngdoc property
* @name umbraco.services.notificationsService#current
* @propertyOf umbraco.services.notificationsService
*
* @description
* Returns an array of current notifications to display
*
* @returns []
*/
current: nArray,
/**
* @ngdoc method
* @name umbraco.services.notificationsService#getCurrent
* @methodOf umbraco.services.notificationsService
*
* @description
* Method to return all notifications from the notifcations collection
*/
getCurrent: function(){
return nArray;
}

24
src/Umbraco.Web.UI.Client/src/common/services/scriptloader.service.js
View File

@@ -1,4 +1,26 @@
//script loader wrapping around 3rd party loader
/**
* @ngdoc service
* @name umbraco.services.scriptLoader
*
* @requires $q
* @requires angularHelper
*
* @description
* Promise-based utillity service to lazy-load client-side dependencies inside angular controllers.
*
* ##usage
* To use, simply inject the scriptLoader into any controller that needs it, and make
* sure the umbraco.services module is accesible - which it should be by default.
*
* <pre>
* angular.module("umbraco").controller("my.controller". function(scriptLoader){
* scriptLoader.load(["script.js", "styles.css"], $scope).then(function(){
* //this code executes when the dependencies are done loading
* });
* });
*
* </pre>
*/
angular.module('umbraco.services')
.factory('scriptLoader', function ($q, angularHelper) {