{"id":21665343,"url":"https://github.com/dlueth/qoopido.js","last_synced_at":"2025-04-12T00:32:33.715Z","repository":{"id":6509486,"uuid":"7750147","full_name":"dlueth/qoopido.js","owner":"dlueth","description":"Collection of classes, plugins, functions and extensions for Javascript and jQuery.","archived":false,"fork":false,"pushed_at":"2015-09-08T15:15:32.000Z","size":7850,"stargazers_count":64,"open_issues_count":0,"forks_count":6,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-25T20:13:05.467Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.qoopido.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dlueth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-22T10:12:56.000Z","updated_at":"2024-06-08T02:53:04.000Z","dependencies_parsed_at":"2022-08-31T00:22:00.078Z","dependency_job_id":null,"html_url":"https://github.com/dlueth/qoopido.js","commit_stats":null,"previous_names":[],"tags_count":118,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlueth%2Fqoopido.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlueth%2Fqoopido.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlueth%2Fqoopido.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlueth%2Fqoopido.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dlueth","download_url":"https://codeload.github.com/dlueth/qoopido.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247982544,"owners_count":21028135,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T10:50:02.459Z","updated_at":"2025-04-12T00:32:33.691Z","avatar_url":"https://github.com/dlueth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Qoopido.js\n==========\n\nQoopido.js is a concept for a modularly built and loadable JavaScript library. Due to its flexible structure and the extension/interitance pattern it is based on it is easily extendable. So it is both, a library of existing modules as well as an extendable base for your very own modules. Every module included supports being loaded via require.js as an AMD module or manually including it (and its dependencies) via script tags.\n\n\n\nCompatibility\n---------------------------\nQoopido.js is not meant to support older legacy Internet Explorers but should run (with limitations regarding some of the modules) from IE8 onwards. I test on Chrome, Firefox, Safari for OSX, Safari for iOS and Android as well as IE8, IE9, IE10 and IE11.\n\n\n\nExternal dependencies\n---------------------------\nThe library itself does not depend on jQuery but some modules (everything within the jquery folder) are either jQuery specific or provide an abstraction for Qoopido.js modules to function as jQuery plugins.\n\n\n\nInstallation\n---------------------------\nThere currently are three ways to get Qoopido.js included into your project:\n\n### Manual\nDownload the current version from the following URL and put all the contents of the directory ```dist/latest/src``` and/or ```dist/latest/min``` into a directory under your project root.\n\n```\nhttps://github.com/dlueth/qoopido.js\n```\n\n### GitHub\nClone the following repository into your projects directory structure.\n\n```\ngit clone https://github.com/dlueth/qoopido.js.git\n```\n\n### Bower\nChange into your project directory and type\n\n```\nbower install qoopido.js\n```\n\nIf you have Node, NPM and bower installed typing ```bower install``` will install eventually required external dependencies into the location you specified in the ```.bowerrc``` file in your users home directory.\n\n\n\nUsing the library\n---------------------------\nAlthough the library is technically capable of being manually included the prefered way definately is to load it via an AMD loader like require.js. After downloading and placing it in a sane place put the following code snippet into your HTML code to get require.js up \u0026 running:\n\n```html\n\u003cscript type=\"text/javascript\" data-main=\"./app/main\" src=\"./vendor/require.js/require.min.js\"\u003e\u003c/script\u003e\n```\n\nNext create the file ```./app/main.js``` (from the ```data-main``` attribute above), copy \u0026 paste the following code snippet and adjust paths and dependencies according to your specific needs and habits:\n\n```javascript\nrequire.config({\n\tbaseUrl: 'app/',\n\tpaths: {\n\t\tqoopido: '../vendor/qoopido.js/dist/latest/min'\n\t}\n});\n\nrequire([ 'qoopido/base' ], function() {\n\t'use strict';\n\n\trequire([ 'qoopido/worker' ], function(mWorker) {\n\t\t// put your code here, e.g.\n\t\tvar worker = mWorker.create();\n\n\t\tworker.execute(function() {\n\t\t\t\tvar result;\n\t\t\t\t// do something time-consuming here\n\n\t\t\t\treturn result;\n\t\t\t})\n\t\t\t.then(\n\t\t\t\tfunction(result) {\n\t\t\t\t\t// success\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\t// error\n\t\t\t\t}\n\t\t\t);\n\t});\n});\n```\n\nThis code will set some basic configuration for require.js, load Qoopido.js ```base``` module which is required for the ```worker``` module that finally gets invoked and processes a time-consuming task in the background without blocking the browsers UI.\n\n\n\nExtending the library\n---------------------------\nPut the following code snippet into your HTML code to get require.js up \u0026 running - remember to adjust any paths accordingly:\n\n```html\n\u003cscript type=\"text/javascript\" data-main=\"./app/main\" src=\"./vendor/require.js/require.min.js\"\u003e\u003c/script\u003e\n```\n\nLike in the example above create the file ***./app/main.js*** and copy \u0026 paste the following code:\n\n```javascript\nrequire.config({\n\tbaseUrl: 'app/',\n\tpaths: {\n\t\tqoopido: '../vendor/qoopido.js/dist/latest/min'\n\t}\n});\n\nrequire([ 'qoopido/base' ], function() {\n\t'use strict';\n\n\trequire('mymodule', function(mymodule) {\n\t\t// put your code here, e.g.\n\t\tvar instance = mymodule.create();\n\t});\n});\n```\n\nThis code will set some basic configuration for require.js, load Qoopido.js ```base``` module which is required for your custom module to be loaded and processed afterwards.\n\nNext create your module file ```app/mymodule.js``` and add the code below:\n\n```javascript\n;(function(definition, global) {\n\tglobal.qoopido.register('mymodule', definition, [ 'qoopido/emitter' ]);\n}(function(modules, shared, global, undefined) {\n\t'use strict';\n\n\t// add private, static(!) properties and variables here\n\t// add private, static(!) methods here\n\t// add private methods here (use call/apply for invocation)\n\n\tvar prototype = modules['emitter'].extend({\n\t\t// add pulic properties here\n\t\t_constructor: function() {\n\t\t\tvar self = this;\n\n\t\t\t// optionally call parent constructor\n\t\t\tprototype._parent._constructor.call(self);\n\t\t},\n\t\t// add public methods here\n\t\tpublicMethod: function() {\n\t\t\tconsole.log('public method called');\n\n\t\t\treturn true;\n\t\t}\n\t});\n\n\treturn prototype;\n}, this));\n```\n\nYou just developed your first custom module with only one public method, ```publicMethod```. By defining ```qoopido/emitter``` as a dependency and extending ```modules['emitter']``` your custom module also inherited all of its original methods.\n\nSo let us see what happens when you actually call your public method (console openened) by changing your ```./app/main.js``` to:\n\n```javascript\nrequire.config({\n\tbaseUrl: 'app/',\n\tpaths: {\n\t\tqoopido: '../vendor/qoopido.js/dist/latest/min'\n\t}\n});\n\nrequire([ 'qoopido/base' ], function() {\n\t'use strict';\n\n\trequire('mymodule', function(mymodule) {\n\t\tvar instance = mymodule.create();\n\n\t\tinstance.publicMethod();\n\t});\n});\n```\n\nOK, so far so good: The module just output the string ```public method called``` to your console, correct? Anything more to it, you ask? Sure! Alter your ```./app/main.js``` again to contain the following code:\n\n```javascript\nrequire.config({\n\tbaseUrl: 'app/',\n\tpaths: {\n\t\tqoopido: '../vendor/qoopido.js/dist/latest/min'\n\t}\n});\n\nrequire([ 'qoopido/base' ], function() {\n\t'use strict';\n\n\trequire('mymodule', function(mymodule) {\n\t\tvar instance = mymodule.create()\n        \t\t.on('prePublicMethod', function(event, originalArguments) {\n        \t\t\tconsole.log(arguments);\n        \t\t})\n        \t\t.on('postPublicMethod', function(event, originalArguments, result) {\n        \t\t\tconsole.log(arguments);\n        \t\t});\n\n\t\tinstance.publicMethod('argument 1', 'argument 2');\n\t});\n});\n```\n\nIf you run this it should output something like\n\n```text\n[\"prePublicMethod\", Array[2]]\npublic method called\n[\"postPublicMethod\", Array[2], true]\n```\n\nto your console. But what exactly happened?\n\nRemember that your module extends ```emitter``` which provides facilities to emit events and register to them. The ```emitter``` module has its own ```_constructor``` which, if invoked like you did, maps all the original methods of the extending module to emit ```pre``` and ```post``` events automatically. Private methods (prefixed with an underscore), methods of the ```emitter``` or ```base``` modules itself as well as any method prefixed with the word ```get``` will not get mapped.\n\nWhat we did here was to register listeners to these automatically emitted events. You can easily emit your own custom events by changing your ```app/mymodule.js``` to something like:\n\n```javascript\n;(function(definition, global) {\n\tglobal.qoopido.register('mymodule', definition, [ 'qoopido/emitter' ]);\n}(function(modules, shared, global, undefined) {\n\t'use strict';\n\n\tvar prototype = modules['emitter'].extend({\n\t\t_constructor: function() {\n\t\t\tvar self = this;\n\n\t\t\tprototype._parent._constructor.call(self);\n\t\t},\n\t\t_privateMethod: function() {\n\t\t\tthis.emit('privateMethod', 'argument 1', 'argument 2');\n\t\t},\n\t\tpublicMethod: function() {\n\t\t\tthis._privateMethod();\n\t\t}\n\t});\n\n\treturn prototype;\n}, this));\n```\n\nAnd afterwards register listeners in your ```./app/main.js``` like in the following example:\n\n```javascript\nrequire.config({\n\tbaseUrl: 'app/',\n\tpaths: {\n\t\tqoopido: '../vendor/qoopido.js/dist/latest/min'\n\t}\n});\n\nrequire([ 'qoopido/base' ], function() {\n\t'use strict';\n\n\trequire('mymodule', function(mymodule) {\n\t\tvar instance = mymodule.create()\n\t\t\t.on('privateMethod', function() {\n\t\t\t\tconsole.log(arguments);\n\t\t\t});\n\n\t\tinstance.publicMethod();\n\t});\n});\n```\n\nAlthough this example does absolutely not present a practical use case nor anything you would come across in real code it should output something like the following to your console:\n\n```text\n[\"privateMethod\", \"argument 1\", \"argument 2\"]\n```\n\n\n\nIncluded modules\n---------------------------\n- asset (XHR asset loading with localStorage caching)\n- base (object inheritance)\n- component\n\t- iterator (flexible and UI/UX independent iterator for e.g. paging)\n\t- remux (REM based approach to responsive web design)\n\t- sense (react to media queries in JavaScript)\n- dom\n\t- collection (DOM element extension)\n\t- element (DOM element extension)\n\t\t- emerge (react on elements entering or nearing the visible browser area)\n\t\t- lazyimage (load images when entering or nearing the visible browser area)\n\t\t- shrinkimage (load \".shrunk\" files from server, alpha PNGs reduced by 60-80% in filesize)\n\t- event (DOM event normalization)\n- emitter (event emitter)\n- function (provides single functions, e.g. helper)\n\t- load\n\t\t- css (inject a stylesheet into document)\n   \t- merge (function to deep merge objects)\n   \t- proximity (calculate px distance between two positions)\n   \t- unique (generate unique identifiers)\n   \t\t- string (generate unique strings, e.g. for callbacks)\n   \t\t- uuid (generate unique ids)\n- jquery\n\t- extension\n\t\t- selector\n\t- function\n\t\t- prefetch\n\t- plugin\n\t\t- emerge\n\t\t- lazyimage\n\t\t- shrinkimage\n- particle (still very basic)\n- polyfill\n\t- array\n\t \t- indexof\n\t- document\n\t\t- getelementsbyclassname\n\t\t- queryselector\n\t\t- queryselectorall\n\t- element\n\t\t- matches/matchesSelector\n\t- object\n\t\t- create\n\t\t- defineproperties\n\t\t- defineproperty\n\t\t- getownpropertydescriptor\n\t\t- getownpropertynames\n\t\t- getprototypeof\n\t\t- keys\n\t- string\n\t\t- lcfirst\n\t\t- trim\n\t\t- ucfirst\n\t- window\n\t\t- addeventlistener\n\t\t- customevent\n\t\t- dispatchevent\n\t\t- getcomputedstyle\n\t\t- matchmedia\n\t\t- promise\n\t\t- removeeventlistener\n- pool (pooling facilities and pool factory)\n\t- array (pooling facilities for arrays)\n\t- dom (pooling facilities for DOM elements)\n\t- module (pooling facilities for Qoopido.js modules or external objects/classes)\n\t- object (pooling facilities for objects)\n- promise\n\t- all\n\t- defer\n\t- race\n- proxy (universal proxy method)\n- renderer (centralized rendering pipeline)\n- support (feature detection)\n\t- capability\n\t\t- datauri\n\t\t- touch\n\t- css\n\t\t- borderradius\n\t\t- boxshadow\n\t\t- rem\n\t\t- rgba\n\t\t- textshadow\n\t\t- transform\n\t\t\t- 2d\n\t\t\t- 3d\n\t\t- transition\n\t- element\n\t\t- canvas\n\t\t\t- todataurl\n\t\t\t\t- jpeg\n\t\t\t\t- png\n\t\t\t\t- webp\n\t\t- svg\n\t\t- video\n\t\t\t- mp4\n\t\t\t- ogg\n\t\t\t- webm\n- transport (base class for all transports)\n\t- jsonp (JSONP transport)\n\t- xhr (AJAX transport)\n- url (handle URLs, parameter etc.)\n- vector\n\t- 2d\n- widget\n\t- image\n\t\t- adapt (adaptive \u0026 lazy-loadable images embracing microdata)\n- worker (flexible web worker implementation\n\n\n\nCodePen demos\n---------------------------\nBeside the demos within this repositories demo directory I have also done some pens on CodePen that demonstrate combined features:\n- [Particle fireworks](http://codepen.io/dlueth/pen/uydzJ)\n- [Webcam pixelation](http://codepen.io/dlueth/pen/zBhwv)\n- [Image pixelation](http://codepen.io/dlueth/pen/jcvar)\n- [Modular feature detection](http://codepen.io/dlueth/pen/bvFpk)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdlueth%2Fqoopido.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdlueth%2Fqoopido.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdlueth%2Fqoopido.js/lists"}