Merge remote-tracking branch 'origin/7.0.0' into 7.0.0--property-editor-guid-to-alias
This commit is contained in:
Shannon
@@ -0,0 +1,157 @@
|
||||
@ngdoc overview
|
||||
@name Adding serverside data to a property editor
|
||||
@description
|
||||
|
||||
##Overview
|
||||
In this tutorial we will add a serverside API controller, which will query a custom table in the umbraco database, and then return the data to a simple angular controller + view.
|
||||
|
||||
The end result will be a person-list, populated from a custom table, when clicked it will store the ID of the selected person.
|
||||
|
||||
##Setup the database
|
||||
First thing we need is some data, below is a simple SQL Script for create a `people` table with some random data in. You could also use [http://generatedata.com] for larger amounts of data:
|
||||
|
||||
CREATE TABLE people (
|
||||
id INTEGER NOT NULL IDENTITY(1, 1),
|
||||
name VARCHAR(255) NULL,
|
||||
town VARCHAR(255) NULL,
|
||||
country VARCHAR(100) NULL,
|
||||
PRIMARY KEY (id)
|
||||
);
|
||||
GO
|
||||
|
||||
INSERT INTO people(name,town,country) VALUES('Myles A. Pearson','Tailles','United Kingdom');
|
||||
INSERT INTO people(name,town,country) VALUES('Cora Y. Kelly','Froidchapelle','Latvia');
|
||||
INSERT INTO people(name,town,country) VALUES('Brooke Baxter','Mogi das Cruzes','Grenada');
|
||||
INSERT INTO people(name,town,country) VALUES('Illiana T. Strong','Bevel','Bhutan');
|
||||
INSERT INTO people(name,town,country) VALUES('Kaye Frederick','Rothesay','Turkmenistan');
|
||||
INSERT INTO people(name,town,country) VALUES('Erasmus Camacho','Sint-Pieters-Kapelle','Saint Vincent and The Grenadines');
|
||||
INSERT INTO people(name,town,country) VALUES('Aimee Sampson','Hawera','Antigua and Barbuda');
|
||||
|
||||
|
||||
##Setup ApiController routes
|
||||
Next we need to defined a `ApiController` to expose a server side route which our application will use to fetch the data.
|
||||
|
||||
For this, we will create a file at: `/app_code/PersonApiController.cs` It must be in app_code since we want our app to compile it on start, alternatively, you can just add it to a normal .net project and compile into a dll as normal.
|
||||
|
||||
In the PersonApiController.cs file, add:
|
||||
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Web;
|
||||
|
||||
using Umbraco.Web.WebApi;
|
||||
using Umbraco.Web.Editors;
|
||||
using Umbraco.Core.Persistence;
|
||||
|
||||
namespace My.Controllers
|
||||
{
|
||||
[Umbraco.Web.Mvc.PluginController("My")]
|
||||
public class PersonApiController : UmbracoAuthorizedJsonController
|
||||
{
|
||||
//we will add a method here later
|
||||
}
|
||||
}
|
||||
|
||||
This is a very basic Api controller which inherits from `UmbracoAuthorizedJsonController` this specific class will only return json data, and only to requests which are authorized to access the backoffice
|
||||
|
||||
##Setup the GetAll() method
|
||||
Now that we have a controller, we need to create a method, which can return a collection of people, which our editor will use.
|
||||
|
||||
So first of all, we add a `Person` class to the `My.Controllers` namespace:
|
||||
|
||||
public class Person
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Name { get; set; }
|
||||
public string Town { get; set; }
|
||||
public string Country { get; set; }
|
||||
}
|
||||
|
||||
We will use this class to map our table data to an c# class, which we can return as json later.
|
||||
|
||||
Now we need the `GetAll()` method which returns a collection of people, insert this inside the PersonApiController class:
|
||||
|
||||
public IEnumerable<Person> GetAll()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
Inside the GetAll() method, we now write a bit of code, that connects to the database, creates a query and returns the data, mapped to the `Person` class above:
|
||||
|
||||
//get the database
|
||||
var db = UmbracoContext.Application.DatabaseContext.Database;
|
||||
//build a query to select everything the people table
|
||||
var query = new Sql().Select("*").From("people");
|
||||
//fetch data from DB with the query and map to Person object
|
||||
return db.Fetch<Person>(query);
|
||||
|
||||
We are now done with the server side of things, with the file saved in app_code you can now open the Url: /umbraco/My/PersonApi/GetAll
|
||||
|
||||
This will return our json code.
|
||||
|
||||
##Create a Person Resource
|
||||
Now that we have the serverside in place, and a Url to call, we will setup a service to retrieve our data. As an Umbraco specific convention, we call these services a *resource, so we always have an indication what services fetch data from the DB.
|
||||
|
||||
Create a new file as `person.resource.js` and add:
|
||||
|
||||
//adds the resource to umbraco.resources module:
|
||||
angular.module('umbraco.resources').factory('personResource',
|
||||
function($q, $http) {
|
||||
//the factory object returned
|
||||
return {
|
||||
//this cals the Api Controller we setup earlier
|
||||
getAll: function () {
|
||||
return $http.get("My/PersonApi/GetAll");
|
||||
}
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
This uses the standard angular factory pattern, so we can now inject this into any of our controllers under the name `personResource`.
|
||||
|
||||
the getAll method just returns a $http.get call, which handles calling the url, and will return the data when its ready.
|
||||
|
||||
##Create the view and controller
|
||||
We will now finally setup a new view and controller, which follows previous tutorials, so have refer to those for more details:
|
||||
|
||||
####the view:
|
||||
|
||||
<div ng-controller="My.PersonPickerController">
|
||||
<ul>
|
||||
<li ng-repeat="person in people">
|
||||
<a href ng-click="model.value = person.Name">{{person.Name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
####The controller:
|
||||
|
||||
angular.module("umbraco")
|
||||
.controller("My.PersonPickerController", function($scope, personResource){
|
||||
personResource.getAll().then(function(response){
|
||||
$scope.people = response.data;
|
||||
});
|
||||
});
|
||||
|
||||
##The flow
|
||||
So with all these bits in place, all you need to do is register the property editor in a package.manifest - have a look at the first tutorial in this series. You will need to tell the package to load both your personpicker.controller.js and the person.resource.js file on app start.
|
||||
|
||||
With this, the entire flow is:
|
||||
|
||||
1. the view renders a list of people with a controller
|
||||
2. the controller asks the personResource for data
|
||||
3. the personResource returns a promise and asks the /my/PersonAPI api controller
|
||||
4. The apicontroller queries the database, which returns the data as strongly typed Person objects
|
||||
5. the api controller returns those `Person` objects as json to the resource
|
||||
6. the resource resolve the promise
|
||||
7. the controller populates the view
|
||||
|
||||
Easy huh? - honestly tho, there is a good amount of things to keep track of, but each component is tiny and flexible.
|
||||
|
||||
##Wrap-up
|
||||
The important part of the above is the way you create an `ApiController` call the database for your own data, and finally expose the data to angular as a service using $http.
|
||||
|
||||
For simplicity, you could also have skipped the service part, and just called $http directly in your controller, but by having your data in a service, it becomes a reusable resource for your entire application.
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@ For cases like this, a helper service is available: `imageHelper`. This utillity
|
||||
|
||||
So we get the image page from the selected media item, and return it through the callback:
|
||||
|
||||
var imagePropVal = imageHelper.getImagePropertyVaue({ imageModel: item, scope: $scope });
|
||||
var imagePropVal = imageHelper.getImagePropertyValue({ imageModel: item, scope: $scope });
|
||||
callback(imagePropVal);
|
||||
|
||||
Now when we run the markdown editor and click the image button, we are presented with a native umbraco dialog, listing the standard media archive.
|
||||
|
||||
@@ -31,6 +31,10 @@ How we make the editor configurable so it becomes flexible and reusable
|
||||
###{@link Intergrating-Services-With-PropertyEditor Intergrating services}
|
||||
How you can get access to all the standard services inside of Umbraco from your editor
|
||||
|
||||
###{@link Add-ServerSide-Data Adding serverside data}
|
||||
How you can return your own custom data from the server to a property editor
|
||||
through a ApiController
|
||||
|
||||
##Start developing
|
||||
|
||||
###{@link Source-Code-Structure how the source code is structured}
|
||||
|
||||
@@ -6,6 +6,7 @@ var app = angular.module('umbraco', [
|
||||
'umbraco.httpbackend',
|
||||
'ngCookies',
|
||||
'ngMobile',
|
||||
|
||||
/*'ui.sortable',*/
|
||||
'blueimp.fileupload'
|
||||
]);
|
||||
|
||||
@@ -30,7 +30,7 @@ angular.module("umbraco.directives")
|
||||
if(!hideheader){
|
||||
template +='<div>' +
|
||||
'<h5><a href="#{{section}}" class="root-link">{{tree.name}}</a></h5>' +
|
||||
'<a href class="umb-options" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(this, tree.root, $event)"><i></i><i></i><i></i></a>' +
|
||||
'<a href class="umb-options" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(this, tree.root, $event)" ng-swipe-right="options(this, tree.root, $event)"><i></i><i></i><i></i></a>' +
|
||||
'</div>';
|
||||
}
|
||||
template += '<ul>' +
|
||||
|
||||
@@ -30,7 +30,7 @@ angular.module("umbraco.directives")
|
||||
node:'='
|
||||
},
|
||||
|
||||
template: '<li><div ng-style="setTreePadding(node)" ng-class="{\'loading\': node.loading}">' +
|
||||
template: '<li ng-swipe-right="options(this, node, $event)"><div ng-style="setTreePadding(node)" ng-class="{\'loading\': node.loading}">' +
|
||||
'<ins ng-hide="node.hasChildren" style="background:none;width:18px;"></ins>' +
|
||||
'<ins ng-show="node.hasChildren" ng-class="{\'icon-navigation-right\': !node.expanded, \'icon-navigation-down\': node.expanded}" ng-click="load(this, node)"></ins>' +
|
||||
'<i title="#{{node.routePath}}" class="{{node.cssClass}}" style="{{node.style}}"></i>' +
|
||||
|
||||
@@ -81,16 +81,16 @@ angular.module('umbraco.services')
|
||||
var callback = options.callback;
|
||||
|
||||
//Modal dom obj and unique id
|
||||
var $modal = $('<div data-backdrop="false"></div>');
|
||||
var $modal = $('<div ng-swipe-left="hide()" ng-swipe-right="hide()" data-backdrop="false"></div>');
|
||||
var id = templateUrl.replace('.html', '').replace('.aspx', '').replace(/[\/|\.|:\&\?\=]/g, "-") + '-' + scope.$id;
|
||||
|
||||
if(options.inline){
|
||||
if(options.inline){
|
||||
animationClass = "";
|
||||
modalClass = "";
|
||||
}else{
|
||||
$modal.addClass("modal");
|
||||
$modal.addClass("hide");
|
||||
}
|
||||
}else{
|
||||
$modal.addClass("modal");
|
||||
$modal.addClass("hide");
|
||||
}
|
||||
|
||||
//set the id and add classes
|
||||
$modal
|
||||
|
||||
@@ -22,7 +22,6 @@ angular.module('umbraco.services')
|
||||
//TODO: would be nicer to set all of the options here first instead of implicitly below!
|
||||
var ui = {};
|
||||
$rootScope.$on("closeDialogs", function(){
|
||||
|
||||
});
|
||||
|
||||
function setMode(mode) {
|
||||
@@ -33,7 +32,7 @@ angular.module('umbraco.services')
|
||||
ui.showContextMenuDialog = false;
|
||||
ui.stickyNavigation = false;
|
||||
|
||||
$("#search-form input").focus();
|
||||
//$("#search-form input").focus();
|
||||
break;
|
||||
case 'menu':
|
||||
ui.showNavigation = true;
|
||||
@@ -67,6 +66,7 @@ angular.module('umbraco.services')
|
||||
var service = {
|
||||
active: false,
|
||||
mode: "default",
|
||||
touchDevice: false,
|
||||
ui: ui,
|
||||
|
||||
/**
|
||||
@@ -143,12 +143,15 @@ angular.module('umbraco.services')
|
||||
* Hides navigation tree, with a short delay, is cancelled if the user moves the mouse over the tree again
|
||||
*/
|
||||
leaveTree: function () {
|
||||
service.active = false;
|
||||
if(!service.touchDevice){
|
||||
service.active = false;
|
||||
|
||||
$timeout(function(){
|
||||
if(!service.active){
|
||||
service.hideTree();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -239,6 +242,7 @@ angular.module('umbraco.services')
|
||||
var selectedId = $routeParams.id;
|
||||
this.ui.currentNode = undefined;
|
||||
this.ui.actions = [];
|
||||
|
||||
setMode("tree");
|
||||
},
|
||||
|
||||
@@ -379,7 +383,7 @@ angular.module('umbraco.services')
|
||||
*
|
||||
* @description
|
||||
* hides the search pane
|
||||
*/
|
||||
*/
|
||||
hideSearch: function () {
|
||||
setMode("default-hidesearch");
|
||||
},
|
||||
@@ -392,14 +396,10 @@ angular.module('umbraco.services')
|
||||
* hides any open navigation panes and resets the tree, actions and the currently selected node
|
||||
*/
|
||||
hideNavigation: function () {
|
||||
|
||||
if(!service.active){
|
||||
this.ui.currentSection = "";
|
||||
this.ui.actions = [];
|
||||
this.ui.currentNode = undefined;
|
||||
|
||||
setMode("default");
|
||||
}
|
||||
this.ui.currentSection = "";
|
||||
this.ui.actions = [];
|
||||
this.ui.currentNode = undefined;
|
||||
setMode("default");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -77,7 +77,7 @@ angular.module('umbraco.services').factory('umbPropEditorHelper', umbPropEditorH
|
||||
function imageHelper() {
|
||||
return {
|
||||
/** Returns the actual image path associated with the image property if there is one */
|
||||
getImagePropertyVaue: function(options) {
|
||||
getImagePropertyValue: function(options) {
|
||||
if (!options && !options.imageModel) {
|
||||
throw "The options objet does not contain the required parameters: imageModel";
|
||||
}
|
||||
@@ -120,7 +120,7 @@ function imageHelper() {
|
||||
throw "The options objet does not contain the required parameters: imageModel";
|
||||
}
|
||||
|
||||
var imagePropVal = this.getImagePropertyVaue(options);
|
||||
var imagePropVal = this.getImagePropertyValue(options);
|
||||
if (imagePropVal !== "") {
|
||||
return this.getThumbnailFromPath(imagePropVal);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<link rel="stylesheet" href="assets/css/umbraco.css" />
|
||||
</head>
|
||||
|
||||
<body ng-controller="Umbraco.MainController" id="umbracoMainPageBody">
|
||||
<body ng-class="{touch:touchDevice}" ng-controller="Umbraco.MainController" id="umbracoMainPageBody">
|
||||
<div ng-hide="!authenticated" ng-cloak ng-animate="'fade'" id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
|
||||
<umb-navigation></umb-navigation>
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
|
||||
/* CONTAINS ALL HACKS AND OTHER QUICK-FIXES THAT WE MUST HANDLE BEFORE A RELEASE */
|
||||
|
||||
/*wft ms?*/
|
||||
*{ -ms-touch-action: none;}
|
||||
|
||||
.umbracoDialog{
|
||||
width: auto !Important;
|
||||
|
||||
@@ -45,11 +45,9 @@
|
||||
background: #2e8aea;
|
||||
border-color: #2e8aea;
|
||||
}
|
||||
|
||||
.umb-tree li.root div {
|
||||
padding-left: 20px
|
||||
}
|
||||
|
||||
.umb-tree * {
|
||||
white-space: nowrap
|
||||
}
|
||||
@@ -80,6 +78,7 @@
|
||||
padding: 5px 0 5px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.umb-tree a.noSpr {
|
||||
background-position: 0
|
||||
}
|
||||
@@ -162,6 +161,9 @@ li.root > div > a.umb-options {
|
||||
.hide-options a.umb-options{display: none !important}
|
||||
.hide-header h5{display: none !important}
|
||||
|
||||
|
||||
|
||||
|
||||
.umb-icon-item {
|
||||
padding: 2px;
|
||||
padding-left: 55px;
|
||||
@@ -294,13 +296,10 @@ li.root > div > a.umb-options {
|
||||
.umb-actions-child li a:hover .menuLabel small {
|
||||
text-decoration: none !important
|
||||
}
|
||||
|
||||
|
||||
.umb-actions-child i {
|
||||
font-size: 32px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.umb-actions-child li.add {
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
@@ -331,12 +330,16 @@ li.root > div > a.umb-options {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Loading Animation
|
||||
// ------------------------
|
||||
|
||||
.umb-tree li div.l{
|
||||
width:100%;
|
||||
height:1px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.umb-tree li div.l div, div.umb-loader{
|
||||
background-color: @blue;
|
||||
margin-top:0;
|
||||
@@ -443,3 +446,13 @@ height:1px;
|
||||
padding: 0px;
|
||||
border-bottom: 1px solid #efefef
|
||||
}
|
||||
|
||||
body.touch .umb-tree .icon{font-size: 17px;}
|
||||
body.touch .umb-tree ins{font-size: 20px; visibility: visible; padding: 7px;}
|
||||
body.touch .umb-tree li div {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ function ($scope, assetsService, dialogService, $log, imageHelper) {
|
||||
|
||||
dialogService.mediaPicker({ callback: function (data) {
|
||||
$(data.selection).each(function (i, item) {
|
||||
var imagePropVal = imageHelper.getImagePropertyVaue({ imageModel: item, scope: $scope });
|
||||
var imagePropVal = imageHelper.getImagePropertyValue({ imageModel: item, scope: $scope });
|
||||
callback(imagePropVal);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
*
|
||||
*/
|
||||
function MainController($scope, $routeParams, $rootScope, $timeout, $http, $log, notificationsService, userService, navigationService, legacyJsLoader) {
|
||||
//debugmode so I can easily turn on/off json output of property models:
|
||||
//TODO: find a better way
|
||||
$scope.$umbdebugmode = true;
|
||||
|
||||
//set default properties
|
||||
|
||||
//detect if the current device is touch-enabled
|
||||
$scope.touchDevice = ("ontouchstart" in window || window.touch || window.navigator.msMaxTouchPoints===5 || window.DocumentTouch && document instanceof DocumentTouch);
|
||||
navigationService.touchDevice = $scope.touchDevice;
|
||||
|
||||
//the null is important because we do an explicit bool check on this in the view
|
||||
//the avatar is by default the umbraco logo
|
||||
$scope.authenticated = null;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<div id='contextMenu' class="umb-modalcolumn fill shadow umb-panel"
|
||||
ng-swipe-left="nav.hideMenu()"
|
||||
ng-show="nav.ui.showContextMenu" ng-animate="'slide'">
|
||||
|
||||
<div class='umb-panel-header'>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<div id="leftcolumn" ng-controller="Umbraco.NavigationController" ng-mouseleave="nav.leaveTree()" ng-mouseenter="nav.enterTree()" >
|
||||
<div id="leftcolumn" ng-controller="Umbraco.NavigationController"
|
||||
ng-mouseleave="nav.leaveTree()" ng-mouseenter="nav.enterTree()" >
|
||||
<div id="applications" ng-class="{faded:nav.ui.stickyNavigation}">
|
||||
<ul class="sections">
|
||||
|
||||
@@ -32,7 +33,7 @@
|
||||
ng-show="nav.ui.showNavigation"
|
||||
ng-animate="'slide'">
|
||||
|
||||
<div class="navigation-inner-container span6">
|
||||
<div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container span6">
|
||||
<!-- the search -->
|
||||
<div id="search-form" ng-animate="'slide'">
|
||||
<div class="umb-panel-header">
|
||||
@@ -63,7 +64,6 @@
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
<div id="tree" class="umb-panel fill" ng-animate="'slide'">
|
||||
<umb-tree eventhandler="treeEventHandler" section="{{nav.ui.currentSection}}" ></umb-tree>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="offset6">
|
||||
@@ -80,6 +79,7 @@
|
||||
|
||||
<!-- Tree dialogs -->
|
||||
<div id="dialog" class='umb-modalcolumn fill shadow umb-panel'
|
||||
ng-swipe-left="nav.hideDialog()"
|
||||
ng-show="nav.ui.showContextMenuDialog" ng-animate="'slide'">
|
||||
<div class='umb-panel-header'>
|
||||
<h1>{{nav.ui.dialogTitle}}</h1>
|
||||
|
||||
@@ -21,7 +21,7 @@ angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController",
|
||||
|
||||
//shortcuts
|
||||
//TODO, do something better then this for searching
|
||||
img.src = imageHelper.getImagePropertyVaue({imageModel: media});
|
||||
img.src = imageHelper.getImagePropertyValue({imageModel: media});
|
||||
img.thumbnail = imageHelper.getThumbnailFromPath(img.src);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -28,13 +28,12 @@ angular.module("umbraco")
|
||||
dialogService.mediaPicker({scope: $scope, callback: function(img){
|
||||
|
||||
if(img){
|
||||
var imagePropVal = imageHelper.getImagePropertyVaue({imageModel: img, scope: $scope});
|
||||
var imagePropVal = imageHelper.getImagePropertyValue({imageModel: img, scope: $scope});
|
||||
var data = {
|
||||
src: (imagePropVal != null && imagePropVal != "") ? imagePropVal: "nothing.jpg",
|
||||
id: '__mcenew'
|
||||
};
|
||||
|
||||
$log.log(data);
|
||||
|
||||
editor.insertContent(editor.dom.createHTML('img', data));
|
||||
|
||||
@@ -48,7 +47,6 @@ angular.module("umbraco")
|
||||
editor.dom.setAttrib(imgElm, 'style', s);
|
||||
editor.dom.setAttrib(imgElm, 'rel', newSize.width + "," + newSize.height);
|
||||
editor.dom.setAttrib(imgElm, 'id', null);
|
||||
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
@@ -7,37 +7,37 @@ module.exports = function(karma) {
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
'lib/jquery/jquery-2.0.3.min.js',
|
||||
'lib/jquery/jquery-2.0.3.min.js',
|
||||
'lib/angular/1.1.5/angular.js',
|
||||
'lib/angular/1.1.5/angular-cookies.min.js',
|
||||
'lib/angular/1.1.5/angular-mocks.js',
|
||||
|
||||
'lib/angular/1.1.5/angular.js',
|
||||
'lib/angular/1.1.5/angular-cookies.min.js',
|
||||
'lib/angular/1.1.5/angular-mocks.js',
|
||||
/*
|
||||
For angular 1.2:
|
||||
'lib/angular/1.2/angular.js',
|
||||
'lib/angular/1.2/angular-route.min.js',
|
||||
'lib/angular/1.2/angular-touch.min.js',
|
||||
'lib/angular/1.2/angular-cookies.min.js',
|
||||
'lib/angular/1.2/angular-animate.min.js',
|
||||
'lib/angular/1.2/angular-mocks.js',*/
|
||||
|
||||
|
||||
/*
|
||||
For angular 1.2:
|
||||
'lib/angular/1.2/angular.js',
|
||||
'lib/angular/1.2/angular-route.min.js',
|
||||
'lib/angular/1.2/angular-touch.min.js',
|
||||
'lib/angular/1.2/angular-cookies.min.js',
|
||||
'lib/angular/1.2/angular-animate.min.js',
|
||||
'lib/angular/1.2/angular-mocks.js',
|
||||
*/
|
||||
'lib/underscore/underscore.js',
|
||||
'lib/umbraco/Extensions.js',
|
||||
'lib/yepnope/yepnope.min.js',
|
||||
|
||||
'lib/underscore/underscore.js',
|
||||
'lib/umbraco/Extensions.js',
|
||||
'lib/yepnope/yepnope.min.js',
|
||||
'test/config/app.unit.js',
|
||||
'src/common/mocks/umbraco.servervariables.js',
|
||||
|
||||
'test/config/app.unit.js',
|
||||
'src/common/mocks/umbraco.servervariables.js',
|
||||
|
||||
'src/common/directives/*.js',
|
||||
'src/common/filters/*.js',
|
||||
'src/common/services/*.js',
|
||||
'src/common/security/*.js',
|
||||
'src/common/resources/*.js',
|
||||
'src/common/mocks/resources/*.js',
|
||||
'src/views/**/*.controller.js',
|
||||
'test/unit/**/*.spec.js'
|
||||
'src/common/directives/*.js',
|
||||
'src/common/filters/*.js',
|
||||
'src/common/services/*.js',
|
||||
'src/common/security/*.js',
|
||||
'src/common/resources/*.js',
|
||||
'src/common/mocks/resources/*.js',
|
||||
'src/views/**/*.controller.js',
|
||||
'test/unit/**/*.spec.js',
|
||||
{pattern: 'lib/umbraco/namespacemanager.js', watched: true, served: true}
|
||||
],
|
||||
|
||||
// list of files to exclude
|
||||
@@ -63,7 +63,7 @@ module.exports = function(karma) {
|
||||
// level of logging
|
||||
// possible values: karma.LOG_DISABLE || karma.LOG_ERROR || karma.LOG_WARN || karma.LOG_INFO || karma.LOG_DEBUG
|
||||
// CLI --log-level debug
|
||||
logLevel: karma.LOG_INFO,
|
||||
logLevel: karma.LOG_DEBUG,
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
// CLI --auto-watch --no-auto-watch
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
// base path, that will be used to resolve files and exclude
|
||||
basePath = '../..';
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files = [
|
||||
JASMINE,
|
||||
JASMINE_ADAPTER,
|
||||
|
||||
'lib/jquery/jquery-2.0.3.min.js',
|
||||
'lib/angular/angular.min.js',
|
||||
'lib/angular/angular-cookies.min.js',
|
||||
'test/lib/angular/angular-mocks.js',
|
||||
'lib/umbraco/Extensions.js',
|
||||
'src/app_dev.js',
|
||||
'src/common/directives/*.js',
|
||||
'src/common/filters/*.js',
|
||||
'src/common/services/*.js',
|
||||
'src/common/security/*.js',
|
||||
'src/common/mocks/**/*.js',
|
||||
'src/views/**/*.controller.js',
|
||||
'test/unit/**/*.spec.js'
|
||||
];
|
||||
|
||||
plugins = [
|
||||
'karma-jasmine',
|
||||
'karma-chrome-launcher',
|
||||
'karma-phantomjs-launcher'
|
||||
];
|
||||
|
||||
// use dots reporter, as travis terminal does not support escaping sequences
|
||||
// possible values: 'dots' || 'progress'
|
||||
reporters = 'progress';
|
||||
|
||||
// these are default values, just to show available options
|
||||
|
||||
// web server port
|
||||
port = 8089;
|
||||
|
||||
// cli runner port
|
||||
runnerPort = 9109;
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors = true;
|
||||
|
||||
// level of logging
|
||||
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
|
||||
logLevel = LOG_INFO;
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch = false;
|
||||
|
||||
// polling interval in ms (ignored on OS that support inotify)
|
||||
autoWatchInterval = 0;
|
||||
|
||||
// Start these browsers, currently available:
|
||||
// - Chrome
|
||||
// - ChromeCanary
|
||||
// - Firefox
|
||||
// - Opera
|
||||
// - Safari
|
||||
// - PhantomJS
|
||||
browsers = ['PhantomJS'];
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, it capture browsers, run tests and exit
|
||||
singleRun = true;
|
||||
@@ -7,12 +7,10 @@ describe('keyboard service tests', function () {
|
||||
$rootScope = $injector.get('$rootScope');
|
||||
}));
|
||||
|
||||
|
||||
|
||||
describe('Loading js assets', function () {
|
||||
|
||||
it('Loads a javascript file', function () {
|
||||
assetsService.loadJs("NamespaceManager.js").then(function(){
|
||||
assetsService.loadJs("base/lib/umbraco/NamespaceManager.js").then(function(){
|
||||
console.log("loaded");
|
||||
});
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ function ($scope, assetsService, dialogService, $log, imageHelper) {
|
||||
|
||||
dialogService.mediaPicker({ callback: function (data) {
|
||||
$(data.selection).each(function (i, item) {
|
||||
var imagePropVal = imageHelper.getImagePropertyVaue({ imageModel: item, scope: $scope });
|
||||
var imagePropVal = imageHelper.getImagePropertyValue({ imageModel: item, scope: $scope });
|
||||
callback(imagePropVal);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user