Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit 614c7e3

Browse files
author
Dean Sofer
committed
Initial commit for tinymce setup
1 parent a1291d6 commit 614c7e3

File tree

11 files changed

+394
-0
lines changed

11 files changed

+394
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
components/
2+
node_modules/

‎.travis.yml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
language: node_js
2+
node_js:
3+
- "0.8"
4+
5+
before_install:
6+
- export DISPLAY=:99.0
7+
- sh -e /etc/init.d/xvfb start
8+
- npm install -g bower grunt-cli
9+
- npm install
10+
- bower install
11+
12+
script: "grunt"

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License
2+
3+
Copyright (c) 2012 the AngularUI Team, http://angular-ui.github.com
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# ui-date directive [![Build Status](https://travis-ci.org/angular-ui/ui-date.png)](https://travis-ci.org/angular-ui/ui-date)
2+
3+
This directive allows you to add a date-picker to your form elements.
4+
5+
# Requirements
6+
7+
- AngularJS
8+
- JQuery
9+
- JQueryUI
10+
- [Date.toISOString()](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/toISOString) (requires [polyfill](https://github.com/kriskowal/es5-shim/) for ≤IE8)
11+
12+
# Testing
13+
14+
We use testacular and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:
15+
16+
npm install -g grunt-cli
17+
npm install
18+
bower install
19+
grunt
20+
21+
The testacular task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in `test\test.config.js`
22+
23+
# Usage
24+
25+
We use [bower](http://twitter.github.com/bower/) for dependency management. Add
26+
27+
dependencies: {
28+
"angular-ui-date": "latest"
29+
}
30+
31+
To your `components.json` file. Then run
32+
33+
bower install
34+
35+
This will copy the ui-date files into your `components` folder, along with its dependencies. Load the script files in your application:
36+
37+
<script type="text/javascript" src="components/jquery/jquery.js"></script>
38+
<script type="text/javascript" src="components/jquery-ui\ui\jquery-ui.custom.js"></script>
39+
<script type="text/javascript" src="components/angular/angular.js"></script>
40+
<script type="text/javascript" src="components/angular-ui-date/date.js"></script>
41+
42+
Add the date module as a dependency to your application module:
43+
44+
var myAppModule = angular.module('MyApp', ['ui.date'])
45+
46+
Apply the directive to your form elements:
47+
48+
<input ui-date>
49+
50+
## Options
51+
52+
All the jQueryUI DatePicker options can be passed through the directive.
53+
54+
myAppModule.controller('MyController', function($scope) {
55+
$scope.dateOptions = {
56+
changeYear: true,
57+
changeMonth: true,
58+
yearRange: '1900:-0'
59+
};
60+
});
61+
62+
<input ui-date="dateOptions" name="DateOfBirth">
63+
64+
## Static Inline Picker
65+
66+
If you want a static picker then simply apply the directive to a div rather than an input element.
67+
68+
<div ui-date="dateOptions" name="DateOfBirth"></div>
69+
70+
## Working with ng-model
71+
72+
The ui-date directive plays nicely with ng-model and validation directives such as ng-required.
73+
74+
If you add the ng-model directive to same the element as ui-date then the picked date is automatically synchronized with the model value.
75+
76+
_The ui-date directive stores and expects the model value to be a standard javascript Date object._
77+
78+
## ui-date-format directive
79+
The ui-date directive only works with Date objects.
80+
If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive.
81+
This directive specifies the format of the date string that will be expected in the ng-model.
82+
The format string syntax is that defined by the JQueryUI Date picker. For example
83+
84+
<input ui-date ui-date-format="DD, d MM, yy" ng-model="myDate">
85+
86+
Now you can set myDate in the controller.
87+
88+
$scope.myDate = "Thursday, 11 October, 2012";
89+
90+
## ng-required directive
91+
92+
If you apply the required directive to element then the form element is invalid until a date is picked.
93+
94+
Note: Remember that the ng-required directive must be explictly set, i.e. to "true". This is especially true on divs:
95+
96+
<div ui-date="dateOptions" name="DateOfBirth" ng-required="true"></div>
97+
98+

‎component.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "angular-ui-date",
3+
"version": "0.0.2",
4+
"description": "This directive allows you to add a date-picker to your form elements.",
5+
"author": "https://github.com/angular-ui/ui-date/graphs/contributors",
6+
"license": "MIT",
7+
"homepage": "http://angular-ui.github.com",
8+
"main": "./ui-date.js",
9+
"ignore": [
10+
"**/.*",
11+
"node_modules",
12+
"components",
13+
"test*",
14+
"demo*",
15+
"gruntFile.js",
16+
"package.json"
17+
],
18+
"dependencies": {
19+
"angular": "~1.x",
20+
"tinymce": "latest"
21+
},
22+
"devDependencies": {
23+
"angular-mocks": "~1.x"
24+
}
25+
}

‎demo/demo.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5+
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
<title>AngularUI - Date Picker Demo</title>
10+
<base href=".."></base>
11+
<link rel="stylesheet" href="components/jquery-ui/themes/smoothness/jquery-ui.css">
12+
<script type="text/javascript" src="components/jquery/jquery.js"></script>
13+
<script type="text/javascript" src="components/jquery-ui/ui/jquery-ui.custom.js"></script>
14+
<script type="text/javascript" src="components/angular/angular.js"></script>
15+
<script type="text/javascript" src="src/date.js"></script>
16+
</head>
17+
<body ng-app="ui.date">
18+
<label>Select Date: <input type="text" ui-date ng-model="aDate"></label>
19+
<div>{{aDate}}</div>
20+
</body>
21+
</html>

‎gruntFile.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
module.exports = function (grunt) {
2+
3+
grunt.loadNpmTasks('grunt-testacular');
4+
grunt.loadNpmTasks('grunt-contrib-jshint');
5+
6+
// Default task.
7+
grunt.registerTask('default', ['jshint', 'testacular']);
8+
9+
var testacularConfig = function(configFile, customOptions) {
10+
var options = { configFile: configFile, keepalive: true };
11+
var travisOptions = process.env.TRAVIS && { browsers: ['Firefox'], reporters: 'dots' };
12+
return grunt.util._.extend(options, customOptions, travisOptions);
13+
};
14+
15+
// Project configuration.
16+
grunt.initConfig({
17+
testacular: {
18+
unit: {
19+
options: testacularConfig('test/test.conf.js')
20+
}
21+
},
22+
jshint:{
23+
files:['src/**/*.js', 'test/**/*.js', 'demo/**/*.js'],
24+
options:{
25+
curly:true,
26+
eqeqeq:true,
27+
immed:true,
28+
latedef:true,
29+
newcap:true,
30+
noarg:true,
31+
sub:true,
32+
boss:true,
33+
eqnull:true,
34+
globals:{}
35+
}
36+
}
37+
});
38+
39+
};

‎package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "angular-ui-date",
3+
"version": "0.0.2",
4+
"description": "This directive allows you to add a date-picker to your form elements.",
5+
"author": "https://github.com/angular-ui/ui-date/graphs/contributors",
6+
"license": "MIT",
7+
"homepage": "http://angular-ui.github.com",
8+
"main": "src/tinymce/date.js",
9+
"dependencies": {},
10+
"devDependencies": {
11+
"grunt": "~0.4.1",
12+
"grunt-testacular": "~0.3.0",
13+
"grunt-contrib-jshint": "~0.2.0"
14+
},
15+
"scripts": {},
16+
"repository": {
17+
"type": "git",
18+
"url": "git://github.com/angular-ui/ui-date.git"
19+
}
20+
}

‎src/tinymce.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* Binds a TinyMCE widget to <textarea> elements.
3+
*/
4+
angular.module('ui.directives').directive('uiTinymce', ['ui.config', function (uiConfig) {
5+
uiConfig.tinymce = uiConfig.tinymce || {};
6+
return {
7+
require: 'ngModel',
8+
link: function (scope, elm, attrs, ngModel) {
9+
var expression,
10+
options = {
11+
// Update model on button click
12+
onchange_callback: function (inst) {
13+
if (inst.isDirty()) {
14+
inst.save();
15+
ngModel.$setViewValue(elm.val());
16+
if (!scope.$$phase)
17+
scope.$apply();
18+
}
19+
},
20+
// Update model on keypress
21+
handle_event_callback: function (e) {
22+
if (this.isDirty()) {
23+
this.save();
24+
ngModel.$setViewValue(elm.val());
25+
if (!scope.$$phase)
26+
scope.$apply();
27+
}
28+
return true; // Continue handling
29+
},
30+
// Update model when calling setContent (such as from the source editor popup)
31+
setup: function (ed) {
32+
ed.onSetContent.add(function (ed, o) {
33+
if (ed.isDirty()) {
34+
ed.save();
35+
ngModel.$setViewValue(elm.val());
36+
if (!scope.$$phase)
37+
scope.$apply();
38+
}
39+
});
40+
}
41+
};
42+
if (attrs.uiTinymce) {
43+
expression = scope.$eval(attrs.uiTinymce);
44+
} else {
45+
expression = {};
46+
}
47+
angular.extend(options, uiConfig.tinymce, expression);
48+
setTimeout(function () {
49+
elm.tinymce(options);
50+
});
51+
}
52+
};
53+
}]);

‎test/test.conf.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
basePath = '..';
2+
files = [
3+
JASMINE,
4+
JASMINE_ADAPTER,
5+
'components/jquery/jquery.js',
6+
'components/jquery-ui/ui/jquery-ui.custom.js',
7+
'components/angular/angular.js',
8+
'components/angular-mocks/angular-mocks.js',
9+
'src/date.js',
10+
'test/*.spec.js'
11+
];
12+
singleRun = true;
13+
browsers = [ 'Chrome' ];

0 commit comments

Comments
 (0)