fix(layout): corrections to material.core.layout module and tests

fixes to unintended, premature commit of `material.core.layout` code and tests.

src/core/core.js

@@ -7,6 +7,7 @@ angular
  'ngAnimate',
  'material.animate',
  'material.core.gestures',
+ 'material.core.layout',
  'material.core.theming'
  ])
  .directive('mdTemplate', MdTemplateDirective)

src/core/services/layout/layouts.js → src/core/services/layout/layout.js

@@ -2,7 +2,46 @@
 
  'use strict';
 
- angular.module('material.layouts', ['material.core'])
+ /**
+ *
+ * The original ngMaterial Layout solution used attribute selectors and CSS.
+ *
+ * ```html
+ * <div layout="column"> My Content </div>
+ * ```
+ *
+ * ```css
+ * [layout] {
+ * box-sizing: border-box;
+ * display:flex;
+ * }
+ * [layout=column] {
+ * flex-direction : column
+ * }
+ * ```
+ *
+ * Use of attribute selectors creates significant performance impacts in some
+ * browsers... mainly IE.
+ *
+ * This module registers directives that allow the same layout attributes to be
+ * interpreted and converted to class selectors. The directive will add equivalent classes to each element that
+ * contains a Layout directive.
+ *
+ * ```html
+ * <div layout="column" class="layout layout-column"> My Content </div>
+ *```
+ *
+ * ```css
+ * .layout {
+ * box-sizing: border-box;
+ * display:flex;
+ * }
+ * .layout-column {
+ * flex-direction : column
+ * }
+ * ```
+ */
+ angular.module('material.core.layout', [ ])
 
  // Attribute directives with optional value(s)
 

src/core/services/layout/layout.spec.js

@@ -0,0 +1,118 @@
+describe('layout directives', function() {
+
+ beforeEach(module('material.core'));
+
+ describe('expecting layout classes', function() {
+
+ var suffixes = ['sm', 'gt-sm', 'md', 'gt-md', 'lg', 'gt-lg'];
+
+ var directionValues = ['row', 'column'];
+ var flexOrderValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+ var flexValues = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 33, 34, 66, 67];
+ var offsetValues = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 33, 34, 66, 67];
+ var alignmentValues = [
+ 'center', 'center center', 'center start', 'center end',
+ 'end', 'end-center', 'end start', 'end end',
+ 'space-around', 'space-around center', 'space-around start', 'space-around end',
+ 'space-between', 'space-between center', 'space-between start', 'space-between end',
+ 'center center', 'start center', 'end center', 'space-between center', 'space-around center',
+ 'center start', 'start start', 'end start', 'space-between start', 'space-around start',
+ 'center end', 'start end', 'end end', 'space-between end', 'space-around end'
+ ];
+
+ var mappings = [
+ { attribute: 'layout', suffixes: suffixes, values: directionValues, addDirectiveAsClass: true, testStandAlone: true },
+ { attribute: 'layout-align', suffixes: suffixes, values: alignmentValues },
+ { attribute: 'layout-padding', testStandAlone: true },
+ { attribute: 'layout-margin', testStandAlone: true },
+ { attribute: 'layout-wrap', testStandAlone: true },
+ { attribute: 'layout-fill', testStandAlone: true },
+ { attribute: 'flex', suffixes: suffixes, values: flexValues, addDirectiveAsClass: true, testStandAlone: true},
+ { attribute: 'flex-order', suffixes: suffixes, values: flexOrderValues },
+ { attribute: 'offset', suffixes: suffixes, values: offsetValues },
+ { attribute: 'hide', suffixes: suffixes, testStandAlone: true },
+ { attribute: 'show', suffixes: suffixes, testStandAlone: true }
+ ];
+
+ // Run all the tests; iterating the mappings...
+
+ for (var i = 0; i < mappings.length; i++) {
+ var map = mappings[i];
+
+ if (map.testStandAlone) testMapping(map.attribute, map.attribute);
+ if (map.suffixes) testWithSuffix(map.attribute, map.suffixes, map.values, map.testStandAlone, map.addDirectiveAsClass);
+ if (map.values) testWithSuffixAndValue(map.attribute, map.values, undefined, map.addDirectiveAsClass);
+ }
+
+ /**
+ *
+ */
+ function testMapping(attribute, expectedClass) {
+ it('should fail if the class ' + expectedClass + ' was not added for attribute ' + attribute, inject(function($compile, $rootScope) {
+ var element = $compile('<div ' + attribute + '>Layout</div>')($rootScope);
+ expect(element.hasClass(expectedClass)).toBe(true);
+ }));
+ }
+
+ /**
+ *
+ */
+ function testWithSuffixAndValue(attribute, values, suffix, addDirectiveAsClass) {
+
+ for (var j = 0; j < values.length; j++) {
+ var value = values[j].toString();
+ var attr = suffix ? attribute + '-' + suffix : attribute;
+
+ var attrWithValue = buildAttributeWithValue(attr, value);
+ var expectedClass = buildExpectedClass(attr, value);
+
+ // Run each test.
+ testMapping(attrWithValue, expectedClass);
+ }
+
+ /**
+ * Build string of expected classes that should be added to the
+ * DOM element.
+ *
+ * Convert directive with value to classes
+ *
+ * @param attrClass String full attribute name; eg 'layout-gt-lg'
+ * @param attrValue String HTML directive; eg "column"
+ *
+ * @returns String to be used with element.addClass(...); eg `layout-gt-lg layout-gt-lg-column`
+ */
+ function buildExpectedClass(attrClass, attrValue) {
+ if (addDirectiveAsClass) attrClass += ' ' + attrClass;
+ return attrClass + "-" + attrValue.replace(/\s+/g, "-");
+ }
+
+ /**
+ * Build full string of expected directive with its value
+ * Note: The expected class always starts with the
+ * attribute name, add the suffix if any.
+ *
+ * @param attrClass String full attribute name; eg 'layout-gt-lg'
+ * @param attrValue String HTML directive; eg "column"
+ *
+ * @returns String like `layout-gt-lg="column"`
+ */
+ function buildAttributeWithValue(attr, value) {
+ return attr + '="' + value + '"';
+ }
+ }
+
+ /**
+ *
+ */
+ function testWithSuffix(attribute, suffixes, values, testStandAlone, addDirectiveAsClass) {
+ for (var j = 0; j < suffixes.length; j++) {
+ var suffix = suffixes[j];
+ var attr = attribute + '-' + suffix;
+
+ if (testStandAlone) testMapping(attr, attr);
+ if (values) testWithSuffixAndValue(attribute, values, suffix, addDirectiveAsClass);
+ }
+ }
+ });
+
+});