snapjay / angularjs-breakpoint Goto Github PK

View Code? Open in Web Editor NEW

49.0 5.0 9.0 413 KB

AngularJS directive that set breakpoints for responsive designed websites

Home Page: http://snapjay.github.com/angularjs-breakpoint/

JavaScript 100.00%

angularjs-breakpoint's Introduction

AngularJS Breakpoint

http://snapjay.github.com/angularjs-breakpoint/

AngularJS directive that set breakpoints for responsive websites.

Add the breakpoint directive to the body tag Define as many breakpoints as you want in an object Current breakpoint class and window width available in scope

Setup

Add the breakpoint attribute to the body tag and give it a value off an object defined as follows: Set the key as the smallest value you want the breakpoint to start at and the value as the name of the class you want added to the body tag. The values do not need to be in numerical order. I recommend that the lowest value is 0

<body breakpoint="{0:'smallscreen', 750:'break750', 500:'break500', 1000:'break1000', 1500:'break1500'}">
... 
</body>

The 'current class' and 'current window width' are available on the scope as break1500 and 1680

Events

You can set a listener on any scope within your app, by using the scope method $on. The triggered event is called right after the class of the element has been changed.

$scope.$on('breakpointChange', function(event, breakpoint, oldClass) {
   console.log('Entering:' + breakpoint.class);
   console.log('Leaving:' + oldClass);
   console.log('windowSize' + breakpoint.windowSize);
});

Contribution

This project is built with GruntJS. To contribute to this project make sure to install node.js and npm. Assuming npm is installed, run $ npm install inside the project directory to install the dependencies and you should be ready to go. Once you make a change, use $ grunt build inside the project folder to build the distribution files. The version number is determined from the package.json file inside the project directory.

Download on Github

Version 0.0.1: https://github.com/snapjay/angularjs-breakpoint

License

This module is licensed using the MIT License:

The MIT License (MIT)

Copyright (c) 2013 Dan Shreim

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Credit

Dan Shreim
@snapjay
http://snapjay.com If you use the script, please let me know @snapjay; Don't worry, I won't ask for anything!

angularjs-breakpoint's People

Stargazers

Watchers

Forkers

danethurber lotreace protherj daise craigcastledine chris-hanson elpepe101 adamiko iq-scm

angularjs-breakpoint's Issues

Broadcasting old value

            $rootScope.$broadcast('breakpointChange', scope.breakpoint);

Should be

            $rootScope.$broadcast('breakpointChange', scope.breakpoint, oldClass);

To broadcast the old value

initial state

It would be nice if you could launch 'breakpointChange' event on page load so one could obtain an initial breakpoint state

Reserved word "class" breaks ie8 usage

FYI, "class" is a reserved word in ie8 so breakpoint.class causes an error. It's easy to get around this by using breakpoint['class'], but might be good to point this out in the "Events" portion of the docs to avoid tears.
The library also breaks in ie8 because of this issue when pulling in through bower though, so I would suggest using the above work around or not using the word class in the library. (If you want to support ie8 that is, which I can understand if you don't)

Uncaught Type Error: string is not a function

The resize event is causing a 'string is not a function' error. I'm not 100% sure, but I think

function setClass(){}

and

var setClass

could be precipitating a conflict.

Loading from cdnjs

I'd love to use this off of cdnjs.
https://github.com/cdnjs/cdnjs

Do you already deliver to npm? cdnjs has a setting to automatically pull from npm every 4 hours, so after an initial setup, hopefully you can just forget about it. :) Thanks for a great plugin!!

(from cdnjs) Enabling NPM auto update

We automatically update libraries that are also hosted on NPM e.g. Lodash.

This script runs automatically every 4 hours

Update the package.json and configure it as below and submit a pull request.
// Lodash package.json
// ...
"npmName": "lodash",
"npmFileMap": [{
"basePath": "/dist/",
"files": [
"*"
]
}],
// ...
npmName should map to the name of the library on NPM npmFileMap is a white list of files to take from the NPM tarball and host on the cdn basePath will be ignored when copying over to the cdn files is a pattern matcher that you can select many files with

The above example looks in the tarball whose structure might look like

dist/lodash.js
dist/lodash.min.js
README It then will look for dist/* which will find the two files inside the dist folder. It will now copy it over to cdnjs but without the dist path. Such that they will end up. ajax/libs/lodash.js/2.0/lodash.js

window.innerWidth unreliable on iOS devices

It's better to use screen.width on iOS devices, window.innerWidth will display iPhone resolution, not actual screen dimensions that are useful. For instance, on an iPhone if I make an element width:100%; with CSS it will report back a width of 320px, which is not equal to window.innerWidth but is equal to screen.width. This implementation also doesn't use an onorientationchange event that would be handy for mobile device. Checkout what I did here on github: https://github.com/steveblue/res/blob/master/res.js

min and max values

Maybe we can introduce min and max values?

So imaging this

<body breakpoint="{'break1': [0, 480], 'break2': [481, 767], 'break3':[768, 979], 'break4':1200}">

So you can even specify ranges, like the @media tag in CSS3?

@media (min-width: 768px) and (max-width: 979px) { ... }

What do you think?