Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
Demos - minor refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@pdanis
pdanis committed Nov 14, 2012
1 parent 1bb0a30 commit dbbb865
Show file tree
Hide file tree
Showing 10 changed files with 220 additions and 145 deletions.
2 changes: 1 addition & 1 deletion demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<link rel="stylesheet" type="text/css" href="../dist/styles/ngx.min.css"/>
<link rel="stylesheet" type="text/css" href="styles/app.css"/>
</head>
<body ng-cloak ng-controller="ngxCtrl">
<body ng-cloak ng-controller="ngx">
<div class="header">
<div class="container">
<h1>NGX Library</h1>
Expand Down
70 changes: 65 additions & 5 deletions demos/scripts/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
(function(angular, window) {
'use strict';

/**
* Demo modules
* @type {Array}
*/
var modules = [
'ngx.ui.invalid',
'ngx.ui.validate',
Expand All @@ -18,8 +22,15 @@
'ngx.ui.addressInput'
];

/**
* Initialize application module
* @type {*}
*/
var app = angular.module('ngxDemoApp', ['ngx']);

/**
* Setup routes
*/
app.config(function($routeProvider) {
angular.forEach(modules, function(name) {
$routeProvider.when('/' + name, {
Expand All @@ -32,11 +43,17 @@
});
});

/**
* Startup
*/
app.run(function(ngxDictionary) {
ngxDictionary.setLanguage('en');
});

app.controller('ngxCtrl', function($scope, $route, $location) {
/**
* Main controller
*/
app.controller('ngx', function($scope, $route, $location) {
$scope.modules = modules;

$scope.$on('$routeChangeSuccess', function(event, route) {
Expand All @@ -47,6 +64,15 @@
$location.path('/' + m);
};

$scope.getContentClass = function() {
return ($scope.module ? $scope.module.replace(/\./g, '-') : '');
};
});

/**
* ngx.ui.checkboxlist demo controller
*/
app.controller('ngx.ui.checkboxlist', function($scope) {
$scope.checkboxlist = {
items: {
'bb': 'Backbone',
Expand All @@ -56,17 +82,50 @@
},
selected: ['ng', 'gc']
};
});

/**
* ngx.ui.hashtagInput demo controller
*/
app.controller('ngx.ui.hashtagInput', function($scope) {
$scope.hashtag = '#test';
});

/**
* ngx.ui.wwwInput demo controller
*/
app.controller('ngx.ui.wwwInput', function($scope) {
$scope.www = 'lmc.eu';
});

/**
* ngx.ui.wysiwyg demo controller
*/
app.controller('ngx.ui.wysiwyg', function($scope) {
$scope.wysiwyg = '<p>lorem ipsum <strong>strong</strong></p>';
});

/**
* ngx.ui.tagsInput demo controller
*/
app.controller('ngx.ui.tagsInput', function($scope) {
$scope.tags = ['tag1', 'tag2', 'tag3'];
});

/**
* ngx.ui.geomap demo controller
*/
app.controller('ngx.ui.geomap', function($scope) {
$scope.coords = {
lat: 50.1028650,
lon: 14.4568872
};
});

/**
* ngx.ui.dialog demo controller
*/
app.controller('ngx.ui.dialog', function($scope) {
$scope.dialog = {
input: undefined,
submit: function(inputValue, $dialog) {
Expand All @@ -77,11 +136,12 @@
$scope.dialog.input = undefined;
}
};
});

$scope.getContentClass = function() {
return ($scope.module ? $scope.module.replace(/\./g, '-') : '');
};

/**
* ngx.ui.validate demo controller
*/
app.controller('ngx.ui.validate', function($scope) {
$scope.validateEven = function(number) {
return (!number || ((number % 2) === 0));
};
Expand Down
34 changes: 18 additions & 16 deletions demos/templates/ngx.ui.checkboxlist.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<fieldset>
<legend>Example</legend>
<form name="form_checkboxList">
<label ng-repeat="(key, value) in checkboxlist.items" class="checkbox">
<input type="checkbox" name="checkbox" ng-model="checkboxlist.selected" value="{{key}}" ngx-checkboxlist min="1" max="3" />
{{value}}
</label>
<div ngx-invalid="form_checkboxList.checkbox min">
Check at least one item
</div>
<div ngx-invalid="form_checkboxList.checkbox max">
Check at most three items
</div>
</form>
</fieldset>
<pre>{{checkboxlist|json}}</pre>
<div ng-controller="ngx.ui.checkboxlist">
<fieldset>
<legend>Example</legend>
<form name="form_checkboxList">
<label ng-repeat="(key, value) in checkboxlist.items" class="checkbox">
<input type="checkbox" name="checkbox" ng-model="checkboxlist.selected" value="{{key}}" ngx-checkboxlist min="1" max="3" />
{{value}}
</label>
<div ngx-invalid="form_checkboxList.checkbox min">
Check at least one item
</div>
<div ngx-invalid="form_checkboxList.checkbox max">
Check at most three items
</div>
</form>
</fieldset>
<pre>{{checkboxlist|json}}</pre>
</div>
28 changes: 15 additions & 13 deletions demos/templates/ngx.ui.dialog.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<fieldset rel="ngxDialog">
<legend>Example</legend>
<a class="btn">open dialog</a>
<div ngx-dialog="" data-width="400" data-height="200" data-title="Dialog title"
data-onclose="dialog.onclose()" data-trigger="fieldset[rel=ngxDialog] > a">
<label>Dialog input:</label>
<input type="text" ng-model="dialog.input"/>
<div class="ngx-dialog-buttons">
<a class="btn btn-primary" ngx-dialog-button="dialog.submit(dialog.input, $dialog)" href="">submit</a>
<a class="btn" ngx-dialog-button="@close" href="">close</a>
</div>
</div>
</fieldset>
<div ng-controller="ngx.ui.dialog">
<fieldset rel="ngxDialog">
<legend>Example</legend>
<a class="btn">open dialog</a>
<div ngx-dialog="" data-width="400" data-height="200" data-title="Dialog title"
data-onclose="dialog.onclose()" data-trigger="fieldset[rel=ngxDialog] > a">
<label>Dialog input:</label>
<input type="text" ng-model="dialog.input"/>
<div class="ngx-dialog-buttons">
<a class="btn btn-primary" ngx-dialog-button="dialog.submit(dialog.input, $dialog)" href="">submit</a>
<a class="btn" ngx-dialog-button="@close" href="">close</a>
</div>
</div>
</fieldset>
</div>
40 changes: 21 additions & 19 deletions demos/templates/ngx.ui.geomap.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
<fieldset>
<legend>Seznam maps</legend>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Latitude:</label>
<div class="controls">
<input type="text" ng-model="coords.lat"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Longitude:</label>
<div class="controls">
<input type="text" ng-model="coords.lon"/>
</div>
</div>
</form>
<div ngx-geomap data-coords="{{coords.lat}},{{coords.lon}}" style="width: 500px; height: 200px; margin-top: 10px" id="map_canvas"></div>
</fieldset>
<pre>{{coords|json}}</pre>
<div ng-controller="ngx.ui.geomap">
<fieldset>
<legend>Seznam maps</legend>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Latitude:</label>
<div class="controls">
<input type="text" ng-model="coords.lat"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Longitude:</label>
<div class="controls">
<input type="text" ng-model="coords.lon"/>
</div>
</div>
</form>
<div ngx-geomap data-coords="{{coords.lat}},{{coords.lon}}" style="width: 500px; height: 200px; margin-top: 10px" id="map_canvas"></div>
</fieldset>
<pre>{{coords|json}}</pre>
</div>
28 changes: 15 additions & 13 deletions demos/templates/ngx.ui.hashtagInput.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<fieldset>
<legend>Example</legend>
<form name="form_hashtag" class="form-horizontal">
<label class="control-label">hashtag:</label>
<div class="controls">
<input type="text" ng-model="hashtag" ngx-hashtag-input name="hashtag"/>
<span ngx-invalid="form_hashtag.hashtag hashtag" class="help-inline">
Invalid hash tag
</span>
</div>
</form>
</fieldset>
<pre ng-show="hashtag">{{hashtag}}</pre>
<div ng-controller="ngx.ui.hashtagInput">
<fieldset>
<legend>Example</legend>
<form name="form_hashtag" class="form-horizontal">
<label class="control-label">hashtag:</label>
<div class="controls">
<input type="text" ng-model="hashtag" ngx-hashtag-input name="hashtag"/>
<span ngx-invalid="form_hashtag.hashtag hashtag" class="help-inline">
Invalid hash tag
</span>
</div>
</form>
</fieldset>
<pre ng-show="hashtag">{{hashtag}}</pre>
</div>
22 changes: 12 additions & 10 deletions demos/templates/ngx.ui.tagsInput.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<fieldset>
<legend>Example</legend>
<form name="form_tagsInput">
<label>Tags:</label>
<input type="text" name="tags" ngx-tags-input="" min="1" ng-model="tags"
autocomplete-source="['php', 'angular', 'javascript', 'google', 'backbone', 'closure']" autocomplete-min-length="1">
<div ngx-invalid="form_tagsInput.tags min">At least one tag is required</div>
</form>
</fieldset>
<pre>{{tags}}</pre>
<div ng-controller="ngx.ui.tagsInput">
<fieldset>
<legend>Example</legend>
<form name="form_tagsInput">
<label>Tags:</label>
<input type="text" name="tags" ngx-tags-input="" min="1" ng-model="tags"
autocomplete-source="['php', 'angular', 'javascript', 'google', 'backbone', 'closure']" autocomplete-min-length="1">
<div ngx-invalid="form_tagsInput.tags min">At least one tag is required</div>
</form>
</fieldset>
<pre>{{tags}}</pre>
</div>
Loading

0 comments on commit dbbb865

Please sign in to comment.