Skip to content

Commit d4527ac

Browse files
vitaletsvitalets
committed
build 0.1.6 prod
1 parent 013da9b commit d4527ac

File tree

9 files changed

+199
-34
lines changed

9 files changed

+199
-34
lines changed

‎dist/css/xeditable.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/xeditable.js‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,44 @@ angular.module('xeditable').directive('editableCheckbox', ['editableDirectiveFac
8282
}
8383
});
8484
}]);
85+
/*
86+
Input types: text|email|tel|number|url|search|color|date|datetime|time|month|week
87+
*/
88+
89+
(function() {
90+
91+
var types = 'text|email|tel|number|url|search|color|date|datetime|time|month|week'.split('|');
92+
93+
//todo: datalist
94+
95+
// generate directives
96+
angular.forEach(types, function(type) {
97+
var directiveName = 'editable'+type.charAt(0).toUpperCase() + type.slice(1);
98+
angular.module('xeditable').directive(directiveName, ['editableDirectiveFactory',
99+
function(editableDirectiveFactory) {
100+
return editableDirectiveFactory({
101+
directiveName: directiveName,
102+
inputTpl: '<input type="'+type+'">'
103+
});
104+
}]);
105+
});
106+
107+
//`range` is bit specific
108+
angular.module('xeditable').directive('editableRange', ['editableDirectiveFactory',
109+
function(editableDirectiveFactory) {
110+
return editableDirectiveFactory({
111+
directiveName: 'editableRange',
112+
inputTpl: '<input type="range" id="range" name="range">',
113+
render: function() {
114+
this.parent.render.call(this);
115+
this.inputEl.after('<output>{{$data}}</output>');
116+
}
117+
});
118+
}]);
119+
120+
}());
121+
122+
85123
//select
86124
angular.module('xeditable').directive('editableSelect', ['editableDirectiveFactory',
87125
function(editableDirectiveFactory) {
@@ -98,14 +136,6 @@ angular.module('xeditable').directive('editableSelect', ['editableDirectiveFacto
98136
}
99137
});
100138
}]);
101-
//text
102-
angular.module('xeditable').directive('editableText', ['editableDirectiveFactory',
103-
function(editableDirectiveFactory) {
104-
return editableDirectiveFactory({
105-
directiveName: 'editableText',
106-
inputTpl: '<input type="text">'
107-
});
108-
}]);
109139
//textarea
110140
angular.module('xeditable').directive('editableTextarea', ['editableDirectiveFactory',
111141
function(editableDirectiveFactory) {
@@ -150,6 +180,10 @@ angular.module('xeditable').factory('editableController', ['$q', '$document', 'e
150180

151181
// bind click to body: cancel|submit editables
152182
$document.bind('click', function(e) {
183+
// ignore right/middle button click
184+
if (e.which !== 1) {
185+
return;
186+
}
153187

154188
var toCancel = [];
155189
var toSubmit = [];
@@ -505,11 +539,16 @@ angular.module('xeditable').factory('editableController', ['$q', '$document', 'e
505539

506540
// click - mark element as clicked to exclude in document click handler
507541
self.editorEl.bind('click', function(e) {
542+
// ignore right/middle button click
543+
if (e.which !== 1) {
544+
return;
545+
}
546+
508547
self.clicked = true;
509548
});
510549
};
511550

512-
//setWaiting
551+
// setWaiting
513552
self.setWaiting = function(value) {
514553
if (value) {
515554
//participate in waiting only if not disabled

‎dist/js/xeditable.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 99 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<li class="active"><a href="#">Home</a></li>
3838
<li><a href="https://github.com/vitalets/angular-xeditable">Github</a></li>
3939
</ul>
40-
<form class="navbar-form navbar-right"><a href="zip/angular-xeditable-0.1.6.zip" style="font-weight:bold" class="btn btn-primary"><span style="margin-right:10px" class="glyphicon glyphicon-save"></span>Download 0.1.6 ~ 13kb</a></form>
40+
<form class="navbar-form navbar-right"><a href="zip/angular-xeditable-0.1.6.zip" style="font-weight:bold" class="btn btn-primary"><span style="margin-right:10px" class="glyphicon glyphicon-save"></span>Download 0.1.6 ~ 15kb</a></form>
4141
<div style="padding-top: 13px">
4242
<!-- google+ -->
4343
<div id="socials" style="text-align: center">
@@ -100,6 +100,7 @@
100100
<li><a href="#select-remote">Select remote</a></li>
101101
<li><a href="#select-multiple">Select multiple</a></li>
102102
<li><a href="#select-nobuttons">Select no buttons</a></li>
103+
<li><a href="#html5-inputs">HTML5 inputs</a></li>
103104
<li><a href="#textarea">Textarea</a></li>
104105
<li><a href="#checkbox">Checkbox</a></li>
105106
<li><a href="#bsdate">Date</a></li>
@@ -161,11 +162,12 @@ <h4>Controls & Features</h4>
161162
<table style="width: 50%; min-width: 200px">
162163
<tr>
163164
<td style="width: 50%; vertical-align: top"><ul>
164-
<li><a href="#text-simple">text</a></li>
165+
<li><a href="#text-simple">text</a> </li>
165166
<li><a href="#textarea">textarea</a></li>
166167
<li><a href="#select-local">select</a></li>
167168
<li><a href="#bsdate">date</a></li>
168169
<li><a href="#bstime">time</a></li>
170+
<li><a href="#html5-inputs">html5 inputs</a> </li>
169171
<li><a href="#typeahead">typeahead</a></li>
170172
</ul>
171173

@@ -232,8 +234,7 @@ <h3>demo</h3><a href="http://jsfiddle.net/NfPcH/25/" target="_blank" class="btn
232234
<a href="#" editable-text="user.name">{{ user.name || 'empty' }}</a>
233235
</div></div>
234236
<pre>{{ debug["text-simple"] | json }}</pre>
235-
<p><p>To make element editable via textbox just add <code>editable-text</code> attribute
236-
pointing to model in scope.</p>
237+
<p><p>To make element editable via textbox just add <code>editable-text=&quot;model.field&quot;</code> attribute.</p>
237238
</p>
238239
<!--script(src=dir+'/controller.js')-->
239240
<script>app.controller('TextSimpleCtrl', function($scope) {
@@ -563,6 +564,92 @@ <h3>controller.js</h3>
563564
var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
564565
return ($scope.user.status &amp;&amp; selected.length) ? selected[0].text : 'Not set';
565566
};
567+
});</pre>
568+
</section>
569+
<section id="html5-inputs">
570+
<h1>HTML5 inputs</h1>
571+
<!-- watch change of user to update rootScope for debugging-->
572+
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/77/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
573+
<div class="well line-example"><div ng-controller="Html5InputsCtrl">
574+
<div>Email: <a href="#" editable-email="user.email">{{ user.email || 'empty' }}</a></div>
575+
<div>Tel: <a href="#" editable-tel="user.tel" e-pattern="\d{3}\-\d{2}\-\d{2}" e-title="xxx-xx-xx">{{ user.tel || 'empty' }}</a></div>
576+
<div>Number: <a href="#" editable-number="user.number" e-min="18">{{ user.number || 'empty' }}</a></div>
577+
<div>Range: <a href="#" editable-range="user.range" e-step="5">{{ user.range || 'empty' }}</a></div>
578+
<div>Url: <a href="#" editable-url="user.url">{{ user.url || 'empty' }}</a></div>
579+
<div>Search: <a href="#" editable-search="user.search">{{ user.search || 'empty' }}</a></div>
580+
<div>Color: <a href="#" editable-color="user.color">{{ user.color || 'empty' }}</a></div>
581+
<div>Date: <a href="#" editable-date="user.date">{{ user.date || 'empty' }}</a></div>
582+
<div>Time: <a href="#" editable-time="user.time">{{ user.time || 'empty' }}</a></div>
583+
<div>Datetime: <a href="#" editable-datetime="user.datetime">{{ user.datetime || 'empty' }}</a></div>
584+
<div>Month: <a href="#" editable-month="user.month">{{ user.month || 'empty' }}</a></div>
585+
<div>Week: <a href="#" editable-week="user.week">{{ user.week || 'empty' }}</a></div>
586+
</div></div>
587+
<pre>{{ debug["html5-inputs"] | json }}</pre>
588+
<p><p>Following HTML5 types are supported via <code>editable-xxx</code> directive:</p>
589+
<ul>
590+
<li>email</li>
591+
<li>tel</li>
592+
<li>number</li>
593+
<li>search</li>
594+
<li>range</li>
595+
<li>url</li>
596+
<li>color</li>
597+
<li>date</li>
598+
<li>datetime</li>
599+
<li>time</li>
600+
<li>month</li>
601+
<li>week</li>
602+
</ul>
603+
<p>Please <a href="http://caniuse.com/">check browser support</a> before using particular type in your project.</p>
604+
</p>
605+
<!--script(src=dir+'/controller.js')-->
606+
<script>app.controller('Html5InputsCtrl', function($scope) {
607+
$scope.user = {
608+
email: '[email protected]',
609+
tel: '123-45-67',
610+
number: 29,
611+
range: 10,
612+
url: 'http://example.com',
613+
search: 'blabla',
614+
color: '#6a4415',
615+
date: null,
616+
time: '12:30',
617+
datetime: null,
618+
month: null,
619+
week: null
620+
};
621+
$scope.$watch("user", function(v) { $scope.$parent.debug["html5-inputs"]=v; }); });</script>
622+
<h3>html</h3>
623+
<pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;Html5InputsCtrl&quot;&gt;
624+
&lt;div&gt;Email: &lt;a href=&quot;#&quot; editable-email=&quot;user.email&quot;&gt;{{ user.email || 'empty' }}&lt;/a&gt;&lt;/div&gt;
625+
&lt;div&gt;Tel: &lt;a href=&quot;#&quot; editable-tel=&quot;user.tel&quot; e-pattern=&quot;\d{3}\-\d{2}\-\d{2}&quot; e-title=&quot;xxx-xx-xx&quot;&gt;{{ user.tel || 'empty' }}&lt;/a&gt;&lt;/div&gt;
626+
&lt;div&gt;Number: &lt;a href=&quot;#&quot; editable-number=&quot;user.number&quot; e-min=&quot;18&quot;&gt;{{ user.number || 'empty' }}&lt;/a&gt;&lt;/div&gt;
627+
&lt;div&gt;Range: &lt;a href=&quot;#&quot; editable-range=&quot;user.range&quot; e-step=&quot;5&quot;&gt;{{ user.range || 'empty' }}&lt;/a&gt;&lt;/div&gt;
628+
&lt;div&gt;Url: &lt;a href=&quot;#&quot; editable-url=&quot;user.url&quot;&gt;{{ user.url || 'empty' }}&lt;/a&gt;&lt;/div&gt;
629+
&lt;div&gt;Search: &lt;a href=&quot;#&quot; editable-search=&quot;user.search&quot;&gt;{{ user.search || 'empty' }}&lt;/a&gt;&lt;/div&gt;
630+
&lt;div&gt;Color: &lt;a href=&quot;#&quot; editable-color=&quot;user.color&quot;&gt;{{ user.color || 'empty' }}&lt;/a&gt;&lt;/div&gt;
631+
&lt;div&gt;Date: &lt;a href=&quot;#&quot; editable-date=&quot;user.date&quot;&gt;{{ user.date || 'empty' }}&lt;/a&gt;&lt;/div&gt;
632+
&lt;div&gt;Time: &lt;a href=&quot;#&quot; editable-time=&quot;user.time&quot;&gt;{{ user.time || 'empty' }}&lt;/a&gt;&lt;/div&gt;
633+
&lt;div&gt;Datetime: &lt;a href=&quot;#&quot; editable-datetime=&quot;user.datetime&quot;&gt;{{ user.datetime || 'empty' }}&lt;/a&gt;&lt;/div&gt;
634+
&lt;div&gt;Month: &lt;a href=&quot;#&quot; editable-month=&quot;user.month&quot;&gt;{{ user.month || 'empty' }}&lt;/a&gt;&lt;/div&gt;
635+
&lt;div&gt;Week: &lt;a href=&quot;#&quot; editable-week=&quot;user.week&quot;&gt;{{ user.week || 'empty' }}&lt;/a&gt;&lt;/div&gt;
636+
&lt;/div&gt;</pre>
637+
<h3>controller.js</h3>
638+
<pre class="prettyprint">app.controller('Html5InputsCtrl', function($scope) {
639+
$scope.user = {
640+
email: '[email protected]',
641+
tel: '123-45-67',
642+
number: 29,
643+
range: 10,
644+
url: 'http://example.com',
645+
search: 'blabla',
646+
color: '#6a4415',
647+
date: null,
648+
time: '12:30',
649+
datetime: null,
650+
month: null,
651+
week: null
652+
};
566653
});</pre>
567654
</section>
568655
<section id="textarea">
@@ -974,7 +1061,7 @@ <h3>controller.js</h3>
9741061
<section id="editable-form">
9751062
<h1>Editable form</h1>
9761063
<!-- watch change of user to update rootScope for debugging-->
977-
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/60/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
1064+
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/81/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
9781065
<div class="well line-example"><div ng-controller="EditableFormCtrl">
9791066
<form editable-form name="editableForm" onaftersave="saveUser()">
9801067
<div>
@@ -999,7 +1086,7 @@ <h3>demo</h3><a href="http://jsfiddle.net/NfPcH/60/" target="_blank" class="btn
9991086
</span>
10001087
</div>
10011088

1002-
<div>
1089+
<div class="buttons">
10031090
<!-- button to show form -->
10041091
<button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
10051092
Edit
@@ -1137,7 +1224,7 @@ <h3>html</h3>
11371224
&lt;/span&gt;
11381225
&lt;/div&gt;
11391226

1140-
&lt;div&gt;
1227+
&lt;div class=&quot;buttons&quot;&gt;
11411228
&lt;!-- button to show form --&gt;
11421229
&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;editableForm.$show()&quot; ng-show=&quot;!editableForm.$visible&quot;&gt;
11431230
Edit
@@ -1210,7 +1297,7 @@ <h3>controller.js</h3>
12101297
<section id="editable-row">
12111298
<h1>Editable row</h1>
12121299
<!-- watch change of user to update rootScope for debugging-->
1213-
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/62/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
1300+
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/79/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
12141301
<div class="well line-example"><div ng-controller="EditableRowCtrl">
12151302
<table class="table table-bordered table-hover table-condensed">
12161303
<tr style="font-weight: bold">
@@ -1448,9 +1535,9 @@ <h3>controller.js</h3>
14481535
<section id="editable-column">
14491536
<h1>Editable column</h1>
14501537
<!-- watch change of user to update rootScope for debugging-->
1451-
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/45/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
1538+
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/80/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
14521539
<div class="well line-example"><div ng-controller="EditableColumnCtrl">
1453-
<table class="table table-bordered table-hover table-condensed" style="width: 80%">
1540+
<table class="table table-bordered table-hover table-condensed">
14541541
<tr style="font-weight: bold; white-space: nowrap">
14551542

14561543
<!-- username header -->
@@ -1585,7 +1672,7 @@ <h3>demo</h3><a href="http://jsfiddle.net/NfPcH/45/" target="_blank" class="btn
15851672
});</script>
15861673
<h3>html</h3>
15871674
<pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;EditableColumnCtrl&quot;&gt;
1588-
&lt;table class=&quot;table table-bordered table-hover table-condensed&quot; style=&quot;width: 80%&quot;&gt;
1675+
&lt;table class=&quot;table table-bordered table-hover table-condensed&quot;&gt;
15891676
&lt;tr style=&quot;font-weight: bold; white-space: nowrap&quot;&gt;
15901677

15911678
&lt;!-- username header --&gt;
@@ -1719,7 +1806,7 @@ <h3>controller.js</h3>
17191806
<section id="editable-table">
17201807
<h1>Editable table</h1>
17211808
<!-- watch change of user to update rootScope for debugging-->
1722-
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/61/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
1809+
<h3>demo</h3><a href="http://jsfiddle.net/NfPcH/78/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
17231810
<div class="well line-example"><div ng-controller="EditableTableCtrl">
17241811
<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">
17251812

‎starter/angular-xeditable/css/xeditable.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)