Skip to content

Merged with doo3 remote #2

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Feb 17, 2015
Merged

Merged with doo3 remote #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2449708
Allow definition of breakpoints in $css defaults
Feb 2, 2015
0b6140e
route event change
Feb 10, 2015
a3ef8b5
preload may call the callback function too early
Feb 10, 2015
f1dd8d1
function syntax support for routes and states
Feb 10, 2015
0623215
preparing for v1.0.7 release
Feb 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 50 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,20 +222,58 @@ AngularCSS supports "smart media queries". This means that stylesheets with medi
This will significantly optimize the load time of your apps.

```js
css: [
{
href: 'my-page/my-page.mobile.css',
media: 'screen and (max-width: 480px)'
}, {
href: 'my-page/my-page.tablet.css',
media: 'screen and (min-width: 768px) and (max-width: 1024px)'
}, {
href: 'my-page/my-page.desktop.css',
media: 'screen and (min-width: 1224px)'
}
]
$routeProvider
.when('/my-page', {
templateUrl: 'my-page/my-page.html',
css: [
{
href: 'my-page/my-page.mobile.css',
media: '(max-width: 480px)'
}, {
href: 'my-page/my-page.tablet.css',
media: '(min-width: 768px) and (max-width: 1024px)'
}, {
href: 'my-page/my-page.desktop.css',
media: '(min-width: 1224px)'
}
]
});
```

Even though you can use the `media` property to specify media queries, the best way to manage your breakpoins is by settings them in the provider's defaults. For example:

```js
myApp.config(function($routeProvider, $cssProvider) {

angular.extend($cssProvider.defaults, {
breakpoints: {
mobile: '(max-width: 480px)',
tablet: '(min-width: 768px) and (max-width: 1024px)',
desktop: '(min-width: 1224px)'
}
});

$routeProvider
.when('/my-page', {
templateUrl: 'my-page/my-page.html',
css: [
{
href: 'my-page/my-page.mobile.css',
breakpoint: 'mobile'
}, {
href: 'my-page/my-page.tablet.css',
breakpoint: 'tablet'
}, {
href: 'my-page/my-page.desktop.css',
breakpoint: 'desktop'
}
]
});

});
```


### Config

You can configure AngularCSS at the global level or at the stylesheet level.
Expand Down
91 changes: 70 additions & 21 deletions angular-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* AngularCSS - CSS on-demand for AngularJS
* @version v1.0.6
* @version v1.0.7
* @author DOOR3, Alex Castillo
* @link http://door3.github.io/angular-css
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down Expand Up @@ -35,16 +35,17 @@
weight: 0
};

this.$get = ['$rootScope','$injector','$window','$timeout','$compile','$http','$filter','$log',
function $get($rootScope, $injector, $window, $timeout, $compile, $http, $filter, $log) {
this.$get = ['$rootScope','$injector','$q','$window','$timeout','$compile','$http','$filter','$log',
function $get($rootScope, $injector, $q, $window, $timeout, $compile, $http, $filter, $log) {

var $css = {};

var template = '<link ng-repeat="stylesheet in stylesheets track by $index | orderBy: \'weight\' " rel="{{ stylesheet.rel }}" type="{{ stylesheet.type }}" ng-href="{{ stylesheet.href }}" ng-attr-media="{{ stylesheet.media }}">';

// Variables - default options that can be overridden from application config
var mediaQuery = {}, mediaQueryListener = {}, mediaQueriesToIgnore = ['print'], options = angular.extend({}, defaults),
container = angular.element(document.querySelector ? document.querySelector(options.container) : document.getElementsByTagName(options.container)[0]);
container = angular.element(document.querySelector ? document.querySelector(options.container) : document.getElementsByTagName(options.container)[0]),
dynamicPaths = [];

// Parse all directives
angular.forEach($directives, function (directive, key) {
Expand All @@ -69,7 +70,9 @@
function $routeEventListener(event, current, prev) {
// Removes previously added css rules
if (prev) {
$css.remove($css.getFromRoute(prev));
$css.remove($css.getFromRoute(prev).concat(dynamicPaths));
// Reset dynamic paths array
dynamicPaths.length = 0;
}
// Adds current css rules
if (current) {
Expand All @@ -83,21 +86,39 @@
function $stateEventListener(event, current, params, prev) {
// Removes previously added css rules
if (prev) {
$css.remove($css.getFromState(prev));
$css.remove($css.getFromState(prev).concat(dynamicPaths));
// Reset dynamic paths array
dynamicPaths.length = 0;
}
// Adds current css rules
if (current) {
$css.add($css.getFromState(current));
}
}

/**
* Map breakpoitns defined in defaults to stylesheet media attribute
**/
function mapBreakpointToMedia(stylesheet) {
if (angular.isDefined(options.breakpoints)) {
if (stylesheet.breakpoint in options.breakpoints) {
stylesheet.media = options.breakpoints[stylesheet.breakpoint];
}
delete stylesheet.breakpoints;
}
}

/**
* Parse: returns array with full all object based on defaults
**/
function parse(obj) {
if (!obj) {
return;
}
// Function syntax
if (angular.isFunction(obj)) {
obj = angular.copy($injector.invoke(obj));
}
// String syntax
if (angular.isString(obj)) {
obj = angular.extend({
Expand All @@ -122,6 +143,8 @@
obj = angular.extend(item, options);
});
}
// Map breakpoint to media attribute
mapBreakpointToMedia(obj);
return obj;
}

Expand All @@ -135,10 +158,10 @@
$rootScope.$on('$directiveAdd', $directiveAddEventListener);

// Routes event listener ($route required)
$rootScope.$on('$routeChangeStart', $routeEventListener);
$rootScope.$on('$routeChangeSuccess', $routeEventListener);

// States event listener ($state required)
$rootScope.$on('$stateChangeStart', $stateEventListener);
$rootScope.$on('$stateChangeSuccess', $stateEventListener);

/**
* Bust Cache
Expand Down Expand Up @@ -249,10 +272,16 @@
if (css) {
if (angular.isArray(css)) {
angular.forEach(css, function (cssItem) {
if (angular.isFunction(cssItem)) {
dynamicPaths.push(parse(cssItem));
}
result.push(parse(cssItem));
});
} else {
result.push(parse(css));
if (angular.isFunction(css)) {
dynamicPaths.push(parse(css));
}
result.push(parse(css));
}
}
return result;
Expand Down Expand Up @@ -288,6 +317,9 @@
if (angular.isDefined(state.views)) {
angular.forEach(state.views, function (item) {
if (item.css) {
if (angular.isFunction(item.css)) {
dynamicPaths.push(parse(item.css));
}
result.push(parse(item.css));
}
});
Expand All @@ -296,11 +328,17 @@
if (angular.isDefined(state.children)) {
angular.forEach(state.children, function (child) {
if (child.css) {
if (angular.isFunction(child.css)) {
dynamicPaths.push(parse(child.css));
}
result.push(parse(child.css));
}
if (angular.isDefined(child.children)) {
angular.forEach(child.children, function (childChild) {
if (childChild.css) {
if (angular.isFunction(childChild.css)) {
dynamicPaths.push(parse(childChild.css));
}
result.push(parse(childChild.css));
}
});
Expand All @@ -312,10 +350,16 @@
// For multiple stylesheets
if (angular.isArray(state.css)) {
angular.forEach(state.css, function (itemCss) {
if (angular.isFunction(itemCss)) {
dynamicPaths.push(parse(itemCss));
}
result.push(parse(itemCss));
});
// For single stylesheets
} else {
if (angular.isFunction(state.css)) {
dynamicPaths.push(parse(state.css));
}
result.push(parse(state.css));
}
}
Expand Down Expand Up @@ -363,21 +407,26 @@
if ($injector.has('$state')) {
Array.prototype.push.apply(stylesheets, $css.getFromStates($injector.get('$state').get()));
}
stylesheets = filterBy(stylesheets, 'preload');
}
stylesheets = filterBy(stylesheets, 'preload');
angular.forEach(stylesheets, function(stylesheet, index) {
// Preload via ajax request
$http.get(stylesheet.href)
.success(function (response) {
$log.debug('preload response: ' + response);
if (stylesheets.length === (index + 1) && angular.isFunction(callback)) {
callback(stylesheets);
}
if (!angular.isArray(stylesheets)) {
stylesheets = [stylesheets];
}
var stylesheetLoadPromises = [];
angular.forEach(stylesheets, function(stylesheet, key) {
stylesheet = stylesheets[key] = parse(stylesheet);
stylesheetLoadPromises.push(
// Preload via ajax request
$http.get(stylesheet.href).error(function (response) {
$log.error('AngularCSS: Incorrect path for ' + stylesheet.href);
})
.error(function (response) {
$log.error('Incorrect path for ' + stylesheet.href);
});
);
});
if (angular.isFunction(callback)) {
$q.all(stylesheetLoadPromises).then(function () {
callback(stylesheets);
});
}
};

/**
Expand Down
Loading