{"_id":"quojs","_rev":"3-6ac29070c2354337dd5cc7e4ef7bb046","name":"quojs","description":"Micro #JavaScript Library for Mobile Devices.","dist-tags":{"latest":"3.0.8"},"versions":{"3.0.8":{"name":"quojs","version":"3.0.8","description":"Micro #JavaScript Library for Mobile Devices.","homepage":"http://quojs.tapquo.com","author":{"name":"Javi Jimenez Villar","email":"javi.jimenez.villar@gmail.com"},"main":"quo.js","files":["quo.js","dist/"],"keywords":["mobile"],"license":"MIT","dependencies":{"coffee-script":"^1.8.0"},"devDependencies":{"gulp":"*","gulp-coffee":"*","gulp-concat":"*","gulp-connect":"*","gulp-header":"*","gulp-jasmine":"*","gulp-uglify":"*","gulp-util":"*","karma":"*","karma-jasmine":"*","karma-phantomjs-launcher":"*"},"scripts":{},"gitHead":"00926c7d198aae4e698e584a6d4600e45aaebeaa","_id":"quojs@3.0.8","_shasum":"183b69eaedc1f485e135df80851a6a80b8fbc708","_from":".","_npmVersion":"2.3.0","_nodeVersion":"1.0.4","_npmUser":{"name":"soyjavi","email":"javi.jimenez.villar@gmail.com"},"dist":{"shasum":"183b69eaedc1f485e135df80851a6a80b8fbc708","tarball":"https://registry.npmjs.org/quojs/-/quojs-3.0.8.tgz","integrity":"sha512-CueCDjk+fVZHPy6zivkUHz9vrmV6Uj2avLUja+J8HBpdJMj8U/wUjpvlc3Xq4Rm6SoiEdyQnSFlo5lz2i18btQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACJsanWvIgSuOUUG6fEjwgEhcmEOaYG8r0uC3bK9neDAiEApoqrRJSik45z0B/Twji6yf4ll3z64cNKcezEQRRNuyo="}]},"maintainers":[{"name":"soyjavi","email":"javi.jimenez.villar@gmail.com"}]}},"readme":"QuoJS\n=====\n\n[![Join the chat at https://gitter.im/soyjavi/QuoJS](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/soyjavi/QuoJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n[![Build Status](https://travis-ci.org/soyjavi/QuoJS.svg?branch=master)](https://travis-ci.org/soyjavi/QuoJS)\n\nIs a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented and micro coherent API.\n\nDesigned to change the way that you write JavaScript with the small size goal: a 5-6k gzipped library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done. Released under the Open Source MIT license, which gives you the possibility to use it and modify it in every circumstance.\n\nCurrent JavaScript libraries hate mobile, they are very big libraries that were built based on requirements of desktop devices, so mobile performance isn't optimal. Doesn't have a good support to touch events or a semantic API that would help the developer to create a good & cool JavaScript\n\n*Current version: [3.0.7]()*\n\n\nGetting Started\n---------------\nQuoJS only is not only a touch event manager, is an extensive library that requires no third-party JavaScript libraries (such as jQuery, Prototype, Kendo ...) to create complex projects and browser-based applications.\n\n### Browser compatibility\n- Mobile Browsers: Android Navigator 4+, Chrome for Android, Safari, FirefoxOS & Blackberry\n- Desktop Browsers (no gestures available): Chrome 30+, Safari 4+, Firefox 24+ & Opera.\n\n### GitHub\nThis is opensource, so feel free to fork this project to help us improve Quo. All source code is developed with CoffeeScript.\n\n### Licensing\nQuoJS is licensed under MIT licensed. See [LICENSE](https://github.com/soyjavi/QuoJS/blob/master/LICENSE.txt) for more information.\n\nTouch events\n------------\nQuoJS supports the following gestures:\n\n* **Touch**\n* **Double-Tap**\n* **Hold**\n* **2xFingers Tap**\n* **2xFingers Double-Tap**\n* **Swipe Up**\n* **Swipe Right**\n* **Swipe Down**\n* **Swipe Left**\n* **Swipe**\n* **Drag**\n* **Rotate Left**\n* **Rotate Right**\n* **Rotate**\n* **Pinch Out**\n* **Pinch**\n* **Fingers**\n\nSo you can also use QuoJS for mobile applicatios.\n\nHow to use\n----------\nThe namespace to use QuoJS is the symbol $$, so (if you needed) you can instantiate other JavaScript libraries (such jQuery, Zepto...) that use the common symbol $.\n\n```\n// Find all <span> elements in <p> elements\n$$('span', 'p');\n\n//Subscribe to a tap event with a callback\n$$('p').tap(function() {\n    // affects \"span\" children/grandchildren\n    $$('span', this).style('color', 'red');\n});\n\n// Chaining methods\n$$('p > span').html('tapquo').style('color', 'blue');\n```\n#### Query Methods\nQuoJS has a query engine for DOM Elements very similar to that already use in other famous libraries. Many of the methods already you use in jQuery have their version here:\n\n```\n// jQuery Compatible Query methods\n.get(index)\n.find('selector')\n.parent()\n.siblings('selector')\n.children('selector')\n.first()\n.last()\n.closest('selector')\n.each(callback)\n```\n#### Element Methods\nQuoJS has DOM Elements query engine very similar to that already use in other famous libraries. Many of the methods already you use in jQuery have their version here:\n\n```\n// Get/Set element attribute\n.attr('attribute')\n.attr('attribute', 'value')\n.removeAttr('attribute')\n// Get/Set the value of the \"data-name\" attribute\n.data('name')\n.data('name', 'value')\n// Get/Set the value of the form element\n.val()\n.val('value')\n// Show/Hide a element\n.show()\n.hide()\n// get object dimensions in px\n.offset('selector')\n.height()\n.width()\n// remove element\n.remove()\n```\n#### Style Methods\nWith QuoJS you can easily manage CSS styles of any DOM element of your project. The methods are fully verbose so it will be very easy to remember to apply the full power of CSS3\n\n```\n// set a CSS property\n.style('css property', 'value')\n // add/remove a CSS class name\n.addClass('classname')\n.removeClass('classname')\n.toggleClass('classname')\n// returns true of first element has a classname set\n.hasClass('classname')\n// Set a style with common vendor prefixes\n.vendor('transform', 'translate3d(50%, 0, 0)');\n```\n```\n$$('article').style('height', '128px');\n$$('article input').addClass('hide');\n\nvar houses = $$('.house');\nif (houses.hasClass('ghost')) {\n    houses.addClass('buuhh');\n}\n```\n#### DOM Manipulation methods\nThese methods allow us to insert/update content inside an existing element.\n\n```\n// get first element's .innerHTML\n.html()\n// set the contents of the element(s)\n.html('new html')\n// get first element's .textContent\n.text()\n// set the text contents of the element(s)\n.text('new text')\n// add html (or a DOM Element) to element contents\n.append(), prepend()\n// If you like set a new Dom Element in a existing element\n.replaceWith()\n// Empty element\n.empty()\n```\n```\n$$('article').html('tapquo');\nvar content = $$('article').html(); //content is 'tapquo'\n```\n#### Events handler\nEvery frontend project needs a event management efficient, you can create your own events as well as subscribe to existing ones.\n\n```\n// add event listener to elements\n.on(type, [selector,] function);\n// remove event listener from elements\n.off(type, [selector,] function);\n// triggers an event\n.trigger(type);\n//If loaded correctly all resources\n.ready(function);\n```\n```\n// Subscribe for a determinate event\n$$(\".tapquo\").on(\"tap\", function);\n// Trigger custom event\n$$(\".quojs\").trigger(\"loaded\");\n// Loaded page\n$$.ready(function() {\n    alert(\"QuoJS rulz!\");\n});\n```\n#### Gestures Events\nAlthough browsers only support touch events with QuoJS you have numerous events and gestures to help you make a usable project.\n\n```\n//Touch event, common event\n.touch(function);\n//Long tap event (650 miliseconds)\n.hold(function);\n//If you send two singleTap\n.doubleTap(function);\n```\n#### Swipe methods\nNot only have the basic swipe, you have more control over this gesture as used in the common native Apps.\n\n```\n.swipe(function);\n//Detect if is swipping\n.swiping(function);\n//Swipe directions\n.swipeLeft(function);\n.swipeRight(function);\n.swipeDown(function);\n.swipeUp(function);\n```\n#### Pinch methods\nAs with the previous gesture, QuoJS have easy control over this gesture and its variations.\n\n```\n.pinch(function);\n//Detect if is pinching\n.pinching(function);\n//Pinch zoom\n.pinchIn(function);\n.pinchOut(function);\n```\n#### Rotate methods\nAs with the previous gesture, QuoJS have easy control over this gesture and its variations.\n\n```\n.rotate(function);\n//Detect if is rotating\n.rotating(function);\n//Rotate directions\n.rotateLeft(function);\n.rotateRight(function);\n```\n#### Ajax Methods\nThe main premise is to create ajax calls simple and fun.\n\n```\n$$.get(url, [parameters], [callback], [mime-type]);\n$$.post(url, [parameters], [callback], [mime-type]);\n$$.put(url, [parameters], [callback], [mime-type]);\n$$.delete(url, [parameters], [callback], [mime-type]);\n$$.json(url, [parameters], [callback]);\n```\n```\n$$.json(url, {id: 1980, user: 'dan'}, function(data){ ... });\n```\n```\n$$.ajax({\n    type: 'POST', // defaults to 'GET'\n    url: 'http://rest',\n    data: {user: 'soyjavi', pass: 'twitter'},\n    dataType: 'json', //'json', 'xml', 'html', or 'text'\n    async: true,\n    success: function(response) { ... },\n    error: function(xhr, type) { ... }\n});\n```\n#### Settings in Ajax Requests\nYou can establishing a common configuration for all ajax requests, defining timeouts, callbacks for success or error response.\n\n```\n//Default Settings\n$$.ajaxSettings = {\n    async: true,\n    success: {},\n    error: {},\n    timeout: 0\n};\n//Set de default timeout to 1 second (1000 miliseconds)\n$$.ajaxSettings.timeout = 1000;\n\n//Set de default callback when ajax request failed\n$.ajaxSettings.error = function(){ ... };\n```\n```\n$$.ajaxSettings.async = false;\nvar response = $$.json('http://', {id: 1980, user: 'dan'});\n```\n","maintainers":[{"name":"soyjavi","email":"javi.jimenez.villar@gmail.com"}],"time":{"modified":"2022-06-25T08:04:52.328Z","created":"2015-06-02T18:24:29.385Z","3.0.8":"2015-06-02T18:24:29.385Z"},"homepage":"http://quojs.tapquo.com","keywords":["mobile"],"author":{"name":"Javi Jimenez Villar","email":"javi.jimenez.villar@gmail.com"},"license":"MIT","readmeFilename":"README.md"}