abidibo.net

Just Open Source

Javascript projects

I've always been a javascript fan, I can't explain exactly why, i'm aware of some language inconsistencies and tricky behaviors, but I love it and with the coming of nodejs and the birth of many MVC frameworks, its future seems to be radiant.

Since years I use it massively in my web project, sometimes writing vanilla js, others I choose a framework above all to solve cross browser issues. I've used many frameworks, i.e jquery and extJS, but for a long period my favourite was mootools, and so I've developed some interesting mootools plugins.

ng-upload-window

ng-upload-window is an angular module, which acts as a wrapper around the ng-file-upload directive and interacts wiith its upload service in order to have the uploaded files shown in a layer window which looks like the google drive one.

For more information see the github project page.

mooReadAll

mooReadAll is plugin designed to truncate html contents preserving the right html structure and without truncate tags. It takes the dom elements passed, parses their content cutting it to a user defined number of words.

The tag structure is preserved, and the tags left opened by the cut are automatically closed. As an option all or some tags may also be removed (i.e. remove images from content summary). Then it includes a "read all" link to show the whole content (in different and custom manners).

The action to perform when clicking the read all button is highly customizable: inplace, link, js callback and layer action types are provided, see documentation for more informations. In case of layer type a title may be provided using the html5 data- attributes, and the layer showing up (lightbox style) may be made draggable, resizable and text-resizable.

For more information see the project page.

mooTree

mooTree is plugin designed to create a navigation tree starting from an html unordered list (ul tag). It adds automatically expand and collapse controllers and can manage different initial condition:

  • item selected (and shown)
  • item expanded (use of html5 data attributes)
  • top tree expanded
  • tree level expanded

Every aspect is fully customizable through css. A base css is provided in the Demo folder.

For more information see the project page.

moopopup

moopopup is a plugin designed to display html content in a draggable, resizable popup window (really a layer over the document). The content shown may be passed as an option, taken from an existing html node or through an ajax request. Every aspect is fully customizable through css. A base css is provided in the Style folder (ubuntu 11.10 windows style).

For more information see the project page.

moogallery

moogallery creates an interactive gallery of images, videos and audios. Given the thumbs paths and some information, the thumbs are loaded sequentially and inserted in a table structure automatically sized according to the size of the container, then events are added in order to manage tips, lightbox widget (and navigation through media) and show media' meta information. Videos can be hosted on youtube or vimeo, audio files are inserted following html5 specifications.

If used with cpoyer's mootools-mobile (https://github.com/cpojer/mootools-mobile) supports swipe gestures on mobile (android, ios) to change media in the lightbox view.

For more information see the project page.

moomapdrawer

moomapdrawer is a plugin which lets you draw shapes (point, polyline, polygon, circle) over a google map (api v3) with the mouse or through geocoding. Such shapes may be exported and passed to a callback function in order to save them. It is possible also to import and edit shapes so that is the perfect plugin to use in a insert/edit format for geolocalization.

For more information see the project page.

wordevents

wordevents is a plugin that let's you execute functions when the defined words are typed on the keyboard. Instead of listening to single chars, wordevents can listen to words (a word is considered to be a set of characters typed with a time interval minor than the digit interval option).

Callbacks functions are given the list of events which formed the word, the context is set to be the target element. It is possible to define which characters are allowed by providing a custion acceptedCode function through options, such function receives the key code of the key pressed and must return true if it accepted, false otherwise.

For more information see the project page.

Calculator

Calculator is a plugin which renders an n-digits calculator with some basic operations supported: sum, difference, multiplication, division, percentage, pow and sqrt.

For more information see the project page.

Your Smartwatch Loves Tasker!

Your Smartwatch Loves Tasker!

Now available for purchase!

Featured