Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/initial module #2

Merged
merged 13 commits into from
Feb 3, 2015
43 changes: 24 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,30 @@
[![Build Status](https://travis-ci.org/thisissoon/angular-skrollr.svg?branch=master)](https://travis-ci.org/thisissoon/angular-skrollr)
[![Coverage Status](https://coveralls.io/repos/thisissoon/angular-skrollr/badge.svg?branch=master)](https://coveralls.io/r/thisissoon/angular-skrollr?branch=master)

Angular Skrollr wraps the skrollr.js library in an Angular friendly way; providing a mechanisim for refreshing skrollr when elements are loaded dynamically.


## Install

```
bower install angular-skrollr
```

## Usage

```html
<!-- add the sn-skrollr directive, along with skrollr animation attributes -->
<div
sn-skrollr
data-100p-top="transform: translateY(900px)"
data-top="transform: translateY(0px)"
data--100p-top="transform: translateY(-900px)"
>
...
</div>
```


This project structure is based on the [angular-seed](https://github.com/angular/angular-seed) application skeleton for a typical [AngularJS](http://angularjs.org/) web app.

The project is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.
Expand Down Expand Up @@ -117,22 +141,6 @@ The build files will then be in the `dist/` directory.

app/ --> all of the files to be used in production
components/ --> all of our javascript libraries (installed using bower)
css/ --> css files
app.css --> default stylesheet (generated using less)
img/ --> image files
less/ --> less folder
default/ --> styling appied to all screen sizes (e.g. fonts, colors etc..)
core/ --> core styling applied to all screen sizes
modules/ --> module styling applied to all screen sizes
large/ --> styling appied to large screen screen sizes (overrides styling in default folder)
core/ --> core styling applied to large screen screen sizes
modules/ --> module styling applied to large screen screen sizes
tablet/ --> styling appied to tablet screen sizes (overrides styling in default folder)
core/ --> core styling applied to tablet screens
modules/ --> module styling applied to tablet screens
mobile/ --> styling appied to mobile screen sizes (overrides styling in default folder)
core/ --> core styling applied to mobile screens
modules/ --> module styling applied to mobile screens
index.html --> app layout file (the main html template file of the app)
js/ --> javascript files
{app}/ --> angular module javascript files
Expand All @@ -142,9 +150,6 @@ app/ --> all of the files to be used in production
{view}Ctrl.js
directives/ --> directives
{module}.js
partials/ --> angular view partials (partial html templates)
partial1.html
partial2.html
modules/ --> static html files for building and testing styling and mark up
{module}/
index.html
Expand Down
9 changes: 2 additions & 7 deletions app/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<!-- build:[ng-app]:e2e sn.example.e2e -->
<html lang="en" ng-app="sn.example">
<!-- build:[ng-app]:e2e sn.skrollr.e2e -->
<html lang="en" ng-app="sn.skrollr">
<!-- /build -->
<head>
<meta charset="utf-8">
Expand All @@ -23,12 +23,7 @@

<!-- build:js js/app.min.js -->
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>

<script src="js/soon-example/app.js"></script>
<script src="js/soon-example/config.js"></script>
<script src="js/soon-example/controllers/SearchCtrl.js"></script>
<script src="js/soon-example/controllers/ResultsCtrl.js"></script>
<!-- /build -->
<!-- build:include:e2e ../tests/e2e/scripts.html --><!-- /build -->

Expand Down
63 changes: 63 additions & 0 deletions app/js/SkrollrService.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
"use strict";
/**
* Load and initialise skrollrjs, based on:
* {@link http://stackoverflow.com/questions/23715337/integrating-skrollr-w-angularjs-single-page-app}
* @author SOON_
* @module sn.skrollr
* @class snSkrollrService
*/
angular.module("sn.skrollr").service("snSkrollrService", [
"$document",
"$q",
"$rootScope",
"$window",
/**
* @constructor
* @param {Object} $document angular wrapper for document
* @param {Service} $q promise service
* @param {Object} $rootScope data on rootScope
* @param {Object} $window angular wrapper for window object
*/
function($document, $q, $rootScope, $window){

var defer = $q.defer();

function onScriptLoad() {
// Load skrollr.js in the browser
$rootScope.$apply(function() {
var s = $window.skrollr.init({
forceHeight: false,
smoothScrolling: true,
mobileDeceleration: 0.004
});
defer.resolve(s);
});
}

/**
* Create a script tag with skrollr as the source
* and call our onScriptLoad callback when it
* has been loaded
*/
var scriptTag = $document[0].createElement("script");
scriptTag.type = "text/javascript";
scriptTag.async = true;
scriptTag.src = "components/skrollr/dist/skrollr.min.js";

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why inject the skrollr library tag using javascript? This presumes the person using this directive has the same directory structure as us e.g. has the skrollr lib in app/components/. Also this won't work, even for us, when all the javascript is concatenated and/or minified.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeh I was concerned about this too. The reason I have used this method is we need to initialise skrollr and directives after it has loaded.

Just including the script in the skrollr is never defined before it is used.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/Prinzhorn/skrollr#lets-get-serious
You just need to wait till the document loads before initialising your directives. You can use the window.onload event to be sure skrollr is defined. It will only run once all assets e.g. css files, javascript files have been loaded.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh for some reason I had assumed angular ran within window.load anyway so neglected to think of it. Does the trick, cheers.

scriptTag.onreadystatechange = function () {
if (this.readyState === "complete") {
onScriptLoad();
}
};

scriptTag.onload = onScriptLoad;

var s = $document[0].getElementsByTagName("body")[0];
s.appendChild(scriptTag);

return {
skrollr: function() { return defer.promise; }
};

}
]);
7 changes: 7 additions & 0 deletions app/js/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
"use strict";
/**
* Wrap skrollr.js
* @author SOON_
* @module sn.skrollr
*/
angular.module("sn.skrollr", []);
23 changes: 23 additions & 0 deletions app/js/skrollr.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
"use strict";
/**
* Refresh skrollrjs on element load
* @author SOON_
* @module sn.skrollr
* @class snSkrollr
*/
angular.module("sn.skrollr").directive("snSkrollr", [
"snSkrollrService",
/**
* @constructor
*/
function (snSkrollrService){
return {
restrict: "A",
link: function($scope, $element) {
snSkrollrService.skrollr().then(function(skrollr){
skrollr.refresh();
});
}
};
}
]);
8 changes: 0 additions & 8 deletions app/js/soon-example/app.js

This file was deleted.

33 changes: 0 additions & 33 deletions app/js/soon-example/config.js

This file was deleted.

27 changes: 0 additions & 27 deletions app/js/soon-example/controllers/ResultsCtrl.js

This file was deleted.

41 changes: 0 additions & 41 deletions app/js/soon-example/controllers/SearchCtrl.js

This file was deleted.

2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"private": false,
"dependencies": {
"angular": "^1.2.17",
"angular-route": "^1.2.17"
"skrollr": "~0.6.29"
},
"devDependencies": {
"angular-mocks": "^1.2.17"
Expand Down
10 changes: 4 additions & 6 deletions scripts.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
{
"vendor": [
"app/components/angular/angular.js",
"app/components/angular-route/angular-route.js"
"app/components/angular/angular.js"
],
"application": [
"app/js/soon-example/app.js",
"app/js/soon-example/config.js",
"app/js/soon-example/controllers/SearchCtrl.js",
"app/js/soon-example/controllers/ResultsCtrl.js"
"app/js/app.js",
"app/js/skrollr.js",
"app/js/SkrollrService.js"
]
}
7 changes: 3 additions & 4 deletions tests/e2e/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
* This module runs e2e test by setting up a module to make our
* backend assertions e.g. mock the responses from our api before
* lauching our actual application.
* @main sn.example.e2e
* @module sn.example.e2e
* @main sn.skrollr.e2e
* @module sn.skrollr.e2e
* @author SOON_
*/
angular.module("sn.example.e2e", ["sn.example", "ngMockE2E"])
angular.module("sn.skrollr.e2e", ["sn.skrollr", "ngMockE2E"])
.run([
"$httpBackend",
function ($httpBackend) {

$httpBackend.whenGET(/.*\/maps\/api\/geocode\/json.*/).respond({ "results" : [ { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "United Kingdom", "short_name" : "GB", "types" : [ "country", "political" ] } ], "formatted_address" : "London, UK", "geometry" : { "bounds" : { "northeast" : { "lat" : 51.6723432, "lng" : 0.148271 }, "southwest" : { "lat" : 51.38494009999999, "lng" : -0.3514683 } }, "location" : { "lat" : 51.5073509, "lng" : -0.1277583 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 51.6723432, "lng" : 0.148271 }, "southwest" : { "lat" : 51.38494009999999, "lng" : -0.3514683 } } }, "types" : [ "locality", "political" ] }, { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "Middlesex County", "short_name" : "Middlesex County", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Ontario", "short_name" : "ON", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "Canada", "short_name" : "CA", "types" : [ "country", "political" ] } ], "formatted_address" : "London, ON, Canada", "geometry" : { "bounds" : { "northeast" : { "lat" : 43.073245, "lng" : -81.1063879 }, "southwest" : { "lat" : 42.824517, "lng" : -81.390852 } }, "location" : { "lat" : 42.9869502, "lng" : -81.243177 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 43.073245, "lng" : -81.1063879 }, "southwest" : { "lat" : 42.824517, "lng" : -81.390852 } } }, "types" : [ "locality", "political" ] }, { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "Laurel County", "short_name" : "Laurel County", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Kentucky", "short_name" : "KY", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "United States", "short_name" : "US", "types" : [ "country", "political" ] } ], "formatted_address" : "London, KY, USA", "geometry" : { "bounds" : { "northeast" : { "lat" : 37.1522599, "lng" : -84.03595709999999 }, "southwest" : { "lat" : 37.0797589, "lng" : -84.126262 } }, "location" : { "lat" : 37.1289771, "lng" : -84.08326459999999 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 37.1522599, "lng" : -84.03595709999999 }, "southwest" : { "lat" : 37.0797589, "lng" : -84.126262 } } }, "types" : [ "locality", "political" ] }, { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "Madison County", "short_name" : "Madison County", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Ohio", "short_name" : "OH", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "United States", "short_name" : "US", "types" : [ "country", "political" ] }, { "long_name" : "43140", "short_name" : "43140", "types" : [ "postal_code" ] } ], "formatted_address" : "London, OH 43140, USA", "geometry" : { "bounds" : { "northeast" : { "lat" : 39.921786, "lng" : -83.3899969 }, "southwest" : { "lat" : 39.85928, "lng" : -83.47892299999999 } }, "location" : { "lat" : 39.8864493, "lng" : -83.4482529 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 39.921786, "lng" : -83.3899969 }, "southwest" : { "lat" : 39.85928, "lng" : -83.47892299999999 } } }, "types" : [ "locality", "political" ] } ], "status" : "OK" });
$httpBackend.whenGET(/partials\/.*/).passThrough();

}
Expand Down
Loading