Greeneyes, a RequireJS module library

Greeneyes is collection of useful JavaScript utilities and widgets (and accompanying CSS) written in AMD format to be used with RequireJS.

Greeneyes module listing

Build

# Clone the repo
$ git clone https://github.com/herereadthis/greeneyes.git
$ cd greeneyes/
$ npm install
$ bower install
$ grunt

Greeneyes Setup

You will need RequireJS, which is JavaScript file and module loader. This article assumes you already know the basics. I recommend installing RequireJS as a bower dependency.

# Get Greeneyes
$ bower install greeneyes --save
# Get RequireJS
$ bower install requirejs --save

One of the goals in creating Greeneeys was modularity, in order to prevent unecessary bloat. Unlike many other frameworks out there, you only to add paths to the modules you need.

repo/main.js

requirejs.config({
    paths: {
        // Only add the ones you need, e.g., 
        "Analytics": "[BOWER_PATH]/greeneyes/src/js/analytics",
        "DropdownMenu": "[BOWER_PATH]/greeneyes/src/js/dropdown_menu",
        ...
    }
});

Then use Grunt to compile your JS. Your page will only call one JavaScript file instead of having to pull in a million separate files.

repo/Gruntfile.js

requirejs: {
    build: {
        options: {
            baseUrl: "<%= paths.src %>/js/",
            mainConfigFile: "<%= paths.src %>/js/main.js",
            name: "main",
            out: "<%= paths.build %>/js/main.js",
            optimize: 'uglify2',
        }
    }
},

HTML Configuration

Greeneyes was created such that you will not have to pollute your HTML with a bunch of javascript commands. Most modules will use a data attribute [data-module=""] to sniff for the correct module to apply. For example, here is how to apply the parallax scroll module to a section:

<section data-module="parallax_scroll">

Some modules have user-defined-variables that allow you to modify what happens. (Don’t worry, a complete listing of parameters will be given below.) The parallax scroller has an additional data attribute to determine relative speed. Here is how to make backgrounds scroll in reverse order to page scroll:

<section data-module="parallax_scroll" data-parallax-speed="-50">

Google Analytics

This module replaces the standard Google analytics plugin (view on GitHub). The main advantage here is that you will get to remove inline JavaScript on your page. Note: Unlike the other Greeneyes modules, this one does not need a [data-module=""] attribute.

Get the module

// Add the path to your main.js configuration
requirejs.config({
    paths: {
        // Only add the ones you need, e.g., 
        "Analytics": "[BOWER_PATH]/greeneyes/src/js/analytics",
        ...
    }
});
// call the module in main.js
require(['Analytics','...'], function(Analytics, ...) {
	// initialize Google Analytics module
    Analytics.track();
    ...
});

Call the module in your HTML in your <body /> tag

<body data-google-analytics="UA-########-#">

Alternative: specify the ID number directly

Analytics.track('UA-########-#');

Then you don’t need to specify [data-google-analytics=""].


Parallax background scrolling

This module makes the container’s background scroll at different rates versus page scroll (view on GitHub). Parallax speed is expressed as a percentage. Set parallax speed with attribute [data-parallax-speed="##"]. At 0%, the background is fixed to the window. At 50%, the background will scroll at half the speed of the window scroll. At 200%, the background will scroll at twice rate as window scroll. If you do not set a parallax speed, the module will default to 50%.

<!-- Default is 50% -->
<div data-module="parallax_scroll">

This module does require you to import the parallax scrolling CSS file.

/* import LESS version */
@import "[BOWER_PATH]/greeneyes/src/less/parallax_scroll.less";
/* Or the SASS version */
@import "[BOWER_PATH]/greeneyes/src/sass/parallax_scroll.scss";
<!-- 150% speed -->
<div data-module="parallax_scroll"
	data-parallax-speed="150">

You will have to define your background image yourself in your CSS. The parallax scrolling works by isolating the background positioning of your image. The parallax scroll does have default CSS, but if you want to customize your positioning, you must express the y-position as a finite value (x-position can be anything).

/* This is okay */
.parallax_background {background-position: center 0rem;}
/* This is not okay */
.parallax_background {background-position: left bottom;}
<!-- -50% = reverse scroll -->
<div data-module="parallax_scroll"
	data-parallax-speed="-50">

This module will create a nested menu where the child elements will be hidden by default and are toggled into view by clicking on the parent items (view on GitHub).

Coming soon (GitHub issue #4)


Content tab widget

This module creates a box with a list of tabs at the top that will switch out the content below (view on GitHub).

Coming soon (GitHub issue #3)


Collapsible accordion content

This module will create a menu listing such that pressing any of the list items will expand to show more content (view on GitHub). You will want to use it for compressing a lot of content to only show what the user wants to read.

Coming soon (GitHub issue #1)


Tooltips and popovers

This module will create tiny modals that will appear adjacent to the item on which you click (view on GitHub). It is useful for displaying help text.

Coming soon (GitHub issue #2)


More to come…

Who puts articles online before finishing them? I do. Check back in a few days.