├── .gitignore
├── LICENSE
├── README.md
├── demo
├── jQuery.html
└── vanilla.html
└── js
└── vanilla-plugin-boilerplate.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Dev IDE projects
2 | .idea
3 | .nbproject
4 |
5 | # OSX stuff
6 | .DS_Store
7 | .DS_Store?
8 | ._*
9 | .Spotlight-V100
10 | .Trashes
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Jan Rembold
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vanilla Plugin Boilerplate
2 | A plain UMD vanilla javascript plugin boilerplate with optional jQuery initialization for the sake of convenience.
3 | This boilerplate is useful for small or fast scripts that don't necessarily need jQuery.
4 |
5 | ## Usage
6 | Change `pluginName` variable to your desired plugin name and include the plugin.
7 |
8 | Initialize the plugin to a single html element with plain vanilla javascript.
9 |
10 | ```javascript
11 | var boilerplate = new Boilerplate(document.getElementById('demo'), {
12 | someDefaultOption: 'Plugin was loaded vanilla style!'
13 | });
14 |
15 | boilerplate.doSomething();
16 | ```
17 |
18 | Or append the plugin to a collection of elements with a jQuery selector.
19 | The plugin object will be attached to each elements data attribute.
20 | The data attributes name is `plugin_` prefixed to the given `pluginName`.
21 |
22 | ```javascript
23 | $('.demo').Boilerplate({
24 | someDefaultOption: 'Plugin was loaded jQuery style!'
25 | });
26 |
27 | $('.demo').data('plugin_Boilerplate').doSomething();
28 | ```
29 |
30 | ## License
31 | * Author: Jan Rembold
32 | * License: MIT
--------------------------------------------------------------------------------
/demo/jQuery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Vanilla Plugin Boilerplate Demo
6 |
7 |
8 | Vanilla Plugin Boilerplate Demo
9 | Plugin is loading...
10 |
11 |
12 |
13 |
22 |
23 |
--------------------------------------------------------------------------------
/demo/vanilla.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Vanilla Plugin Boilerplate Demo
6 |
7 |
8 | Vanilla Plugin Boilerplate Demo
9 | Plugin is loading...
10 |
11 |
12 |
19 |
20 |
--------------------------------------------------------------------------------
/js/vanilla-plugin-boilerplate.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Vanilla Javascript Boilerplate with optional jQuery initialization
3 | * Author: Jan Rembold
4 | * Git: https://github.com/janrembold
5 | * License: MIT
6 | */
7 |
8 | (function (root, factory) {
9 | var pluginName = 'Boilerplate';
10 |
11 | if (typeof define === 'function' && define.amd) {
12 | define([], factory(pluginName));
13 | } else if (typeof exports === 'object') {
14 | module.exports = factory(pluginName);
15 | } else {
16 | root[pluginName] = factory(pluginName);
17 | }
18 | }(this, function (pluginName) {
19 | 'use strict';
20 |
21 | var defaults = {
22 | someDefaultOption: 'foo'
23 | };
24 |
25 |
26 | /**
27 | * Merge defaults with user options
28 | * @param {Object} defaults Default settings
29 | * @param {Object} options User options
30 | */
31 | var extend = function (target, options) {
32 | var prop, extended = {};
33 | for (prop in defaults) {
34 | if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
35 | extended[prop] = defaults[prop];
36 | }
37 | }
38 | for (prop in options) {
39 | if (Object.prototype.hasOwnProperty.call(options, prop)) {
40 | extended[prop] = options[prop];
41 | }
42 | }
43 | return extended;
44 | };
45 |
46 |
47 | /**
48 | * Some private helper function
49 | */
50 | var privateFunction = function() {
51 | // private helper code goes here
52 | };
53 |
54 |
55 | /**
56 | * Plugin Object
57 | * @param element The html element to initialize
58 | * @param {Object} options User options
59 | * @constructor
60 | */
61 | function Plugin(element, options) {
62 | this.element = element;
63 | this.options = extend(defaults, options);
64 |
65 | //init code goes here
66 | console.log('Plugin inititalized');
67 | }
68 |
69 |
70 | // Plugin prototype
71 | Plugin.prototype = {
72 |
73 | doSomething: function() {
74 | this.element.innerHTML = this.options.someDefaultOption;
75 | }
76 |
77 | };
78 |
79 |
80 | // add lightweight jQuery wrapper, if available
81 | if(window.jQuery) {
82 | var $ = window.jQuery;
83 |
84 | $.fn[pluginName] = function ( options ) {
85 | options = options || {};
86 |
87 | return this.each(function() {
88 | // add plugin to element data
89 | if (!$.data(this, 'plugin_'+pluginName) ) {
90 | options.element = this;
91 | $.data(this, 'plugin_'+pluginName, new Plugin(this, options));
92 | }
93 | });
94 | };
95 | }
96 |
97 |
98 | return Plugin;
99 | }));
100 |
--------------------------------------------------------------------------------