forked from MacKentoch/easyFormGenerator
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathEasyFormGenerator-StepWay-DEMO.html
More file actions
192 lines (156 loc) · 8.37 KB
/
EasyFormGenerator-StepWay-DEMO.html
File metadata and controls
192 lines (156 loc) · 8.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en" ng-app="appDemo">
<head>
<title>Easy form generator</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Erwan Datin (MacKentoch)">
<!-- head dep. : all css -->
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootswatch/paper/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../animate.css/animate.min.css" rel="stylesheet">
<!--textAngular css is broken since 1.4.4-->
<!--<link href='../textAngular/dist/textAngular.css' rel='stylesheet'> -->
<!--use own to avoid bad surprise-->
<link href='../easy-form-generator/dist/css/eda.textAngular.min.css' rel='stylesheet'>
<link href='../angularjs-toaster/toaster.min.css' rel='stylesheet' >
<link href='../nya-bootstrap-select/dist/css/nya-bs-select.min.css' rel='stylesheet' >
<link href="../easy-form-generator/dist/css/eda.stepway.min.css" rel="stylesheet">
<head>
<body ng-controller="demoController as demoCtrl" ng-cloak>
<!-- navigation : just for decoration it is not easy form generator
=============================================================-->
<header id="pageHeader" >
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Easy form generator</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Switch language
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" ng-click="demoCtrl.switchLanguage('en')">English</a></li>
<li><a href="#" ng-click="demoCtrl.switchLanguage('fr')">French</a></li>
<li><a href="#" ng-click="demoCtrl.switchLanguage('es')">Spanish</a></li>
<li><a href="#" ng-click="demoCtrl.switchLanguage('de')">German</a></li>
<li><a href="#" ng-click="demoCtrl.switchLanguage('jp')">Japanese</a></li>
<li><a href="#" ng-click="demoCtrl.switchLanguage('tr')">Turkish</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="socialIcon" target="_blank" href="https://github.com/MacKentoch"><span class="text-center"><i class="fa fa-github"></i></span></a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- Easy form generator: Step Way -->
<eda-step-way-easy-form-gen
eda-easy-form-generator-model="demoCtrl.easyFormGeneratorModel"
eda-save-form-event="demoCtrl.saveForm(edaEasyFormGeneratorModel)">
</eda-step-way-easy-form-gen>
<!-- at the end of the body : all js -->
<script type="text/javascript" src="../angular/angular.min.js"></script>
<!-- YOUR APPLICATION WILL REPLACE THIS : -->
<script type="text/javascript">
(function(angular){
'use strict';
angular
.module('appDemo', ['eda.easyformGen.stepway'])
.config(configFct)
.controller('demoController', demoController);
/**
* config
*/
configFct.$inject = ['easyFormSteWayConfigProvider'];
function configFct(easyFormSteWayConfigProvider){
//example get current language (by default = english)
console.info('- from config - language is ' + easyFormSteWayConfigProvider.getCurrentLanguage());
//set language to french :
//easyFormSteWayConfigProvider.setLanguage('fr');
//show/hide preview panel => default is true
easyFormSteWayConfigProvider.showPreviewPanel(true);
//show/hide models in preview panel => default is true
easyFormSteWayConfigProvider.showPreviewModels(true);
}
/**
* controller
**/
demoController.$inject = ['$timeout', 'easyFormSteWayConfig'];
function demoController($timeout, easyFormSteWayConfig){
var demoCtrl = this;
demoCtrl.easyFormGeneratorModel = {}; // TIP : save a form then look at the console to get a better idea of this model
demoCtrl.saveForm = saveForm;
demoCtrl.currentLangue = refreshCurrentLanguage();
demoCtrl.switchLanguage = switchLanguage;
//get current language
console.info('Current language is ' + demoCtrl.currentLangue);
function switchLanguage(toLanguage){
if(angular.isString){
easyFormSteWayConfig.setLanguage(toLanguage);
refreshCurrentLanguage();
console.info('language changed to ' + demoCtrl.currentLangue);
}
}
function refreshCurrentLanguage(){
return easyFormSteWayConfig.getCurrentLanguage();
}
/**
* when click on save form, will call your save form function :
*/
function saveForm(easyFormGeneratorModel){
console.info('-> from here : you can save models to database (your controller)');
console.dir({
'What is it?' : 'this log shows you easy form returned model on save event',
'easyFormGeneratorModel' : easyFormGeneratorModel
});
}
}
/**
*
* MORE DETAILS ON 'easyFormGeneratorModel'
* ----------------------------------------
*
* easy form generator model properties:
*
* - formName : {string} (at save step you name your form)
* - btnSubmitText : {string} (if 'Submit' does not suits to you change submit button name)
* - btnCancelText : {string} (if 'Cancel' does not suits to you change cancel button name)
* - edaFieldsModel : {array} - easy form generator model that describe form
* - edaFieldsModelStringified : {string} - exactly same as edaFieldsModel it is just stringified
* - formlyFieldsModel : {object} - easy form generator model translate by itself 'edaFieldsModel' to 'angular formly fields model' -> usefull is you just need a formly directive
* - dataModel : {object} - this object is filled when filling form.
*/
})(angular);
</script>
<script type="text/javascript" src="../jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../easy-form-generator/dist/js/eda.stepway.min.js"></script>
<script type="text/javascript" src='../textAngular/dist/textAngular-rangy.min.js'></script>
<script type="text/javascript" src='../textAngular/dist/textAngular-sanitize.min.js'></script>
<script type="text/javascript" src='../textAngular/dist/textAngular.min.js'></script>
<script type="text/javascript" src='../lodash/lodash.min.js'></script>
<script type="text/javascript" src="../angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="../angular-translate/angular-translate.min.js"></script>
<script type="text/javascript" src="../angularjs-toaster/toaster.min.js"></script>
<script type="text/javascript" src="../nya-bootstrap-select/dist/js/nya-bs-select.min.js"></script>
<script type="text/javascript" src="../api-check/dist/api-check.min.js"></script>
<script type="text/javascript" src="../angular-formly/dist/formly.min.js"></script>
<script type="text/javascript" src="../angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script>
</body>
</html>