-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
187 lines (171 loc) · 8.85 KB
/
demo.html
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
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>Editables Demo Page</title>
<!-- Styles -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://bootswatch.com/spacelab/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<!-- Application Styles -->
<style>
.example
{
position: relative;
margin: 15px 0;
padding: 39px 19px 14px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.example:after
{
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
</style>
<!-- Javascript -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!-- Application JS -->
<script src="/components/demo/demo.js"></script>
<!-- Editables -->
<link href="/components/editables/editables.css" rel="stylesheet">
<script src="/components/editables/editables.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="/">Angular Editables</a>
<a href="https://github.com/Morgul/editables" class="btn btn-primary pull-right"><i class="icon-github"></i> View on Github</a>
</div>
</div>
<div class="content container">
<h2>What is this?</h2>
<p>
Angular Editables is a project thatis designed to fill a particular niche when working with AngularJS projects.
Specifically, it's all about turning html elements into editable inputs that are easy to bind to. This is similar
in concept to the <a href="">x-editables</a> project, with a few big exceptions:
</p>
<p>
<ul>
<li>Editables does not care what element you want to make editabled.</li>
<li>Editables is designed to work exclusively with AngularJS.</li>
<li>Editabled is tightly integrated with Bootstrap. <i>(This will change in the future.)</i></li>
<li>Editables uses <code>contenteditable</code> under the hood.</li>
</ul>
</p>
<p>
As with most libraries of this nature, Editables has been designed to scratch my particular itch, and isn't
necessarily the best general design possible. Still, it's here in case you find it useful. If you'd like
to improve the project, fix an issue you've found, or otherwise make changes, feel free to
<a href="https://github.com/Morgul/editables">fork it.</a>
</p>
<h2>Simple Example</h2>
<div class="example" ng-init="foobar='This is an editable. <b>Click it</b>. It won\'t bite.'">
<h3 editable="foobar">Type something here...</h3>
</div>
<p>
Click on the editable to edit it. As you can see, it works exactly as you'd expect. If you look at the
source, you'll notice that the contents of the element are used as placeholder text, when the editable's
value is empty. While this might be a little bit confusing, it means that you can have placeholder text,
as well as an initial value, by binding to a model that's already populated.
</p>
<p>
Even though this is the most basic case, it's already as usable as your normal input element.
</p>
<h2>Two-way binding</h2>
<div class="example">
<input class="input-xxlarge" type="text" placeholder="Type something here..." ng-model="test.val">
<h3 editable="test.val" type="line">Or here...</h3>
</div>
<p>
Editables are designed to work just like input elements, when it comes to binding them to models. Instead
of using <code>ng-model="foo"</code>, however, you simply pass the value to the editable directive:
<code>editable="foo</code>. This works just like you'd expect.
</p>
<p>
Play with both the input field, and the editable, to get a good feel for how the binding works.
</p>
<h2>Single-line</h2>
<div class="example">
<h3 editable="bar" type="line">Type here...</h3>
<div class="well">
{{ bar }}
</div>
</div>
<p>
By default, editables work like normal content editables, and support multi-line entry. However,
sometimes all you want is a single line entry. Editabled supports that too, by specifying
<code>type="line"</code>. See for yourself.
</p>
<h2>Toolbars</h2>
<div class="example">
<h3>WYSIWYG Editor Demo</h3>
<div style="min-height: 200px; border: 1px solid #aaa;" editable="tbars" toolbar="text-edit" type="text-area">Type here...</div>
</div>
<p>
Editables also supports toolbars to make specific types of editing easier. As you can see, we have a basic
WYSIWYG editor implemented. All you need to do is specify <code>toolbar="text-edit"</code>.
</p>
<p>
The toolbar functionality is central to my concept to Editables. As such, most of my future development
will be focused on adding user-defined toolbars, and expanding the list of built-in toolbars. (Currently,
the only toolbar is the 'text-edit'.)
</p>
<h2>Confirm</h2>
<div class="example">
<h3 editable="cfirm" type="line" toolbar confirm="true">Type here...</h3>
<div class="well">
{{ cfirm }}
</div>
</div>
<p>
While the two-way binding is very useful, it's not desirable in some situations. For those, you want to
specify <code>confirm="true"</code>, which will cause the editable to only submit when the save method
has been called. This isn't directly useful, without also including <code>toolbar</code> (no value
required).
</p>
<p>
With both included, Editables renders a toolbar with Save and Cancel buttons. When you hit Save, the
value of the editable is saved to the model, and the `save` message is emitted up the scope tree. If you
instead hit Cancel, the field is reverted, and the 'cancel' message is emitted up the scope tree. (<i>
Note: The <code>name</code> property of the element is passed as the only argument to these messages.
</i>)
</p>
<p>
Here's the WYSIWYG demo again, with confirm:
</p>
<div class="example">
<h3>WYSIWYG Editor Demo</h3>
<div style="min-height: 200px; border: 1px solid #aaa;" name="demo" editable="tbars2" toolbar="text-edit" type="text-area" confirm="true" onsave="save(name)">Type here...</div>
<br>
<div class="well">
<div ng-repeat="msg in msgs track by $id($index)">{{ msg }}</div>
</div>
</div>
<p>
This also demonstrates support for a custom save callback. Simply specify the <code>onsave</code> parameter,
setting it to an AngularJS expression. The <code>name</code> parameter is passed in, and can be referenced
by the expression.
</p>
</div>
<!-- I like space at the end of my page, and am also lazy. -->
<br>
<br>
</body>
</html>