├── Bootstrap
├── bootstrap-form
│ ├── README.md
│ ├── bootstrap-form.css
│ ├── bootstrap-form.js
│ ├── example.png
│ └── index.html
├── bootstrap-paginate
│ ├── README.md
│ └── bootstrap-paginate.js
├── bootstrap-twitter-follow
│ ├── README.md
│ ├── bootstrap-follow.js
│ └── index.html
└── bootstrap-wizard
│ ├── README.md
│ ├── bootstrap-wizard.css
│ └── bootstrap-wizard.js
├── README.md
├── jQuery
├── globalization
│ ├── README.md
│ └── jquery.globalization.js
└── serializeObject
│ ├── README.md
│ └── jquery.serializeObject.js
└── prototype
├── README.md
└── prototype.js
/Bootstrap/bootstrap-form/README.md:
--------------------------------------------------------------------------------
1 | # Form validator plugin for Bootstrap #
2 |
3 | This plugin verifies if the user doesn't write errors in the form field according to the Bootstrap styles.
4 | The form rules are defined with the HTML5 specifications.
5 |
6 | Here is an example which shows a form with all input types.
7 |
8 | Installation
9 | ------------
10 |
11 | First, to make it works, the following files have to be included.
12 |
13 |
21 | *Note : Files `bootstrap-form.css` and `bootstrap-form.js` are part of the plugin.*
22 |
23 | Launching
24 | ---------
25 |
26 | Next, the form validator plugin must launch.
27 |
28 |
35 |
36 | It is possible to specify options when the form is launched :
37 | * asterisk, boolean which print or not the asterisk for obligatory field, `true` ;
38 | * asteriskContent, string which is the asterisk content, `*`.
39 |
40 | Example
41 | -------
42 |
43 | To finish, in first part, here is a screen for a form example.
44 |
45 | 
46 |
47 | And, in second part, the form body with all HTML5 input types which built this example.
48 |
49 |
70 | If the user doesn't want to show an error on this input,
71 |
72 | - he mustn't let the empty field `required="required"` ;
73 | - he has to write letters or numbers `pattern="[A-Za-z0-9]*"`.
74 |
75 | Else, the error defined with `data-error="Please give a correct login."` appears.
76 |
77 | **Input password**
78 |
79 |
88 | If the user doesn't want to show an error on this input,
89 |
90 | - he mustn't let the empty field `required="required"`.
91 |
92 | Else, the error defined with `data-error="Please give a correct password."` appears.
93 |
94 | **Input email**
95 |
96 |
105 | If the user doesn't want to show an error on this input,
106 |
107 | - he has to write the email format `type="email"` ;
108 | - he mustn't let the empty field `required="required"`.
109 |
110 | Else, the error defined with `data-error="Please give a correct e-mail address."` appears.
111 |
112 |
135 | If the user doesn't want to show an error on this input,
136 |
137 | - he has to check one of all inputs `required="required"`.
138 |
139 | Else, the error defined with `data-error="Please check a gender."` appears.
140 |
141 | **Input date**
142 |
143 |
152 | If the user doesn't want to show an error on this input,
153 |
154 | - he has to write the date format `type="date"` ;
155 | - he mustn't let the empty field `required="required"`.
156 |
157 | Else, the error defined with `data-error="Please give a correct birth date."` appears.
158 |
159 | **TextArea**
160 |
161 |
182 | If the user doesn't want to show an error on this input,
183 |
184 | - he has to write the telephone number format `type="tel"`.
185 |
186 | Else, the error defined with `data-error="Please give a correct phone number."` appears.
187 |
188 | **Input url**
189 |
190 |
199 | If the user doesn't want to show an error on this input,
200 |
201 | - he has to write the website url format `type="url"`.
202 |
203 | Else, the error defined with `data-error="Please give a correct website url."` appears.
204 |
205 | **Input file**
206 |
207 |
217 | If the user doesn't want to show an error on this input,
218 |
219 | - he has to choose good files `type="file"` and `accept="image/jpeg, image/png"` ;
220 | - he mustn't let the empty field `required="required"`.
221 |
222 | Else, the error defined with `data-error="Please give an image with jpg or png format."` appears.
223 |
224 |
242 | If the user doesn't want to show an error on this input,
243 |
244 | - he has to choose good number `type="number"`, `min="0"` and `max="10"`.
245 |
246 | Else, the error defined with `data-error="Please give a correct computers number."` appears.
247 |
248 | **Input search**
249 |
250 |
288 | If the user doesn't want to show an error on this input,
289 |
290 | - he has to choose the asked number of all inputs `data-min="2"` and `data-min="4"`.
291 |
292 | Else, the error defined with `data-error="Please choose between two and four fruits."` appears.
293 |
294 | *Note : Tags `data-min` and `data-min` are specific tags for the form validator plugin.
295 | They impose a limit when the user has to make a multiple choice.*
296 |
297 | **Input checkbox**
298 |
299 |
325 | If the user doesn't want to show an error on this input,
326 |
327 | - he has to check the asked number of all inputs `data-min="1"` (see **Select Multiple**).
328 |
329 | Else, the error defined with `data-error="Please check at least one browser."` appears.
330 |
331 | **Input color**
332 |
333 |
384 | When the user submit the form whereas fields are empty, the request is not sent and the errors printed.
385 | If he clicks on Cancel, the form resets like to the beginning.
386 |
387 |
388 | </form>
389 |
--------------------------------------------------------------------------------
/Bootstrap/bootstrap-form/bootstrap-form.css:
--------------------------------------------------------------------------------
1 |
2 | div.tooltip.formInput {
3 | margin: -3px 0 0 20px;
4 | }
5 |
6 | div.tooltip.formOther {
7 | margin: -3px 0 0 0;
8 | }
9 |
--------------------------------------------------------------------------------
/Bootstrap/bootstrap-form/bootstrap-form.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Objet Direct - Form validator plugin for Bootstrap
3 | *
4 | * @property {boolean} asterisk Asterisk display status
5 | * @property {string} asteriskContent Content of the printed asterisk
6 | *
7 | * @requires ./docs/assets/css/bootstrap.css
8 | * @requires ./docs/assets/css/bootstrap-responsive.css
9 | * @requires ./docs/assets/js/jquery.js
10 | * @requires ./docs/assets/js/bootstrap-tooltip.js
11 | *
12 | * Here, there is an example that we can make with the formular validator
13 | * @example
14 | *
15 | *
16 | *
17 | * Form
18 | *
19 | *
24 | *
25 | *
26 | *
27 | *
28 | *
29 | *
34 | *
35 | *
36 | *
51 | *
52 | *
53 | * When the user submit the form,
54 | * if he lets an empty field because of the attribute 'required'
55 | * or he doesn't respect pattern because of the attribute 'pattern',
56 | * then the error from 'data-error' prints
57 | * and the cursor places to the first form error,
58 | * else the form is submited.
59 | *
60 | * Copyright 2012, David Wayntal
61 | * Dual licensed under the MIT or GPL Version 2 licenses.
62 | * http://www.opensource.org/licenses/mit-license.php/
63 | * http://www.opensource.org/licenses/gpl-license.php
64 | *
65 | * Includes bootstrap.js
66 | * http://twitter.github.com/bootstrap/
67 | * Copyright 2012, Objet Direct
68 | * Released under the MIT, BSD, and GPL Licenses.
69 | *
70 | * Date: 2012-07-09
71 | */
72 |
73 | ! function($) {
74 | // ----------------------------------------------------------------------------------------
75 | // FORM CLASS DEFINITION
76 | // ----------------------------------------------------------------------------------------
77 |
78 | /**
79 | * Constructor for my form validator plugin
80 | * @constructor
81 | * @param {HTMLFormElement} formElement DOM JavaScript element linked to a form tag
82 | * @param {Object} options Options for my plugin
83 | */
84 | var Form = function(formElement, options) {
85 | this.$form = $(formElement)
86 | this.options = $.extend({}, $.fn.form.defaults, options)
87 | }
88 |
89 | Form.prototype = {
90 | constructor : Form,
91 | main : function() {
92 | this.$form.attr('novalidate', 'novalidate');
93 | $('input, textearea, select', this.$form).each(function() {
94 | __createTooltip($(this));
95 | });
96 |
97 | printAsterisk.call(this);
98 | submitForm.call(this);
99 | resetForm.call(this);
100 | }
101 | }
102 |
103 | // ----------------------------------------------------------------------------------------
104 | // FORM CLASS PRIVATE METHODS
105 | // ----------------------------------------------------------------------------------------
106 |
107 | /**
108 | * Prints an asterisk for form required fields
109 | */
110 | function printAsterisk() {
111 | if (this.options.asterisk) {
112 | var self = this, jSelf, jParent;
113 |
114 | $('[required=required], [data-min], [data-max]', this.$form).each(function() {
115 | jSelf = $(this);
116 | jParent = jSelf.parent();
117 |
118 | if (jSelf.attr('type') == 'radio' || jSelf.attr('type') == 'checkbox') {
119 | jParent.find('label').append(self.options.asteriskContent);
120 |
121 | } else {
122 | jParent.append(self.options.asteriskContent);
123 | }
124 | });
125 | }
126 | }
127 |
128 | /**
129 | * Submits the form when the user clicks
130 | */
131 | function submitForm() {
132 | var self = this, jWindow = $(window), allVerified, jSubmit;
133 | this.$form.submit(function(event) {
134 | allVerified = allInputVerification.call(self);
135 |
136 | jSubmit = self.$form.find('[type=submit]');
137 | jSubmit.removeClass('btn-danger');
138 |
139 | if (!allVerified) {
140 | event.preventDefault();
141 | event.stopPropagation();
142 | event.stopImmediatePropagation();
143 |
144 | $(':invalid', self.$form).first().focus().select().get(0).scrollIntoView(true);
145 | jWindow.scrollTop(jWindow.scrollTop() - jWindow.height() / 2);
146 | jSubmit.addClass('btn-danger');
147 | }
148 | });
149 | }
150 |
151 | /**
152 | * Resets all form fields with its styles
153 | */
154 | function resetForm() {
155 | var self = this;
156 |
157 | $('[type=reset]', this.$form).click(function() {
158 | $('[type=submit]', self.$form).removeClass('btn-success btn-danger');
159 | $('.control-group', self.$form).removeClass('success error');
160 | $('input, textearea, select', self.$form).each(function() {
161 | __hideTooltip($(this));
162 | });
163 | });
164 | }
165 |
166 | /**
167 | * Verifies all form fields
168 | * @return {boolean} Fields status, if they are correct or not
169 | */
170 | function allInputVerification() {
171 | var result = true, self = this;
172 | var marginLeft, min, max;
173 | $(':valid', self.$form).each(function() {
174 | validInput($(this));
175 | });
176 |
177 | var jSelf;
178 | $(':valid', self.$form).each(function() {
179 | jSelf = $(this);
180 | min = ((jSelf.attr('data-min')) && (!minInputVerification(jSelf)));
181 | max = ((jSelf.attr('data-max')) && (!maxInputVerification(jSelf)));
182 | if ((min && max) || (min) || (max)) {
183 | invalidInput(jSelf);
184 | result = false;
185 | }
186 | });
187 |
188 | $(':invalid', self.$form).each(function() {
189 | invalidInput($(this));
190 | result = false;
191 | });
192 | return result;
193 | }
194 |
195 | /**
196 | * Counts the field number which are selected by the user
197 | * @param {HTMLFormElement} jElt DOM JavaScript element selected
198 | */
199 | function countMultipleSelection(jElt) {
200 | var n;
201 | if ((jElt.attr('multiple')) && (jElt.val())) {
202 | n = jElt.val().length;
203 |
204 | } else {
205 | n = $('form.form [name="' + jElt.attr('name') + '"]:checked').length;
206 | }
207 | return n;
208 | }
209 |
210 | /**
211 | * Verifies form fiels which has "data-min" attibute
212 | * @param {HTMLFormElement} jElt DOM JavaScript element to verify
213 | */
214 | function minInputVerification(jElt) {
215 | return (countMultipleSelection(jElt) >= jElt.attr('data-min'));
216 | }
217 |
218 | /**
219 | * Verifies form fiels which has "data-max" attibute
220 | * @param {HTMLFormElement} jElt DOM JavaScript element to verify
221 | */
222 | function maxInputVerification(jElt) {
223 | return (countMultipleSelection(jElt) <= jElt.attr('data-max'));
224 | }
225 |
226 | /**
227 | * Renders a valid input
228 | * @param {HTMLFormElement} jElt DOM JavaScript element to valid
229 | */
230 | function validInput(jElt) {
231 | __hideTooltip(jElt);
232 | printInputVerification(jElt.parent().parent(), true);
233 | }
234 |
235 | /**
236 | * Renders an invalid input
237 | * @param {HTMLFormElement} jElt DOM JavaScript element to invalid
238 | */
239 | function invalidInput(jElt) {
240 | __showTooltip(jElt);
241 | printInputVerification(jElt.parent().parent(), false);
242 | }
243 |
244 | /**
245 | * Prints verifications maked on form fields
246 | * @param {HTMLFormElement} jElt DOM JavaScript element which will change
247 | * @param {boolean} result Verification result status
248 | */
249 | function printInputVerification(jElt, result) {
250 | jElt.removeClass('success error').addClass( result ? 'success' : 'error');
251 | }
252 |
253 | /**
254 | * Gives the input element according to its type (radio, checkbox...)
255 | * @param {HTMLFormElement} jElt DOM JavaScript current element
256 | */
257 | function __giveElementTooltip(jElt) {
258 | if (jElt.attr('type') == 'radio' || jElt.attr('type') == 'checkbox') {
259 | return $("label[for='" + jElt.attr("id") + "']");
260 |
261 | } else {
262 | return jElt;
263 | }
264 | }
265 |
266 | /**
267 | * Creates a Bootstrap tooltip on an element
268 | * @param {HTMLFormElement} jElt DOM JavaScript element which will be linked
269 | */
270 | function __createTooltip(jElt) {
271 | var jDiv = $("");
272 | jDiv.text(jElt.attr('data-error'));
273 |
274 | $(__giveElementTooltip(jElt)).tooltip({
275 | placement : 'right',
276 | title : jDiv.html(),
277 | trigger : 'manual',
278 | template : '
224 |
225 |
226 |
--------------------------------------------------------------------------------
/Bootstrap/bootstrap-paginate/README.md:
--------------------------------------------------------------------------------
1 | # Paginate plugin for Bootstrap #
2 |
3 | This plugin offers the possibility to paginate.
4 |
5 | Installation
6 | ------------
7 |
8 | First, to make it works, the following files have to be included.
9 |
10 |
34 |
35 | It is possible to specify options when the follow button is launched :
36 | * login, string which is the user login pointed by the button, `twitter` ;
37 | * showLogin, boolean which prints or not the login, `true` ;
38 | * showSubscribe, boolean which prints or not the subscribe number, `false` ;
39 | * largeButton, boolean which changes the button width, `false` ;
40 | * language, string which is the button text language (en, fr, ...), `en`.
41 |
42 | Example
43 | -------
44 |
45 | To finish, here is an example to build two follow buttons.
46 |
47 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Bootstrap/bootstrap-wizard/README.md:
--------------------------------------------------------------------------------
1 | # Wizard plugin for Bootstrap #
2 |
3 | This plugin (based on the carousel) offers the possibility to have a wizard for Bootstrap.
4 |
5 | Installation
6 | ------------
7 |
8 | First, to make it works, the following files have to be included.
9 |
10 |
8 | <!-- Inject into the content -->
9 | <div data-translate="aProperty">A default text</div>
10 |
11 |
12 |
13 | <!-- Inject into the attribute -->
14 | <div data-translate="title:aProperty" title="A default title">A text</div>
15 |
16 |
17 |
18 | <!-- Inject into the attribute and the content -->
19 | <div data-translate="title:aProperty;anotherProperty" title="A default title">A default text</div>
20 |
21 |
22 | You can too retrieve the property manually:
23 |
24 | var text = $.translate.properties["aProperty"];
25 |
26 |
27 | ---
28 |
29 | ### The MIT License
30 |
31 | Copyright (c) <2012>
32 |
33 | Permission is hereby granted, free of charge, to any person obtaining a copy
34 | of this software and associated documentation files (the "Software"), to deal
35 | in the Software without restriction, including without limitation the rights
36 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
37 | copies of the Software, and to permit persons to whom the Software is
38 | furnished to do so, subject to the following conditions:
39 |
40 | The above copyright notice and this permission notice shall be included in
41 | all copies or substantial portions of the Software.
42 |
43 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
44 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
45 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
46 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
47 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
48 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
49 | THE SOFTWARE.
50 |
51 |
--------------------------------------------------------------------------------
/jQuery/globalization/jquery.globalization.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2012 (c) Objet Direct
3 | * Dual licensed under the MIT or GPL Version 2 licenses.
4 | *
5 | * Permission is hereby granted, free of charge, to any person obtaining
6 | * a copy of this software and associated documentation files (the
7 | * "Software"), to deal in the Software without restriction, including
8 | * without limitation the rights to use, copy, modify, merge, publish,
9 | * distribute, sublicense, and/or sell copies of the Software, and to
10 | * permit persons to whom the Software is furnished to do so, subject to
11 | * the following conditions:
12 | *
13 | * The above copyright notice and this permission notice shall be
14 | * included in all copies or substantial portions of the Software.
15 | *
16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 | *
24 | */
25 |
26 | /**
27 | * Plugin to put some globalizations
28 | */
29 | window.jQuery && (function($){
30 | if($.translate){
31 | // Already loaded ?
32 | return;
33 | }
34 |
35 | /**
36 | * Options
37 | */
38 | $.translate = {
39 | defaultLanguage: navigator.language,
40 | pathLanguage: function(language){
41 | return language + ".js";
42 | },
43 | loadLanguage: function(){
44 | $("head:first").append($("", { "src": $.translate.pathLanguage($.translate.defaultLanguage) }));
45 | },
46 | autoLoad: true,
47 | properties: {}
48 | };
49 |
50 | /**
51 | * Try to translate the inner text, or the attribute if needed
52 | */
53 | $.fn.translate = function() {
54 | if(!$.translate || !$.translate.properties){
55 | // The plugin is not really available ...
56 | return;
57 | }
58 |
59 | var jSelf = $(this), dataTranslate = jSelf.attr("data-translate");
60 | if(dataTranslate){
61 | $.each(dataTranslate.split(";"), function(index, translate){
62 | var index = translate.indexOf(":");
63 |
64 | if(index > 0){ // We need an attribute name !
65 | jSelf.attr(translate.substring(0, index), $.translate.properties[translate.substring(index + 1)]);
66 |
67 | } else {
68 | jSelf.text($.translate.properties[translate]);
69 | }
70 | });
71 |
72 | jSelf.removeAttr("data-translate"); // Shall we keep it ? In the case that we change the globalization on the fly ?
73 | }
74 | };
75 |
76 | /**
77 | * When the DOM is ready, we try to translate the elements
78 | */
79 | $(document).ready(function(){
80 | if(!$.translate || !$.translate.properties){
81 | // The plugin is not really available ...
82 | return;
83 | }
84 |
85 | // Now, we try to load the default globalization language. We will check first which one we will use.
86 | $.translate.autoLoad && $.translate.loadLanguage();
87 |
88 | // We try to translate the elements
89 | $("[data-translate]").each(function (index, elt) { $(elt).translate(); });
90 |
91 | // Each time a node is inserted, we try to translate it !
92 | $(document).bind("DOMNodeInserted", function(event){
93 | var jElement = $(event.srcElement ? event.srcElement : event.target);
94 | jElement.translate();
95 | jElement.find("[data-translate]").each(function(index, elt){ $(elt).translate(); });
96 | });
97 | });
98 | })(jQuery);
--------------------------------------------------------------------------------
/jQuery/serializeObject/README.md:
--------------------------------------------------------------------------------
1 | # plugin for jQuery #
2 |
3 | This plugin tries to serialize your form into a JSON object.
4 |
5 | Nota bene: this plugin is AMD ready, and its name is "jquery.serializeObject"
6 |
7 | Installation
8 | ------------
9 |
10 | First, to make it works, the following files have to be included.
11 |
12 |