Skip to content

Commit 2376b91

Browse files
enricoluciaenricolucia
committed
Merge pull request #2 from door3/master
Merged with doo3 remote
2 parents 1de4b19 + 0623215 commit 2376b91

File tree

5 files changed

+123
-36
lines changed

5 files changed

+123
-36
lines changed

‎README.md

Lines changed: 50 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -222,20 +222,58 @@ AngularCSS supports "smart media queries". This means that stylesheets with medi
222222
This will significantly optimize the load time of your apps.
223223

224224
```js
225-
css: [
226-
{
227-
href: 'my-page/my-page.mobile.css',
228-
media: 'screen and (max-width: 480px)'
229-
}, {
230-
href: 'my-page/my-page.tablet.css',
231-
media: 'screen and (min-width: 768px) and (max-width: 1024px)'
232-
}, {
233-
href: 'my-page/my-page.desktop.css',
234-
media: 'screen and (min-width: 1224px)'
235-
}
236-
]
225+
$routeProvider
226+
.when('/my-page', {
227+
templateUrl: 'my-page/my-page.html',
228+
css: [
229+
{
230+
href: 'my-page/my-page.mobile.css',
231+
media: '(max-width: 480px)'
232+
}, {
233+
href: 'my-page/my-page.tablet.css',
234+
media: '(min-width: 768px) and (max-width: 1024px)'
235+
}, {
236+
href: 'my-page/my-page.desktop.css',
237+
media: '(min-width: 1224px)'
238+
}
239+
]
240+
});
237241
```
238242

243+
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:
244+
245+
```js
246+
myApp.config(function($routeProvider, $cssProvider) {
247+
248+
angular.extend($cssProvider.defaults, {
249+
breakpoints: {
250+
mobile: '(max-width: 480px)',
251+
tablet: '(min-width: 768px) and (max-width: 1024px)',
252+
desktop: '(min-width: 1224px)'
253+
}
254+
});
255+
256+
$routeProvider
257+
.when('/my-page', {
258+
templateUrl: 'my-page/my-page.html',
259+
css: [
260+
{
261+
href: 'my-page/my-page.mobile.css',
262+
breakpoint: 'mobile'
263+
}, {
264+
href: 'my-page/my-page.tablet.css',
265+
breakpoint: 'tablet'
266+
}, {
267+
href: 'my-page/my-page.desktop.css',
268+
breakpoint: 'desktop'
269+
}
270+
]
271+
});
272+
273+
});
274+
```
275+
276+
239277
### Config
240278

241279
You can configure AngularCSS at the global level or at the stylesheet level.

‎angular-css.js

Lines changed: 70 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* AngularCSS - CSS on-demand for AngularJS
3-
* @version v1.0.6
3+
* @version v1.0.7
44
* @author DOOR3, Alex Castillo
55
* @link http://door3.github.io/angular-css
66
* @license MIT License, http://www.opensource.org/licenses/MIT
@@ -35,16 +35,17 @@
3535
weight: 0
3636
};
3737

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

4141
var $css = {};
4242

4343
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 }}">';
4444

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

4950
// Parse all directives
5051
angular.forEach($directives, function (directive, key) {
@@ -69,7 +70,9 @@
6970
function $routeEventListener(event, current, prev) {
7071
// Removes previously added css rules
7172
if (prev) {
72-
$css.remove($css.getFromRoute(prev));
73+
$css.remove($css.getFromRoute(prev).concat(dynamicPaths));
74+
// Reset dynamic paths array
75+
dynamicPaths.length = 0;
7376
}
7477
// Adds current css rules
7578
if (current) {
@@ -83,21 +86,39 @@
8386
function $stateEventListener(event, current, params, prev) {
8487
// Removes previously added css rules
8588
if (prev) {
86-
$css.remove($css.getFromState(prev));
89+
$css.remove($css.getFromState(prev).concat(dynamicPaths));
90+
// Reset dynamic paths array
91+
dynamicPaths.length = 0;
8792
}
8893
// Adds current css rules
8994
if (current) {
9095
$css.add($css.getFromState(current));
9196
}
9297
}
9398

99+
/**
100+
* Map breakpoitns defined in defaults to stylesheet media attribute
101+
**/
102+
function mapBreakpointToMedia(stylesheet) {
103+
if (angular.isDefined(options.breakpoints)) {
104+
if (stylesheet.breakpoint in options.breakpoints) {
105+
stylesheet.media = options.breakpoints[stylesheet.breakpoint];
106+
}
107+
delete stylesheet.breakpoints;
108+
}
109+
}
110+
94111
/**
95112
* Parse: returns array with full all object based on defaults
96113
**/
97114
function parse(obj) {
98115
if (!obj) {
99116
return;
100117
}
118+
// Function syntax
119+
if (angular.isFunction(obj)) {
120+
obj = angular.copy($injector.invoke(obj));
121+
}
101122
// String syntax
102123
if (angular.isString(obj)) {
103124
obj = angular.extend({
@@ -122,6 +143,8 @@
122143
obj = angular.extend(item, options);
123144
});
124145
}
146+
// Map breakpoint to media attribute
147+
mapBreakpointToMedia(obj);
125148
return obj;
126149
}
127150

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

137160
// Routes event listener ($route required)
138-
$rootScope.$on('$routeChangeStart', $routeEventListener);
161+
$rootScope.$on('$routeChangeSuccess', $routeEventListener);
139162

140163
// States event listener ($state required)
141-
$rootScope.$on('$stateChangeStart', $stateEventListener);
164+
$rootScope.$on('$stateChangeSuccess', $stateEventListener);
142165

143166
/**
144167
* Bust Cache
@@ -249,10 +272,16 @@
249272
if (css) {
250273
if (angular.isArray(css)) {
251274
angular.forEach(css, function (cssItem) {
275+
if (angular.isFunction(cssItem)) {
276+
dynamicPaths.push(parse(cssItem));
277+
}
252278
result.push(parse(cssItem));
253279
});
254280
} else {
255-
result.push(parse(css));
281+
if (angular.isFunction(css)) {
282+
dynamicPaths.push(parse(css));
283+
}
284+
result.push(parse(css));
256285
}
257286
}
258287
return result;
@@ -288,6 +317,9 @@
288317
if (angular.isDefined(state.views)) {
289318
angular.forEach(state.views, function (item) {
290319
if (item.css) {
320+
if (angular.isFunction(item.css)) {
321+
dynamicPaths.push(parse(item.css));
322+
}
291323
result.push(parse(item.css));
292324
}
293325
});
@@ -296,11 +328,17 @@
296328
if (angular.isDefined(state.children)) {
297329
angular.forEach(state.children, function (child) {
298330
if (child.css) {
331+
if (angular.isFunction(child.css)) {
332+
dynamicPaths.push(parse(child.css));
333+
}
299334
result.push(parse(child.css));
300335
}
301336
if (angular.isDefined(child.children)) {
302337
angular.forEach(child.children, function (childChild) {
303338
if (childChild.css) {
339+
if (angular.isFunction(childChild.css)) {
340+
dynamicPaths.push(parse(childChild.css));
341+
}
304342
result.push(parse(childChild.css));
305343
}
306344
});
@@ -312,10 +350,16 @@
312350
// For multiple stylesheets
313351
if (angular.isArray(state.css)) {
314352
angular.forEach(state.css, function (itemCss) {
353+
if (angular.isFunction(itemCss)) {
354+
dynamicPaths.push(parse(itemCss));
355+
}
315356
result.push(parse(itemCss));
316357
});
317358
// For single stylesheets
318359
} else {
360+
if (angular.isFunction(state.css)) {
361+
dynamicPaths.push(parse(state.css));
362+
}
319363
result.push(parse(state.css));
320364
}
321365
}
@@ -363,21 +407,26 @@
363407
if ($injector.has('$state')) {
364408
Array.prototype.push.apply(stylesheets, $css.getFromStates($injector.get('$state').get()));
365409
}
410+
stylesheets = filterBy(stylesheets, 'preload');
366411
}
367-
stylesheets = filterBy(stylesheets, 'preload');
368-
angular.forEach(stylesheets, function(stylesheet, index) {
369-
// Preload via ajax request
370-
$http.get(stylesheet.href)
371-
.success(function (response) {
372-
$log.debug('preload response: ' + response);
373-
if (stylesheets.length === (index + 1) && angular.isFunction(callback)) {
374-
callback(stylesheets);
375-
}
412+
if (!angular.isArray(stylesheets)) {
413+
stylesheets = [stylesheets];
414+
}
415+
var stylesheetLoadPromises = [];
416+
angular.forEach(stylesheets, function(stylesheet, key) {
417+
stylesheet = stylesheets[key] = parse(stylesheet);
418+
stylesheetLoadPromises.push(
419+
// Preload via ajax request
420+
$http.get(stylesheet.href).error(function (response) {
421+
$log.error('AngularCSS: Incorrect path for ' + stylesheet.href);
376422
})
377-
.error(function (response) {
378-
$log.error('Incorrect path for ' + stylesheet.href);
379-
});
423+
);
380424
});
425+
if (angular.isFunction(callback)) {
426+
$q.all(stylesheetLoadPromises).then(function () {
427+
callback(stylesheets);
428+
});
429+
}
381430
};
382431

383432
/**

0 commit comments

Comments
 (0)