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

replaces scriptLoader references with assetsService

Browse Source
This commit is contained in:
Per Ploug Krogslund
2013-08-05 13:04:24 +02:00
parent 31aa7a4ff9
commit 319da4816a
15 changed files with 243 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Umbraco.Web.UI.Client/docs/tutorials/CreatingAPropertyEditor.ngdoc
View File

@@ -104,12 +104,12 @@ Then open the `markdowneditor.controller.js` file and edit it so it looks like t
angular.module("umbraco")
.controller("My.MarkdownEditorController",
//inject umbracos scriptLoader
function ($scope,scriptLoader) {
//inject umbracos assetsService
function ($scope,assetsService) {
//tell the scriptloader to load the markdown.editor libs from the markdown editors
//tell the assetsService to load the markdown.editor libs from the markdown editors
//plugin folder
scriptLoader
assetsService
.load([
"/app_plugins/markdowneditor/lib/markdown.converter.js",
"/app_plugins/markdowneditor/lib/markdown.sanitizer.js",
@@ -121,7 +121,7 @@ Then open the `markdowneditor.controller.js` file and edit it so it looks like t
});
//load the seperat css for the editor to avoid it blocking our js loading
scriptLoader.load(["/app_plugins/markdowneditor/lib/markdown.css"]);
assetsService.loadCss("/app_plugins/markdowneditor/lib/markdown.css");
});
This loads in our external dependency, but only when its needed by the editor.

11
src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
View File

@@ -15,7 +15,8 @@ angular.module("umbraco.directives")
section: '@',
showoptions: '@',
showheader: '@',
cachekey: '@'
cachekey: '@',
eventhandler: '='
},
compile: function (element, attrs) {
@@ -33,7 +34,7 @@ angular.module("umbraco.directives")
'</div>';
}
template += '<ul>' +
'<umb-tree-item ng-repeat="child in tree.root.children" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
'<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
'</ul>' +
'</li>' +
'</ul>';
@@ -55,7 +56,11 @@ angular.module("umbraco.directives")
/** Helper function to emit tree events */
function emitEvent(eventName, args) {
$rootScope.$broadcast(eventName, args);
if (scope.eventhandler) {
$(scope.eventhandler).trigger(eventName, args);
}
// $rootScope.$broadcast(eventName, args);
}
/** Method to load in the tree data */

11
src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
View File

@@ -26,7 +26,7 @@ angular.module("umbraco.directives")
scope: {
section: '@',
cachekey: '@',
callback: '=',
eventhandler: '=',
node:'='
},
@@ -46,9 +46,12 @@ angular.module("umbraco.directives")
var enableDeleteAnimations = true;
/** Helper function to emit tree events */
function emitEvent(eventName, args) {
$rootScope.$broadcast(eventName, args);
if(scope.eventhandler){
$(scope.eventhandler).trigger(eventName,args);
}
//$rootScope.$broadcast(eventName, args);
}
/**
@@ -127,7 +130,7 @@ angular.module("umbraco.directives")
return { 'padding-left': (node.level * 20) + "px" };
};
var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" callback="callback" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" eventhandler="eventhandler" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
var newElement = angular.element(template);
$compile(newElement)(scope);
element.append(newElement);

171
src/Umbraco.Web.UI.Client/src/common/services/assets.service.js Normal file
View File

@@ -0,0 +1,171 @@
/**
* @ngdoc service
* @name umbraco.services.assetsService
*
* @requires $q
* @requires angularHelper
*
* @description
* Promise-based utillity service to lazy-load client-side dependencies inside angular controllers.
*
* ##usage
* To use, simply inject the assetsService 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(assetsService){
* assetsService.load(["script.js", "styles.css"], $scope).then(function(){
* //this code executes when the dependencies are done loading
* });
* });
* </pre>
*
* You can also load individual files, which gives you greater control over what attibutes are passed to the file, as well as timeout
*
* <pre>
* angular.module("umbraco").controller("my.controller". function(assetsService){
* assetsService.loadJs("script.js", $scope, {charset: 'utf-8'}, 10000 }).then(function(){
* //this code executes when the script is done loading
* });
* });
* </pre>
*
* For these cases, there are 2 individual methods, one for javascript, and one for stylesheets:
*
* <pre>
* angular.module("umbraco").controller("my.controller". function(assetsService){
* assetsService.loadCss("stye.css", $scope, {media: 'print'}, 10000 }).then(function(){
* //loadcss cannot determine when the css is done loading, so this will trigger instantly
* });
* });
* </pre>
*/
angular.module('umbraco.services')
.factory('assetsService', function ($q, $log, angularHelper) {
return {
/**
* @ngdoc method
* @name umbraco.services.assetsService#loadCss
* @methodOf umbraco.services.assetsService
*
* @description
* Injects a file as a stylesheet into the document head
*
* @param {String} path path to the css file to load
* @param {Scope} scope optional scope to pass into the loader
* @param {Object} keyvalue collection of attributes to pass to the stylesheet element
* @param {Number} timeout in milliseconds
* @returns {Promise} Promise object which resolves when the file has loaded
*/
loadCss : function(path, scope, attributes, timeout){
var deferred = $q.defer();
var t = timeout || 5000;
var a = attributes || undefined;
yepnope.injectCss(path, function () {
if (!scope) {
deferred.resolve(true);
}else{
angularHelper.safeApply(scope, function () {
deferred.resolve(true);
});
}
},a,t);
return deferred.promise;
},
/**
* @ngdoc method
* @name umbraco.services.assetsService#loadJs
* @methodOf umbraco.services.assetsService
*
* @description
* Injects a file as a javascript into the document
*
* @param {String} path path to the js file to load
* @param {Scope} scope optional scope to pass into the loader
* @param {Object} keyvalue collection of attributes to pass to the script element
* @param {Number} timeout in milliseconds
* @returns {Promise} Promise object which resolves when the file has loaded
*/
loadJs : function(path, scope, attributes, timeout){
var deferred = $q.defer();
var t = timeout || 5000;
var a = attributes || undefined;
yepnope.injectJs(path, function () {
if (!scope) {
deferred.resolve(true);
}else{
angularHelper.safeApply(scope, function () {
deferred.resolve(true);
});
}
},a,t);
return deferred.promise;
},
/**
* @ngdoc method
* @name umbraco.services.assetsService#load
* @methodOf umbraco.services.assetsService
*
* @description
* Injects a collection of files, this can be a mixed collection of css and js files, the loader will determine how to load them
*
* **Warning:** if the collection of files contains a .css file, you will in some cases not receive a resolved promise, it is therefore prefered to use the individual loadCss and loadJs methods
*
* @param {Array} pathArray string array of paths to the files to load
* @param {Scope} scope optional scope to pass into the loader
* @returns {Promise} Promise object which resolves when all the files has loaded
*/
load: function (pathArray, scope) {
var deferred = $q.defer();
var nonEmpty = _.reject(pathArray, function(item) {
return item === undefined || item === "";
});
//don't load anything if there's nothing to load
if (nonEmpty.length > 0) {
yepnope({
load: pathArray,
complete: function() {
//if a scope is supplied then we need to make a digest here because
// deferred only executes in a digest. This might be required if we
// are doing a load script after an http request or some other async call.
if (!scope) {
deferred.resolve(true);
}
else {
angularHelper.safeApply(scope, function () {
deferred.resolve(true);
});
}
}
});
}
else {
if (!scope) {
deferred.resolve(true);
}
else {
angularHelper.safeApply(scope, function () {
deferred.resolve(true);
});
}
}
return deferred.promise;
}
};
});

4
src/Umbraco.Web.UI.Client/src/common/services/util.service.js
View File

@@ -8,13 +8,13 @@
* @description
* Used to lazy load in any JS dependencies that need to be manually loaded in
*/
function legacyJsLoader(scriptLoader, umbRequestHelper) {
function legacyJsLoader(assetsService, umbRequestHelper) {
return {
/** Called to load in the legacy tree js which is required on startup if a user is logged in or
after login, but cannot be called until they are authenticated which is why it needs to be lazy loaded. */
loadLegacyTreeJs: function(scope) {
return scriptLoader.load([umbRequestHelper.getApiUrl("legacyTreeJs", "", "")], scope);
return assetsService.loadJs(umbRequestHelper.getApiUrl("legacyTreeJs", "", ""), scope);
}
};
}

16
src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor/markdowneditor.controller.js
View File

@@ -1,23 +1,23 @@
angular.module("umbraco")
.controller("My.MarkdownEditorController",
//inject umbracos scriptLoader
function ($scope,scriptLoader) {
//inject umbracos assetsServce
function ($scope,assetsService) {
//tell the scriptloader to load the markdown.editor libs from the markdown editors
//tell the assets service to load the markdown.editor libs from the markdown editors
//plugin folder
scriptLoader
assetsService
.load([
"/app_plugins/markdowneditor/lib/markdown.converter.js",
"/app_plugins/markdowneditor/lib/markdown.sanitizer.js",
"/app_plugins/markdowneditor/lib/markdown.editor.js"
])
.then(function () {
//this function will execute when all dependencies have loaded
var converter2 = new Markdown.Converter();
var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
//this function will execute when all dependencies have loaded
var converter2 = new Markdown.Converter();
var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
editor2.run();
});
//load the seperat css for the editor to avoid it blocking our js loading TEMP HACK
scriptLoader.load(["/app_plugins/markdowneditor/lib/markdown.css"]);
assetsService.loadCss("/app_plugins/markdowneditor/lib/markdown.css");
});

5
src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js
View File

@@ -1,10 +1,9 @@
//used for the media picker dialog
angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController",
function ($scope) {
$scope.treeCallback = $({});
$scope.dialogTreeEventHandler = $({});
//$scope.treeCallback.bind("treeNodeSelect", function(event, args){
$scope.$on("treeNodeSelect", function (ev, args) {
$scope.dialogTreeEventHandler.bind("treeNodeSelect", function(ev, args){
args.event.preventDefault();
args.event.stopPropagation();

4
src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.html
View File

@@ -11,10 +11,10 @@
<div class="tab-content umb-control-group">
<umb-tree
section="content"
cachekey="pickerDialog"
cachekey="contentpickerDialog"
showheader="false"
showoptions="false"
callback="treeCallback">
eventhandler="dialogTreeEventHandler">
</umb-tree>
</div>
</div>

14
src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
View File

@@ -16,6 +16,9 @@ function NavigationController($scope,$rootScope, $location, $log, navigationServ
// when we create a dialog we pass in this scope to be used for the dialog's scope instead of creating a new one.
$scope.nav = navigationService;
//the tree event handler i used to subscribe to the main tree click events
$scope.treeEventHandler = $({});
$scope.selectedId = navigationService.currentId;
$scope.sections = navigationService.sections;
@@ -31,18 +34,21 @@ function NavigationController($scope,$rootScope, $location, $log, navigationServ
angularHelper.safeApply($scope);
}
});
//this reacts to the options item in the tree
$scope.$on("treeOptionsClick", function (ev, args) {
$scope.treeEventHandler.bind("treeOptionsClick", function (ev, args) {
ev.stopPropagation();
ev.preventDefault();
$scope.currentNode = args.node;
args.scope = $scope;
navigationService.showMenu(ev, args);
});
//this reacts to tree items themselves being clicked
//the tree directive should not contain any handling, simply just bubble events
$scope.$on("treeNodeSelect", function (ev, args) {
$scope.treeEventHandler.bind("treeNodeSelect", function (ev, args) {
var n = args.node;
//here we need to check for some legacy tree code

2
src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
View File

@@ -65,7 +65,7 @@
<!-- the tree -->
<div id="tree" class="span5 umb-scrollable umb-panel" auto-scale="0" ng-animate="'slide'">
<umb-tree section="{{nav.ui.currentSection}}" ></umb-tree>
<umb-tree eventhandler="treeEventHandler" section="{{nav.ui.currentSection}}" ></umb-tree>
</div>
<!-- The context menu -->

14
src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
View File

@@ -1,9 +1,9 @@
angular.module("umbraco").controller("Umbraco.Editors.DatepickerController",
function ($scope, notificationsService, scriptLoader) {
function ($scope, notificationsService, assetsService) {
scriptLoader.load([
'views/propertyeditors/datepicker/bootstrap.datepicker.js',
]).then(
assetsService.loadJs(
'views/propertyeditors/datepicker/bootstrap.datepicker.js'
).then(
function () {
//The Datepicker js and css files are available and all components are ready to use.
@@ -21,7 +21,7 @@ angular.module("umbraco").controller("Umbraco.Editors.DatepickerController",
});
scriptLoader.load([
'css!/belle/views/propertyeditors/datepicker/bootstrap.datepicker.css'
]);
assetsService.loadCss(
'views/propertyeditors/datepicker/bootstrap.datepicker.css'
);
});

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/googlemaps/googlemaps.controller.js
View File

@@ -1,8 +1,8 @@
angular.module("umbraco")
.controller("Umbraco.Editors.GoogleMapsController",
function ($rootScope, $scope, notificationsService, dialogService, scriptLoader, $log, $timeout) {
function ($rootScope, $scope, notificationsService, dialogService, assetsService, $log, $timeout) {
scriptLoader.load(['http://www.google.com/jsapi'])
assetsService.loadJs('http://www.google.com/jsapi')
.then(function(){
google.load("maps", "3",
{

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
View File

@@ -1,10 +1,10 @@
angular.module("umbraco")
.controller("Umbraco.Editors.RTEController",
function($rootScope, $scope, dialogService, $log, umbImageHelper, scriptLoader){
function($rootScope, $scope, dialogService, $log, umbImageHelper, assetsService){
scriptLoader.load(["lib/tinymce/tinymce.min.js"]).then(function(){
assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function(){
tinymce.DOM.events.domLoaded = true;
tinymce.init({
selector: "#" + $scope.model.alias + "_rte",
skin: "umbraco",
@@ -55,7 +55,7 @@ angular.module("umbraco")
};
function populate(data){
$scope.model.value = data.selection;
$scope.model.value = data.selection;
}
});

13
src/Umbraco.Web.UI.Client/src/views/propertyeditors/tags/tags.controller.js
View File

@@ -1,13 +1,10 @@
angular.module("umbraco")
.controller("Umbraco.Editors.TagsController",
//function($rootScope, $scope, $log, tagsResource, scriptLoader) {
function ($rootScope, $scope, $log, scriptLoader) {
function ($rootScope, $scope, $log, assetsService) {
scriptLoader.load(
[
'views/propertyeditors/tags/bootstrap-tags.custom.js',
'css!views/propertyeditors/tags/bootstrap-tags.custom.css'
]).then(function(){
assetsService.loadJs(
'views/propertyeditors/tags/bootstrap-tags.custom.js'
).then(function(){
//// Get data from tagsFactory
//$scope.tags = tagsResource.getTags("group");
@@ -22,5 +19,7 @@ angular.module("umbraco")
tags.addTag(tag.label);
});
});
assetsService.loadCss('views/propertyeditors/tags/bootstrap-tags.custom.css');
}
);