Skip to content

Commit 59bddcf

Browse files
DervisevicDervisevic
committed
merge
2 parents 72f2c3a + a7b95c0 commit 59bddcf

File tree

1 file changed

+192
-18
lines changed

1 file changed

+192
-18
lines changed

‎examples/bootstrap-example.html‎

Lines changed: 192 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,34 @@
1111
<link rel="stylesheet" href="../bower_components/spectrum/spectrum.css">
1212

1313
<style type="text/css">
14+
.spinner {
15+
width: 35px;
16+
height: 35px;
17+
background-color: #333;
18+
19+
border-radius: 100%;
20+
-webkit-animation: scaleout 1.0s infinite ease-in-out;
21+
animation: scaleout 1.0s infinite ease-in-out;
22+
}
23+
24+
@-webkit-keyframes scaleout {
25+
0% { -webkit-transform: scale(0.0) }
26+
100% {
27+
-webkit-transform: scale(1.0);
28+
opacity: 0;
29+
}
30+
}
31+
32+
@keyframes scaleout {
33+
0% {
34+
transform: scale(0.0);
35+
-webkit-transform: scale(0.0);
36+
} 100% {
37+
transform: scale(1.0);
38+
-webkit-transform: scale(1.0);
39+
opacity: 0;
40+
}
41+
}
1442

1543
body,html {
1644
min-height: 1400px;
@@ -36,9 +64,81 @@
3664
font-size: 80%;
3765
}
3866

39-
</style>
67+
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
68+
display: none !important;
69+
}
70+
71+
.navbar-form > .form-group > .input-group {
72+
margin-left: 20px;
73+
}
74+
75+
.btn:active,
76+
.btn:focus,
77+
.btn.active {
78+
background-image: none;
79+
outline: 0;
80+
-webkit-box-shadow: none;
81+
box-shadow: none;
82+
}
83+
84+
.error {
85+
color: red;
86+
}
87+
88+
.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
89+
border-top-right-radius: 4px;
90+
border-bottom-right-radius: 4px;
91+
}
92+
93+
</style>
4094
</head>
41-
<body ng-app="test" ng-controller="TestCtrl">
95+
<body ng-app="test" ng-controller="TestCtrl" ng-cloak>
96+
<nav class="navbar navbar-default">
97+
<div class="container-fluid">
98+
<!-- Brand and toggle get grouped for better mobile display -->
99+
<div class="navbar-header">
100+
<a class="navbar-brand glyphicon glyphicon-home" href="/"></a>
101+
</div>
102+
103+
104+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
105+
<form class="navbar-form navbar-left" role="search">
106+
<div class="form-group">
107+
108+
<button class="btn btn-primary" ng-click="save();">Save to gist</button>
109+
110+
<div class="input-group" ng-show="navbarMode === 'default' && !error"></div>
111+
<div class="input-group" ng-show="navbarMode === 'loaded' && !error">
112+
<span ng-show="loadedData.user">Loaded configuration created by {{loadedData.user}} {{loadedData.created}}.</span>
113+
<div ng-show="!loadedData" class="spinner"></div>
114+
</div>
115+
116+
<div class="input-group" ng-show="navbarMode === 'saved' && savedGistData.url && !error">
117+
<div class="input-group-addon">Link</div>
118+
<input type="text" class="form-control" value="{{savedGistData.url}}">
119+
<span ng-if="hasFlash" class="input-group-btn">
120+
<button tooltip-trigger="focus" tooltip-placement="right" tooltip='Copied to clipboard' clip-copy="savedGistData.url" class="btn btn-default copy" type="button"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
121+
</span>
122+
</div>
123+
124+
<div class="input-group" ng-show="navbarMode === 'saved' && savedGistData.data.html_url && !error">
125+
<div class="input-group-addon">Gist</div>
126+
<input type="text" class="form-control" value="{{savedGistData.data.html_url}}">
127+
<span ng-if="hasFlash" class="input-group-btn">
128+
<button tooltip-trigger="focus" tooltip-placement="right" tooltip='Copied to clipboard' clip-copy="savedGistData.data.html_url" class="btn btn-default copy" type="button"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
129+
</span>
130+
</div>
131+
132+
<div class="input-group" ng-show="navbarMode === 'saved' && !savedGistData && !error">
133+
<div class="spinner"></div>
134+
</div>
135+
136+
<div class="input-group error" ng-show="error">{{error}}</div>
137+
</div>
138+
</form>
139+
</div><!-- /.navbar-collapse -->
140+
</div><!-- /.container-fluid -->
141+
</nav>
42142

43143
<div class="col-md-12">
44144
<h1><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></a> Schema Form Example</h1>
@@ -89,12 +189,25 @@ <h3>Schema</h3>
89189
</p>
90190
</div>
91191
</div>
192+
193+
<script type="text/ng-template" id="template/tooltip/tooltip-popup.html">
194+
<div class="tooltip {{placement}} {{class}}" ng-class="{ in: isOpen(), fade: animation() }">
195+
<div class="tooltip-arrow"></div>
196+
<div class="tooltip-inner" ng-bind="content"></div>
197+
</div>
198+
</script>
199+
92200
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
93201
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery.ui@1.10"></script>
94202
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
95203
<script type="text/javascript" src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
96204
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
97205
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
206+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
207+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
208+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ng-clip/0.2.6/ng-clip.min.js"></script>
209+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
210+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
98211
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> -->
99212
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-sanitize.min.js"></script> -->
100213

@@ -116,18 +229,19 @@ <h3>Schema</h3>
116229
<script type="text/javascript" src="../bower_components/angular-schema-form-datepicker/bootstrap-datepicker.min.js"></script>
117230
<script type="text/javascript" src="../bower_components/angular-schema-form-colorpicker/bootstrap-colorpicker.min.js"></script>
118231

119-
<!-- <script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
120-
<script type="text/javascript" src="../bower_components/tx-tinymce/tx-tinymce.js"></script>
121-
<script type="text/javascript" src="../bower_components/angular-schema-form-tinymce/bootstrap-tinymce.js"></script> -->
122-
123232
<script type="text/javascript">
124233
// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
125234
//
126235
// To test the tinymce addon, uncomment the files above and inject 'tx-tinymce' below.
127-
angular.module('test',['schemaForm','ui.ace']).controller('TestCtrl', function($scope,$http){
236+
/*global alert*/
237+
var app = angular.module('test', ['schemaForm', 'ui.ace', 'ngClipboard', 'ui.bootstrap.tooltip']);
238+
app.config(['ngClipProvider', function(ngClipProvider) {
239+
ngClipProvider.setPath('//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf');
240+
}]);
241+
app.controller('TestCtrl', function($scope, $http, $location) {
128242

129243
$scope.tests = [
130-
{ name: "Simple", data: 'data/simple.json' },
244+
//{ name: "Simple", data: 'data/simple.json' },
131245
{ name: "Basic JSON Schema Type", data: 'data/types.json' },
132246
{ name: "Bootstrap Grid", data: 'data/grid.json' },
133247
{ name: "Complex Key Support", data: 'data/complex-keys.json' },
@@ -138,17 +252,35 @@ <h3>Schema</h3>
138252
{ name: "Hack: Conditional required", data: 'data/conditional-required.json' },
139253
];
140254

255+
$scope.navbarMode = 'default';
256+
$scope.hasFlash = swfobject.hasFlashPlayerVersion('9');
257+
258+
// Load data from gist.
259+
if ($location.path().length > 4) {
260+
$scope.navbarMode = 'loaded';
261+
var gistId = $location.path().replace('/','');
262+
$scope.loading = true;
263+
$http.get('https://api.github.com/gists/' + gistId).success(function(res) {
264+
$scope.error = null;
265+
$scope.loadedData = {
266+
created: moment(res.created_at).fromNow(),
267+
user: res.user !== null ? res.user.login : 'Anonymous'
268+
}
269+
$scope.loading = false;
270+
$scope.schemaJson = res.files['schema.json'].content;
271+
$scope.formJson = res.files['form.json'].content;
272+
$scope.modelData = JSON.parse(res.files['model.json'].content);
273+
}).error(function() {
274+
$scope.loadedData = 'dummy';
275+
$scope.error = 'Failed to load gist.';
276+
});
277+
}
278+
141279
$scope.selectedTest = $scope.tests[0];
142280

143281
$scope.$watch('selectedTest',function(val){
144282
if (val) {
145-
$http.get(val.data).then(function(res){
146-
$scope.schema = res.data.schema;
147-
$scope.form = res.data.form;
148-
$scope.schemaJson = JSON.stringify($scope.schema,undefined,2);
149-
$scope.formJson = JSON.stringify($scope.form,undefined,2);
150-
$scope.modelData = res.data.model || {};
151-
});
283+
$http.get(val.data).then(function(res) {setNewData(res.data);});
152284
}
153285
});
154286

@@ -180,8 +312,16 @@ <h3>Schema</h3>
180312
}
181313
});
182314

315+
var setNewData = function(data) {
316+
$scope.schema = data.schema;
317+
$scope.form = data.form;
318+
$scope.schemaJson = JSON.stringify($scope.schema,undefined,2);
319+
$scope.formJson = JSON.stringify($scope.form,undefined,2);
320+
$scope.modelData = data.model || {};
321+
};
322+
183323
$scope.pretty = function(){
184-
return JSON.stringify($scope.modelData,undefined,2,2);
324+
return typeof $scope.modelData === 'string' ? $scope.modelData : JSON.stringify($scope.modelData, undefined, 2);
185325
};
186326

187327
$scope.log = function(msg){
@@ -196,14 +336,48 @@ <h3>Schema</h3>
196336
alert(msg);
197337
};
198338

199-
$scope.submitForm = function(form, model) {
339+
$scope.save = function() {
340+
// To be able to save invalid json and point out errors, we
341+
// don't save the schema/form but rather the ones in the input.
342+
343+
$scope.navbarMode = 'saved';
344+
345+
var gist = {
346+
"description": "A saved configuration for a schema form example, http://textalk.github.io/angular-schema-form/examples/bootstrap-example.html",
347+
"public": true,
348+
"files": {
349+
"schema.json": {
350+
"content": $scope.schemaJson
351+
},
352+
"form.json": {
353+
"content": $scope.formJson
354+
},
355+
"model.json": {
356+
"content": JSON.stringify($scope.modelData, undefined, 2)
357+
}
358+
}
359+
};
360+
361+
$http.post('https://api.github.com/gists', gist).success(function(data) {
362+
$scope.error = null;
363+
$location.path('/' + data.id);
364+
$scope.savedGistData = {
365+
data: data,
366+
url: $location.absUrl()
367+
};
368+
}).error(function() {
369+
$scope.error = 'Failed to save gist.';
370+
});
371+
};
372+
373+
$scope.submitForm = function(form) {
200374
// First we broadcast an event so all fields validate themselves
201375
$scope.$broadcast('schemaFormValidate');
202376
// Then we check if the form is valid
203377
if (form.$valid) {
204378
alert('You did it!');
205379
}
206-
}
380+
};
207381

208382
});
209383
// @license-end

0 commit comments

Comments
 (0)