This document tries to outline what is required to have a test-driven setup for +angular developement in Umbraco 7. It goes through the setup process as well as how +to add new services that requires mocking as well as how to use grunt to run tests automaticly.
+Make sure to have all the node dependencies in order when you start, these are updated regularly in case we need to go to a new version of a dependency, or new dependencies are added.
+Simply run open a terminal / cmd in the Umbraco.Web.Ui.Client folder and run:
+npm installThis should setup the entire grunt,karma and jsint setup we use for tests and pruning.
+To start working on the client files, and have them automaticly built and merged into the client project, as well as the VS project, simply run the command
+grunt devThis will start a webserver on :8080 and tell karma to run tests every time a .js or .less file is changed. +After linting and tests have passed, all the client files are copied to umrbaco.web.ui/umbraco folder, so it also keeps the server project uptodate on any client changes. This should all happen in the background.
+The process for adding or modifying a service should always be based on passed tests. So if we need to change the footprint of the contentservice, and the way any controller calls this service, we need to make sure the tests passes with our mocked services.
+This ensures 3 things: +- we test our controllers +- we test our services +- we always have mocked data available, if you want to run the client without IIS
+We add a service for fetching macros from the database, the initial implementation should happen of this service should happen in /src/common/resources/macro.resource.js
The macro.resource.js calls $http as normal, but no server implementation should be needed at this point.
Next, we describe how the rest service should return data, this is done in /common/mocks/umbraco.httpbackend.js, where we can define what data a certain url +would return.
+So in the case of getting tree items we define:
+$httpBackend
+ .whenGET( urlRegex('/umbraco/UmbracoTrees/ApplicationTreeApi/GetApplicationTrees') )
+ .respond(returnApplicationTrees);The returnApplicationTrees function then looks like this:
function returnApplicationTrees(status, data, headers){
+ var app = getParameterByName(data, "application");
+ var tree = _backendData.tree.getApplication(app);
+ return [200, tree, null];
+}It returns an array of 3 items, the http status code, the expected data, and finally it can return a collection of http headers.
+_backendData.tree.getApplication(app);Refers to a helper method in umbraco.httpbackend.helper.js which contains all the helper methods we
+use to return static json.
So to add a service, which requires data from the server we should:
+There is a static servervariables file in /mocks which describes the urls used by the rest service, this is currently needed as we dont have this set as a angular service, and no real conventions for these urls yet. Longer-term it would be great to have a urlBuilder which could do
+urlService.url("contentTypes", "GetAllowedChildren");
+//would return /<umbracodir>/<apibaseDir>/contentyTypes/getAllowedChildrenBut for now, they are set in the servervariables file.
+ + + diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 406314e921..d7f0d60e82 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -1,19 +1,5 @@ module.exports = function (grunt) { - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-recess'); - - grunt.loadNpmTasks('grunt-karma'); - - grunt.loadNpmTasks('grunt-open'); - grunt.loadNpmTasks('grunt-markdown'); - grunt.loadNpmTasks('grunt-contrib-connect'); - // Default task. grunt.registerTask('default', ['jshint:dev','build','karma:unit']); grunt.registerTask('dev', ['jshint:dev', 'build', 'webserver', 'open:dev', 'watch']); @@ -25,7 +11,7 @@ module.exports = function (grunt) { grunt.registerTask('build', ['clean','concat','recess:build','copy']); //utillity tasks - grunt.registerTask('docs', ['markdown']); + grunt.registerTask('docs', ['markdown', 'ngdocs']); grunt.registerTask('webserver', ['connect:devserver']); // Print a timestamp (useful for when watching) @@ -219,6 +205,17 @@ module.exports = function (grunt) { } }, + ngdocs: { + options: { + dest: 'docs/api', + startPage: '/api', + title: "My Awesome Docs" + }, + api: { + src: ['src/common/services/*.js'], + title: 'API Documentation' + } + }, jshint:{ dev:{ @@ -266,5 +263,22 @@ module.exports = function (grunt) { } } }); + + + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-recess'); + + grunt.loadNpmTasks('grunt-karma'); + + grunt.loadNpmTasks('grunt-open'); + grunt.loadNpmTasks('grunt-contrib-connect'); + + grunt.loadNpmTasks('grunt-markdown'); + grunt.loadNpmTasks('grunt-ngdocs'); }; diff --git a/src/Umbraco.Web.UI.Client/lib/grunt/utills.js b/src/Umbraco.Web.UI.Client/lib/grunt/utills.js new file mode 100644 index 0000000000..0a0398c20e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/lib/grunt/utills.js @@ -0,0 +1,263 @@ +var fs = require('fs'); +var shell = require('shelljs'); +var grunt = require('grunt'); +var spawn = require('child_process').spawn; + +module.exports = { + + init: function() { + shell.exec('npm install'); + }, + + + getVersion: function(){ + var package = JSON.parse(fs.readFileSync('package.json', 'UTF-8')); + var match = package.version.match(/^([^\-]*)(-snapshot)?$/); + var semver = match[1].split('.'); + var hash = shell.exec('git rev-parse --short HEAD', {silent: true}).output.replace('\n', ''); + + var fullVersion = (match[1] + (match[2] ? '-' + hash : '')); + var numVersion = semver[0] + '.' + semver[1] + '.' + semver[2]; + var version = { + number: numVersion, + full: fullVersion, + major: semver[0], + minor: semver[1], + dot: semver[2], + codename: package.codename, + cdn: package.cdnVersion + }; + + return version; + }, + + + startKarma: function(config, singleRun, done){ + var browsers = grunt.option('browsers'); + var reporters = grunt.option('reporters'); + var noColor = grunt.option('no-colors'); + var port = grunt.option('port'); + var p = spawn('node', ['node_modules/karma/bin/karma', 'start', config, + singleRun ? '--single-run=true' : '', + reporters ? '--reporters=' + reporters : '', + browsers ? '--browsers=' + browsers : '', + noColor ? '--no-colors' : '', + port ? '--port=' + port : '' + ]); + p.stdout.pipe(process.stdout); + p.stderr.pipe(process.stderr); + p.on('exit', function(code){ + if(code !== 0) grunt.fail.warn("Karma test(s) failed. Exit code: " + code); + done(); + }); + }, + + + wrap: function(src, name){ + src.unshift('src/' + name + '.prefix'); + src.push('src/' + name + '.suffix'); + return src; + }, + + + addStyle: function(src, styles, minify){ + styles = styles.map(processCSS.bind(this)).join('\n'); + src += styles; + return src; + + function processCSS(file){ + var css = fs.readFileSync(file).toString(); + if(minify){ + css = css + .replace(/\r?\n/g, '') + .replace(/\/\*.*?\*\//g, '') + .replace(/:\s+/g, ':') + .replace(/\s*\{\s*/g, '{') + .replace(/\s*\}\s*/g, '}') + .replace(/\s*\,\s*/g, ',') + .replace(/\s*\;\s*/g, ';'); + } + //escape for js + css = css + .replace(/\\/g, '\\\\') + .replace(/'/g, "\\'") + .replace(/\r?\n/g, '\\n'); + return "angular.element(document).find('head').append('');"; + } + }, + + + process: function(src, NG_VERSION, strict){ + var processed = src + .replace(/"NG_VERSION_FULL"/g, NG_VERSION.full) + .replace(/"NG_VERSION_MAJOR"/, NG_VERSION.major) + .replace(/"NG_VERSION_MINOR"/, NG_VERSION.minor) + .replace(/"NG_VERSION_DOT"/, NG_VERSION.dot) + .replace(/"NG_VERSION_CDN"/, NG_VERSION.cdn) + .replace(/"NG_VERSION_CODENAME"/, NG_VERSION.codename); + if (strict !== false) processed = this.singleStrict(processed, '\n\n', true); + return processed; + }, + + + build: function(config, fn){ + var files = grunt.file.expand(config.src); + var styles = config.styles; + //concat + var src = files.map(function(filepath){ + return grunt.file.read(filepath); + }).join(grunt.util.normalizelf('\n')); + //process + var processed = this.process(src, grunt.config('NG_VERSION'), config.strict); + if (styles) processed = this.addStyle(processed, styles.css, styles.minify); + //write + grunt.file.write(config.dest, processed); + grunt.log.ok('File ' + config.dest + ' created.'); + fn(); + }, + + + singleStrict: function(src, insert){ + return src + .replace(/\s*("|')use strict("|');\s*/g, insert) // remove all file-specific strict mode flags + .replace(/(\(function\([^)]*\)\s*\{)/, "$1'use strict';"); // add single strict mode flag + }, + + + sourceMap: function(mapFile, fileContents) { + // use the following once Chrome beta or stable supports the //# pragma + // var sourceMapLine = '//# sourceMappingURL=' + mapFile + '\n'; + var sourceMapLine = '/*\n//@ sourceMappingURL=' + mapFile + '\n*/\n'; + return fileContents + sourceMapLine; + }, + + + min: function(file, done) { + var classPathSep = (process.platform === "win32") ? ';' : ':'; + var minFile = file.replace(/\.js$/, '.min.js'); + var mapFile = minFile + '.map'; + var mapFileName = mapFile.match(/[^\/]+$/)[0]; + var errorFileName = file.replace(/\.js$/, '-errors.json'); + shell.exec( + 'java ' + + this.java32flags() + ' ' + + '-Xmx2g ' + + '-cp components/closure-compiler/compiler.jar' + classPathSep + + 'components/ng-closure-runner/ngcompiler.jar ' + + // '-classpath ./components/closure-compiler/compiler.jar' + classPathSep + + // './components/ng-closure-runner/ngcompiler.jar ' + + 'org.angularjs.closurerunner.NgClosureRunner ' + + '--compilation_level SIMPLE_OPTIMIZATIONS ' + + '--language_in ECMASCRIPT5_STRICT ' + + '--minerr_pass ' + + '--minerr_errors ' + errorFileName + ' ' + + '--minerr_url http://docs.angularjs.org/minerr/ ' + + '--source_map_format=V3 ' + + '--create_source_map ' + mapFile + ' ' + + '--js ' + file + ' ' + + '--js_output_file ' + minFile, + function(code) { + if (code !== 0) grunt.fail.warn('Error minifying ' + file); + + // closure creates the source map relative to build/ folder, we need to strip those references + grunt.file.write(mapFile, grunt.file.read(mapFile).replace('"file":"build/', '"file":"'). + replace('"sources":["build/','"sources":["')); + + // move add use strict into the closure + add source map pragma + grunt.file.write(minFile, this.sourceMap(mapFileName, this.singleStrict(grunt.file.read(minFile), '\n'))); + grunt.log.ok(file + ' minified into ' + minFile); + done(); + }.bind(this)); + }, + + + //returns the 32-bit mode force flags for java compiler if supported, this makes the build much faster + java32flags: function(){ + if (process.platform === "win32") return ''; + if (shell.exec('java -version -d32 2>&1', {silent: true}).code !== 0) return ''; + return ' -d32 -client'; + }, + + + //collects and combines error messages stripped out in minify step + collectErrors: function () { + var combined = { + id: 'ng', + generated: new Date().toString(), + errors: {} + }; + grunt.file.expand('build/*-errors.json').forEach(function (file) { + var errors = grunt.file.readJSON(file), + namespace; + Object.keys(errors).forEach(function (prop) { + if (typeof errors[prop] === 'object') { + namespace = errors[prop]; + if (combined.errors[prop]) { + Object.keys(namespace).forEach(function (code) { + if (combined.errors[prop][code] && combined.errors[prop][code] !== namespace[code]) { + grunt.warn('[collect-errors] Duplicate minErr codes don\'t match!'); + } else { + combined.errors[prop][code] = namespace[code]; + } + }); + } else { + combined.errors[prop] = namespace; + } + } else { + if (combined.errors[prop] && combined.errors[prop] !== errors[prop]) { + grunt.warn('[collect-errors] Duplicate minErr codes don\'t match!'); + } else { + combined.errors[prop] = errors[prop]; + } + } + }); + }); + grunt.file.write('build/errors.json', JSON.stringify(combined)); + grunt.file.expand('build/*-errors.json').forEach(grunt.file.delete); + }, + + + //csp connect middleware + csp: function(){ + return function(req, res, next){ + res.setHeader("X-WebKit-CSP", "default-src 'self';"); + res.setHeader("X-Content-Security-Policy", "default-src 'self'"); + next(); + }; + }, + + + //rewrite connect middleware + rewrite: function(){ + return function(req, res, next){ + var REWRITE = /\/(guide|api|cookbook|misc|tutorial).*$/, + IGNORED = /(\.(css|js|png|jpg)$|partials\/.*\.html$)/, + match; + + if (!IGNORED.test(req.url) && (match = req.url.match(REWRITE))) { + console.log('rewriting', req.url); + req.url = req.url.replace(match[0], '/index.html'); + } + next(); + }; + }, + + parallelTask: function(name) { + var args = [name, '--port=' + this.lastParallelTaskPort]; + + if (grunt.option('browsers')) { + args.push('--browsers=' + grunt.option('browsers')); + } + + if (grunt.option('reporters')) { + args.push('--reporters=' + grunt.option('reporters')); + } + + this.lastParallelTaskPort++; + + + return {grunt: true, args: args}; + }, + + lastParallelTaskPort: 9876 +}; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 6656be7600..6bbd6ad197 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -42,6 +42,9 @@ "karma-requirejs": "0.0.1", "karma-coffee-preprocessor": "0.0.1", "karma": "~0.9", - "karma-phantomjs-launcher": "0.0.2" + "karma-phantomjs-launcher": "0.0.2", + "grunt-ngdocs": "~0.1.2", + "shelljs": "~0.1.4", + "grunt-jsdoc": "~0.4.0" } } diff --git a/src/Umbraco.Web.UI.Client/src/_legacy/auth.resource.js b/src/Umbraco.Web.UI.Client/src/_legacy/auth.resource.js index c534742342..ec9ac6e5ba 100644 --- a/src/Umbraco.Web.UI.Client/src/_legacy/auth.resource.js +++ b/src/Umbraco.Web.UI.Client/src/_legacy/auth.resource.js @@ -1,5 +1,5 @@ /** - * @ngdoc factory + * @ngdoc service * @name umbraco.resources.authResource * @description Loads in data for authentication **/ diff --git a/src/Umbraco.Web.UI.Client/src/_legacy/tree.resource.js b/src/Umbraco.Web.UI.Client/src/_legacy/tree.resource.js index d488d33e30..109f3dc6a7 100644 --- a/src/Umbraco.Web.UI.Client/src/_legacy/tree.resource.js +++ b/src/Umbraco.Web.UI.Client/src/_legacy/tree.resource.js @@ -1,5 +1,5 @@ /** -* @ngdoc factory +* @ngdoc service * @name umbraco.resources.treeResource * @description Loads in data for trees **/ diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbpanel.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbpanel.directive.js index 9a9fab283c..046efd3286 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbpanel.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbpanel.directive.js @@ -1,3 +1,8 @@ +/** +* @ngdoc directive +* @name umbraco.directive:umbPanel +* @restrict E +**/ angular.module("umbraco.directives") .directive('umbPanel', function(){ return { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbproperty.directive.js index 6fff684bfe..dbdce22dd8 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbproperty.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbproperty.directive.js @@ -1,4 +1,8 @@ - +/** +* @ngdoc directive +* @name umbraco.directive:umbProperty +* @restrict E +**/ angular.module("umbraco.directives") .directive('umbProperty', function (umbPropEditorHelper) { return { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtab.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtab.directive.js index 12e56fa607..b6065b509d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtab.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtab.directive.js @@ -1,3 +1,8 @@ +/** +* @ngdoc directive +* @name umbraco.directive:umbTab +* @restrict E +**/ angular.module("umbraco.directives") .directive('umbTab', function(){ return { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtabview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtabview.directive.js index 100c82a096..97a92df000 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtabview.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtabview.directive.js @@ -1,3 +1,8 @@ +/** +* @ngdoc directive +* @name umbraco.directive:umbTabView +* @restrict E +**/ angular.module("umbraco.directives") .directive('umbTabView', function(){ return { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js index 708919f569..2504d82160 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js @@ -1,3 +1,8 @@ +/** +* @ngdoc directive +* @name umbraco.directive:umbTree +* @restrict E +**/ angular.module("umbraco.directives") .directive('umbTree', function ($compile, $log, $q, treeService, notificationsService) { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js index 01365245ac..ca921d128d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js @@ -1,3 +1,22 @@ +/** + * @ngdoc directive + * @name umbraco.directives:umbTreeItem + * @element li + * @function + * + * @description + * Renders a list item, representing a single node in the tree. + * Includes element to toggle children, and a menu toggling button + * + * **note:** This directive is only used internally in the umbTree directive + * + * @example +
+ * var dialog = dialogService.open({template: 'path/to/page.html', show: true, callback: done});
+ * functon done(data){
+ * //The dialog has been submitted
+ * }
+ *
+ */
+
angular.module('umbraco.services')
.factory('dialogService', ['$rootScope', '$compile', '$http', '$timeout', '$q', '$templateCache',
function($rootScope, $compile, $http, $timeout, $q, $templateCache) {
-
var _dialogs = [];
$rootScope.$on("closeDialogs", function () {
for (var i = 0; i < _dialogs.length; i++) {
@@ -14,35 +42,41 @@ angular.module('umbraco.services')
}
});
-
+ //internal method that handles opening all dialogs
function _open(options){
if(!options){
options = {};
}
-
+ //configation and defaults
var scope = options.scope || $rootScope.$new(),
+ container = options.container || $("body"),
animationClass = options.animation || "fade",
modalClass = options.modalClass || "umb-modal",
templateUrl = options.template || "views/common/notfound.html";
+ //if a callback is available
var callback = options.callback;
+
+ //Modal dom obj and unique id
var $modal = $('');
var id = templateUrl.replace('.html', '').replace(/[\/|\.|:]/g, "-") + '-' + scope.$id;
+ //set the id and add classes
$modal
.attr('id', id)
.addClass(animationClass)
.addClass(modalClass);
-
+ //push the modal into the global modal collection
_dialogs.push($modal);
+ //if iframe is enabled, inject that instead of a template
if(options.iframe) {
var html = $("");
$modal.html(html);
-
- $('body').append($modal);
+ //append to body or whatever element is passed in as options.containerElement
+ container.append($modal);
if(width){
$modal.css("width", width);
@@ -62,8 +96,8 @@ angular.module('umbraco.services')
$modal
.html(template);
-
- $('body').append($modal);
+ //append to body or other container element
+ container.append($modal);
// Compile modal content
$timeout(function () {
@@ -75,6 +109,7 @@ angular.module('umbraco.services')
scope.dialogData.selection = [];
// Provide scope display functions
+ //this passes the modal to the current scope
scope.$modal = function (name) {
$modal.modal(name);
};
@@ -135,6 +170,22 @@ angular.module('umbraco.services')
}
return{
+ /**
+ * @ngdoc method
+ * @name umbraco.services.dialogService#open
+ * @methodOf umbraco.services.dialogService
+ *
+ * @description
+ * Opens a modal rendering a given template url
+ * @param {Object} options rendering options
+ * @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 {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
+ */
open: function(options){
return _open(options);
},
@@ -166,7 +217,13 @@ return{
template: 'views/common/dialogs/property.html',
show: true});
},
+
+ //deprecated
append : function(options){
+
+ return _open(options);
+
+ /*
var scope = options.scope || $rootScope.$new(),
templateUrl = options.template;
@@ -180,7 +237,7 @@ return{
});
return template;
- });
+ });*/
}
};
}]);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
index 724e3f0701..7e2f035c05 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
@@ -1,102 +1,155 @@
-angular.module('umbraco.services')
-.factory('navigationService', function ($rootScope, $routeParams, $log, $location, dialogService, treeService, sectionResource) {
+/**
+ * @ngdoc service
+ * @name umbraco.services.navigationService
+ *
+ * @requires $rootScope
+ * @requires $routeParams
+ * @requires $log
+ * @requires $location
+ * @requires dialogService
+ * @requires treeService
+ * @requires sectionResource
+ *
+ * @description
+ * Service to handle the main application navigation. Responsible for invoking the tree
+ * Section navigation and search, and maintain their state for the entire application lifetime
+ *
+ */
- var currentSection = $routeParams.section;
- var currentId = $routeParams.id;
- var currentNode;
- var ui = {};
+ angular.module('umbraco.services')
+ .factory('navigationService', function ($rootScope, $routeParams, $log, $location, dialogService, treeService, sectionResource) {
- var _sections = sectionResource.getSections();
+ var currentSection = $routeParams.section;
+ var currentId = $routeParams.id;
+ var currentNode;
+ var ui = {};
- function setMode(mode){
- switch(mode)
- {
- case 'tree':
- ui.showNavigation = true;
- ui.showContextMenu = false;
- ui.showContextMenuDialog = false;
- ui.stickyNavigation = false;
+ var _sections = sectionResource.getSections();
- $("#search-form input").focus();
- break;
- case 'menu':
- ui.showNavigation = true;
- ui.showContextMenu = true;
- ui.showContextMenuDialog = false;
- ui.stickyNavigation = true;
- break;
- case 'dialog':
- ui.stickyNavigation = true;
- ui.showNavigation = true;
- ui.showContextMenu = false;
- ui.showContextMenuDialog = true;
- break;
- case 'search':
- ui.stickyNavigation = false;
- ui.showNavigation = true;
- ui.showContextMenu = false;
- ui.showSearchResults = true;
- ui.showContextMenuDialog = false;
- break;
- default:
- ui.showNavigation = false;
- ui.showContextMenu = false;
- ui.showContextMenuDialog = false;
- ui.showSearchResults = false;
- ui.stickyNavigation = false;
- break;
- }
- }
+ function setMode(mode){
+ switch(mode)
+ {
+ case 'tree':
+ ui.showNavigation = true;
+ ui.showContextMenu = false;
+ ui.showContextMenuDialog = false;
+ ui.stickyNavigation = false;
- return {
- currentNode: currentNode,
- mode: "default",
- ui: ui,
- sections: _sections,
+ $("#search-form input").focus();
+ break;
+ case 'menu':
+ ui.showNavigation = true;
+ ui.showContextMenu = true;
+ ui.showContextMenuDialog = false;
+ ui.stickyNavigation = true;
+ break;
+ case 'dialog':
+ ui.stickyNavigation = true;
+ ui.showNavigation = true;
+ ui.showContextMenu = false;
+ ui.showContextMenuDialog = true;
+ break;
+ case 'search':
+ ui.stickyNavigation = false;
+ ui.showNavigation = true;
+ ui.showContextMenu = false;
+ ui.showSearchResults = true;
+ ui.showContextMenuDialog = false;
+ break;
+ default:
+ ui.showNavigation = false;
+ ui.showContextMenu = false;
+ ui.showContextMenuDialog = false;
+ ui.showSearchResults = false;
+ ui.stickyNavigation = false;
+ break;
+ }
+ }
+
+ return {
+ currentNode: currentNode,
+ mode: "default",
+ ui: ui,
+ sections: _sections,
-
/**
- * @ngdoc function
- * @name loadLegacyIFrame
- * @methodOf navigationService
- * @function
+ * @ngdoc method
+ * @name umbraco.services.navigationService#load
+ * @methodOf umbraco.services.navigationService
*
* @description
* Shows the legacy iframe and loads in the content based on the source url
- * @param source {String} The URL to load into the iframe
+ * @param {String} source The URL to load into the iframe
*/
- loadLegacyIFrame: function (source) {
- $location.path("/framed/" + encodeURIComponent(source));
- },
+ loadLegacyIFrame: function (source) {
+ $location.path("/framed/" + encodeURIComponent(source));
+ },
- changeSection: function(sectionAlias){
- if(this.ui.stickyNavigation){
- setMode("default-opensection");
- this.ui.currentSection = selectedSection;
- this.showTree(selectedSection);
- }
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#changeSection
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Changes the active section to a given section alias
+ * If the navigation is 'sticky' this will load the associated tree
+ * and load the dashboard related to the section
+ * @param {string} sectionAlias The alias of the section
+ */
+ changeSection: function(sectionAlias){
+ if(this.ui.stickyNavigation){
+ setMode("default-opensection");
+ this.ui.currentSection = selectedSection;
+ this.showTree(selectedSection);
+ }
- $location.path(sectionAlias);
- },
+ $location.path(sectionAlias);
+ },
- showTree: function(sectionAlias){
- if(!this.ui.stickyNavigation && sectionAlias !== this.ui.currentTree){
- $log.log("show tree" + sectionAlias);
- this.ui.currentTree = sectionAlias;
- setMode("tree");
- }
- },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#showTree
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Shows the tree for a given tree alias but turning on the containing dom element
+ * only changes if the section is different from the current one
+ * @param {string} sectionAlias The alias of the section the tree should load data from
+ */
+ showTree: function(sectionAlias){
+ if(!this.ui.stickyNavigation && sectionAlias !== this.ui.currentTree){
+ this.ui.currentTree = sectionAlias;
+ setMode("tree");
+ }
+ },
- hideTree: function(){
- if(!this.ui.stickyNavigation){
- $log.log("hide tree");
- this.ui.currentTree = "";
- setMode("default-hidesectiontree");
- }
- },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#hideTree
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Hides the tree by hiding the containing dom element
+ */
+ hideTree: function(){
+ if(!this.ui.stickyNavigation){
+ $log.log("hide tree");
+ this.ui.currentTree = "";
+ setMode("default-hidesectiontree");
+ }
+ },
- showMenu: function (event, args) {
- if(args.event !== undefined && args.node.defaultAction && !args.event.altKey){
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#showMenu
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Hides the tree by hiding the containing dom element
+ * @param {Event} event the click event triggering the method, passed from the DOM element
+ */
+ showMenu: function (event, args) {
+ if(args.event !== undefined && args.node.defaultAction && !args.event.altKey){
//hack for now, it needs the complete action object to, so either include in tree item json
//or lookup in service...
var act = {
@@ -106,11 +159,11 @@ angular.module('umbraco.services')
this.ui.currentNode = args.node;
this.showDialog({
- scope: args.scope,
- node: args.node,
- action: act,
- section: this.ui.currentTree
- });
+ scope: args.scope,
+ node: args.node,
+ action: act,
+ section: this.ui.currentTree
+ });
}
else {
setMode("menu");
@@ -122,60 +175,120 @@ angular.module('umbraco.services')
}
},
- hideMenu: function () {
- var selectedId = $routeParams.id;
- this.ui.currentNode = undefined;
- this.ui.actions = [];
- setMode("tree");
- },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#hideMenu
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Hides the menu by hiding the containing dom element
+ */
+ hideMenu: function () {
+ var selectedId = $routeParams.id;
+ this.ui.currentNode = undefined;
+ this.ui.actions = [];
+ setMode("tree");
+ },
- showUserDialog: function(){
- var d = dialogService.open(
- {
- template: "views/common/dialogs/user.html",
- modalClass: "umb-modal-left",
- show: true
- });
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#showUserDialog
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Opens the user dialog, next to the sections navigation
+ * template is located in views/common/dialogs/user.html
+ */
+ showUserDialog: function(){
+ var d = dialogService.open(
+ {
+ template: "views/common/dialogs/user.html",
+ modalClass: "umb-modal-left",
+ show: true
+ });
- },
- showDialog: function (args) {
- setMode("dialog");
+ },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#showDialog
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * Opens a dialog, for a given action on a given tree node
+ * uses the dialogServicet to inject the selected action dialog
+ * into #dialog div.umb-panel-body
+ * the path to the dialog view is determined by:
+ * "views/" + current tree + "/" + action alias + ".html"
+ * @param {Object} args arguments passed to the function
+ * @param {Scope} args.scope current scope passed to the dialog
+ * @param {Object} args.action the clicked action containing `name` and `alias`
+ */
+ showDialog: function (args) {
+ setMode("dialog");
- var scope = args.scope || $rootScope.$new();
- scope.currentNode = args.node;
+ var scope = args.scope || $rootScope.$new();
+ scope.currentNode = args.node;
//this.currentNode = item;
this.ui.dialogTitle = args.action.name;
var templateUrl = "views/" + this.ui.currentTree + "/" + args.action.alias + ".html";
- var d = dialogService.append(
- {
- container: $("#dialog div.umb-panel-body"),
- scope: scope,
- template: templateUrl
- });
+ var d = dialogService.open(
+ {
+ container: $("#dialog div.umb-panel-body"),
+ scope: scope,
+ template: templateUrl
+ });
},
- hideDialog: function() {
- $log.log("hide dialog");
- this.showMenu(undefined, {node: this.ui.currentNode});
- },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#hideDialog
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * hides the currently open dialog
+ */
+ hideDialog: function() {
+ this.showMenu(undefined, {node: this.ui.currentNode});
+ },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#showSearch
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * shows the search pane
+ */
+ showSearch: function() {
+ setMode("search");
+ },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#hideSearch
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * hides the search pane
+ */
+ hideSearch: function() {
+ setMode("default-hidesearch");
+ },
+ /**
+ * @ngdoc method
+ * @name umbraco.services.navigationService#hideNavigation
+ * @methodOf umbraco.services.navigationService
+ *
+ * @description
+ * hides any open navigation panes and resets the tree, actions and the currently selected node
+ */
+ hideNavigation: function(){
+ this.ui.currentTree = "";
+ this.ui.actions = [];
+ this.ui.currentNode = undefined;
- showSearch: function() {
- setMode("search");
- },
+ setMode("default");
+ }
+ };
- hideSearch: function() {
- setMode("default-hidesearch");
- },
-
- hideNavigation: function(){
- this.ui.currentTree = "";
- this.ui.actions = [];
- this.ui.currentNode = undefined;
-
- setMode("default");
- }
- };
-
-});
+ });
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/servervalidation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/servervalidation.service.js
index 33f86395f5..828396d46b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/servervalidation.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/servervalidation.service.js
@@ -1,6 +1,6 @@
/**
- * @ngdoc factory
- * @name serverValidationService
+ * @ngdoc service
+ * @name umbraco.services.serverValidationService
* @function
*
* @description
@@ -14,7 +14,7 @@ function serverValidationService() {
/**
* @ngdoc function
* @name subscribe
- * @methodOf serverValidationService
+ * methodOf umbrac.services.serverValidationService
* @function
*
* @description
@@ -52,7 +52,7 @@ function serverValidationService() {
/**
* @ngdoc function
* @name getCallbacks
- * @methodOf serverValidationService
+ * methodOf umbraco.services.serverValidationService
* @function
*
* @description
@@ -71,7 +71,7 @@ function serverValidationService() {
/**
* @ngdoc function
* @name addError
- * @methodOf serverValidationService
+ * methodOf umbraco.services.serverValidationService
* @function
*
* @description
@@ -109,7 +109,7 @@ function serverValidationService() {
/**
* @ngdoc function
* @name removeError
- * @methodOf serverValidationService
+ * methodOf umbraco.services.serverValidationService
* @function
*
* @description
@@ -129,7 +129,7 @@ function serverValidationService() {
/**
* @ngdoc function
* @name reset
- * @methodOf serverValidationService
+ * methodOf umbraco.services.serverValidationService
* @function
*
* @description
@@ -148,7 +148,7 @@ function serverValidationService() {
/**
* @ngdoc function
* @name getError
- * @methodOf serverValidationService
+ * methodOf umbraco.services.serverValidationService
* @function
*
* @description
@@ -166,7 +166,7 @@ function serverValidationService() {
/**
* @ngdoc function
* @name hasError
- * @methodOf serverValidationService
+ * methodOf umbraco.services.serverValidationService
* @function
*
* @description
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js
index 8d73d41954..0da797bf26 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js
@@ -1,13 +1,11 @@
/**
- * @ngdoc factory
+ * @ngdoc service
* @name treeService
* @function
*
* @description
* The tree service factory
-
- * @param myParam {object} Enter param description here
*/
function treeService($q, treeResource, iconHelper) {
//implement this in local storage
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/utill.service.js b/src/Umbraco.Web.UI.Client/src/common/services/utill.service.js
index 7a4b2af506..095be663a8 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/utill.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/utill.service.js
@@ -1,7 +1,7 @@
/*Contains multiple services for various helper tasks */
/**
- * @ngdoc function
+ * @ngdoc service
* @name umbraco.services.angularHelper
* @function
*
@@ -14,7 +14,7 @@ function angularHelper($log) {
/**
* @ngdoc function
* @name safeApply
- * @methodOf angularHelper
+ * methodOf umbraco.services.angularHelper
* @function
*
* @description
@@ -32,7 +32,7 @@ function angularHelper($log) {
/**
* @ngdoc function
* @name getCurrentForm
- * @methodOf angularHelper
+ * methodOf umbraco.services.angularHelper
* @function
*
* @description
@@ -88,7 +88,7 @@ function angularHelper($log) {
/**
* @ngdoc function
* @name validateHasForm
- * @methodOf angularHelper
+ * methodOf umbraco.services.angularHelper
* @function
*
* @description
@@ -106,7 +106,7 @@ function angularHelper($log) {
/**
* @ngdoc function
* @name getNullForm
- * @methodOf angularHelper
+ * methodOf umbraco.services.angularHelper
* @function
*
* @description
@@ -114,7 +114,7 @@ function angularHelper($log) {
* NOTE: This is actually the same construct as angular uses internally for creating a null form but they don't expose
* any of this publicly to us, so we need to create our own.
*
- * @param formName {string} The form name to assign
+ * @param {string} formName The form name to assign
*/
getNullForm: function(formName) {
return {
@@ -132,8 +132,8 @@ function angularHelper($log) {
angular.module('umbraco.services').factory('angularHelper', angularHelper);
/**
-* @ngdoc factory
-* @name umbraco.services:umbPropertyEditorHelper
+* @ngdoc service
+* @name umbraco.services.umbPropertyEditorHelper
* @description A helper object used for property editors
**/
function umbPropEditorHelper() {
@@ -141,13 +141,13 @@ function umbPropEditorHelper() {
/**
* @ngdoc function
* @name getImagePropertyValue
- * @methodOf umbPropEditorHelper
+ * methodOf umbraco.services.umbPropertyEditorHelper
* @function
*
* @description
* Returns the correct view path for a property editor, it will detect if it is a full virtual path but if not then default to the internal umbraco one
*
- * @param input {string} the view path currently stored for the property editor
+ * @param {string} input the view path currently stored for the property editor
*/
getViewPath: function (input) {
var path = String(input);
@@ -165,8 +165,8 @@ function umbPropEditorHelper() {
angular.module('umbraco.services').factory('umbPropEditorHelper', umbPropEditorHelper);
/**
-* @ngdoc factory
-* @name umbraco.services:umbImageHelper
+* @ngdoc service
+* @name umbraco.services.umbImageHelper
* @description A helper object used for parsing image paths
**/
function umbImageHelper() {
@@ -225,7 +225,7 @@ function umbImageHelper() {
angular.module('umbraco.services').factory('umbImageHelper', umbImageHelper);
/**
-* @ngdoc factory
+* @ngdoc service
* @name umbraco.services:umbRequestHelper
* @description A helper object used for sending requests to the server
**/
@@ -339,7 +339,7 @@ function umbRequestHelper($http, $q, umbDataFormatter) {
angular.module('umbraco.services').factory('umbRequestHelper', umbRequestHelper);
/**
-* @ngdoc factory
+* @ngdoc service
* @name umbraco.services:umbDataFormatter
* @description A helper object used to format/transform JSON Umbraco data, mostly used for persisting data to the server
**/
@@ -375,7 +375,7 @@ function umbDataFormatter() {
angular.module('umbraco.services').factory('umbDataFormatter', umbDataFormatter);
/**
-* @ngdoc factory
+* @ngdoc service
* @name umbraco.services.tree:iconHelper
* @description A helper service for dealing with icons, mostly dealing with legacy tree icons
**/
diff --git a/src/Umbraco.Web.UI.Client/src/common/test.js b/src/Umbraco.Web.UI.Client/src/common/test.js
new file mode 100644
index 0000000000..20ddebdb4f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/test.js
@@ -0,0 +1,25 @@
+/**
+ * @ngdoc service
+ * @name app.common.mongoProvider
+ * @description
+ * Wat
+ */
+angular.module('app.common')
+.factory('mongoProvider', function($rootScope){
+ return{
+
+ /**
+ * @ngdoc method
+ * @name app.common.mongoProvider#someMethod
+ * @methodOf app.common.mongoProvider
+ *
+ * @description
+ * Shows the legacy iframe and loads in the content based on the source url
+ * @param {String} source The URL to load into the iframe
+ */
+ someMethod: function(source){
+
+ }
+ };
+})
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/legacy.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/legacy.controller.js
index a5da3970b6..19ee7b39fd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/legacy.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/legacy.controller.js
@@ -6,7 +6,6 @@
* @description
* A controller to control the legacy iframe injection
*
- * @param myParam {object} Enter param description here
*/
function LegacyController($scope, $routeParams, $element) {
//set the legacy path
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
index 3021d61519..05eb9dcbab 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
@@ -7,7 +7,7 @@
* @description
* Handles the section area of the app
*
- * @param navigationService {navigationService} A reference to the navigationService
+ * @param {navigationService} navigationService A reference to the navigationService
*/
function NavigationController($scope, $location, navigationService, historyService, sectionResource) {
//load navigation service handlers
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
index 311c5bba1c..72a9217347 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
@@ -1,4 +1,4 @@
-