Permalink
Browse files

upload files

  • Loading branch information...
1 parent 0546597 commit 98c82e5b45cd3cbded9468f2b46e1bb96d2ac1f2 @dciccale committed Oct 5, 2012
Showing with 167 additions and 3 deletions.
  1. +23 −0 LICENSE.txt
  2. +57 −3 README.md
  3. +87 −0 jslibraryboilerplate.ts
View
23 LICENSE.txt
@@ -0,0 +1,23 @@
+Copyright (c) 2012 Denis Ciccale (@tdecs)
+
+Permission is hereby granted, free of charge, to any
+person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the
+Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice
+shall be included in all copies or substantial portions of
+the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
+KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
+OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
60 README.md
@@ -1,4 +1,58 @@
-jslibraryboilerplate
-====================
+# JavaScript Library Boilerplate
-JavaScript Library Boilerplate
+An easy boilerplate for rolling your own JavaScript Library like [Kimbo](http://kimbojs.com), jQuery, Zepto, Prototype, etc.
+
+The actual code is written in [TypeScript](http://www.typescriptlang.org).
+
+## Compile
+To compile the jslibraryboilerplate.ts file you will need [Node.js](http://nodejs.org)
+
+If you already installed it, run this commmand-line to download TypeScript package:
+
+```
+npm install -g typescript
+```
+
+Now you can compile:
+
+```
+tsc jslibraryboilerplate.ts
+```
+
+## Usage
+Include jslibraryboilerplate.js file on an html file and you are done!
+
+### Code example
+```javascript
+// $(selector); you can use any valid CSS selector for getting elements from the document
+$('p'); // get all p elements of the document
+$('.test'); // all elements with class 'test'
+// iterate through 'li' elements to know if they are even or odd
+$('li').each(function (el, i) {
+ if (i % 2 === 0) {
+ alert('is even');
+ } else {
+ alert('is odd');
+ }
+});
+```
+
+## Add new methods
+You can add the methods you need to work on the DOM
+
+### Code example
+```javascript
+$.fn.highlight = function (color) {
+ return this.each(function () {
+ this.style.setProperty('color', color);
+ });
+};
+
+// highlight all 'strong' elements
+$('strong').highlight('red');
+```
+
+That's all, go and roll your own JavaScript Library.
+
+## License
+See [LICENSE.txt](https://raw.github.com/dciccale/jslibraryboilerplate/master/LICENSE.txt)
View
87 jslibraryboilerplate.ts
@@ -0,0 +1,87 @@
+/*!
+ * JavaScript Library Boilerplate
+ * Copyright (c) 2012 Denis Ciccale (@tdecs)
+ * Released under MIT license (https://raw.github.com/dciccale/jslibraryboilerplate/master/LICENSE.txt)
+ */
+class JSLB {
+ // auto-create new instance without the 'new' keyword
+ constructor (selector) {
+ return new JSLB.prototype.init(selector)
+ }
+ splice;
+ length: number;
+ // handle the use of $(...)
+ init (selector) {
+ // no selector, return empty JSLB object
+ if (!selector) {
+ return this;
+ }
+
+ // already a JSLB object
+ if (selector instanceof JSLB) {
+ return selector;
+ }
+
+ // already a dom element?
+ if (selector.nodeType) {
+ this[0] = selector;
+ this.length = 1;
+ return this;
+ }
+
+ // is css selector, query the dom
+ if (typeof selector === 'string') {
+ return [].push.apply(this, [].slice.call(document.querySelectorAll(selector)));
+ }
+
+ // it's a function, call it when DOM is ready
+ if (typeof selector === 'function') {
+ return new JSLB(document).ready(selector);
+ }
+ }
+ // document ready method
+ ready (callback) {
+ // first check if already loaded
+ if (/complete|loaded|interactive/.test(document.readyState)) {
+ callback(JSLB);
+
+ // listen when it loads
+ } else {
+ document.addEventListener('DOMContentLoaded', function () {
+ callback(JSLB);
+ }, false);
+ }
+ }
+ // iterate JSLB object
+ each (callback) {
+ [].forEach.call(this, function (el, i) {
+ callback.call(el, i, el);
+ });
+ }
+ // sample method to change text of an element
+ text (value) {
+ // no element
+ if (!this[0]) {
+ return this;
+ }
+ // get value
+ if (!value) {
+ return this[0].textContent;
+
+ // set value to all elements on the collection
+ } else {
+ return this.each(function () {
+ this.textContent = value;
+ });
+ }
+ }
+}
+
+// the init method uses JSLB prototype and constructor
+JSLB.prototype.init.prototype = JSLB.prototype;
+JSLB.prototype.init.prototype.constructor = JSLB;
+// just to have an array like instanceof JSLB object
+JSLB.prototype.splice = [].splice;
+
+// expose to global object
+window['$'] = JSLB;

0 comments on commit 98c82e5

Please sign in to comment.