feat(grid-list): Implement mdc-grid-list (#47)

demos/index.html

@@ -33,6 +33,7 @@
           <li><a href="drawer/permanent-drawer-below-toolbar.html">Drawer (permanent, below toolbar)</a></li>
           <li><a href="elevation.html">Elevation</a></li>
           <li><a href="fab.html">FAB</a></li>
+          <li><a href="grid-list.html">Grid List</a></li>
           <li><a href="icon-toggle.html">Icon Toggle</a></li>
           <li><a href="layout-grid.html">Layout grid</a></li>
           <li><a href="list.html">List</a></li>

packages/material-components-web/index.js

@@ -17,6 +17,7 @@
 import * as base from '@material/base';
 import * as checkbox from '@material/checkbox';
 import * as formField from '@material/form-field';
+import * as gridList from '@material/grid-list';
 import * as iconToggle from '@material/icon-toggle';
 import * as radio from '@material/radio';
 import * as ripple from '@material/ripple';
@@ -31,6 +32,7 @@ import autoInit from '@material/auto-init';
 autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);
 autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
 autoInit.register('MDCRipple', ripple.MDCRipple);
+autoInit.register('MDCGridList', select.MDCGridList);
 autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
 autoInit.register('MDCRadio', radio.MDCRadio);
 autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
@@ -43,6 +45,7 @@ export {
   base,
   checkbox,
   formField,
+  gridList,
   iconToggle,
   radio,
   ripple,

packages/material-components-web/material-components-web.scss

@@ -22,6 +22,7 @@
 @import "@material/elevation/mdc-elevation";
 @import "@material/fab/mdc-fab";
 @import "@material/form-field/mdc-form-field";
+@import "@material/grid-list/mdc-grid-list";
 @import "@material/icon-toggle/mdc-icon-toggle";
 @import "@material/layout-grid/mdc-layout-grid";
 @import "@material/list/mdc-list";

packages/material-components-web/package.json

@@ -23,6 +23,7 @@
     "@material/elevation": "^0.1.3",
     "@material/fab": "^0.3.2",
     "@material/form-field": "^0.2.0",
+    "@material/grid-list": "^0.0.0",
     "@material/icon-toggle": "^0.1.4",
     "@material/layout-grid": "^0.1.1",
     "@material/list": "^0.2.2",

packages/mdc-grid-list/README.md

@@ -0,0 +1,117 @@
+# MDC Toolbar
+
+MDC Toolbar provides a RTL-aware Material Design toolbar component adhering to the
+[Material Design toolbar spec](https://www.google.com/design/spec/components/toolbars.html)
+Toolbars scroll with content by default, but supports fixed on
+top as well. Currently, this component does not yet support the "Waterfall" or
+"Flexible Header" patterns.
+
+
+## Installation
+
+```
+npm install --save @material/toolbar
+```
+
+
+## Usage
+
+Wrap the items with `mdc-toolbar` class in following way:
+
+```html
+<header class="mdc-toolbar">
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+    <a class="material-icons">menu</a>
+    <span class="mdc-toolbar__title">Title</span>
+  </section>
+</header>
+```
+
+### Fixed toolbars
+
+By default, toolbars scroll with the page content. To keep the toolbar fixed to
+the top of the screen, add an `mdc-toolbar--fixed` class to the toolbar element.
+
+**Adjusting sibling elements of fixed toolbars**
+
+When using `mdc-toolbar--fixed`, you can add the `mdc-toolbar-fixed-adjust`
+helper class to the toolbar's adjacent sibling element, which will ensure that
+the sibling element's top margin will be large enough such that the fixed
+toolbar will not overlay any of the element's content.
+
+```html
+<header class="mdc-toolbar mdc-toolbar--fixed">
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+    <span class="mdc-toolbar__title">Title</span>
+  </section>
+</header>
+<main class="mdc-toolbar-fixed-adjust">
+  <p class="demo-paragraph">
+    A demo paragraph here.
+  </p>
+</main>
+```
+
+### Sections
+
+Toolbar sections are aligned to the toolbar's center. You can change this
+behavior by applying `mdc-toolbar__section--align-start` or
+`mdc-toolbar__section--align-end` to align the sections to the start or the end
+of the toolbar (respectively).
+
+```html
+<header class="mdc-toolbar">
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+    Section aligns to start.
+  </section>
+  <section class="mdc-toolbar__section">
+    Section aligns to center.
+  </section>
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
+    Section aligns to end.
+  </section>
+</header>
+```
+
+Toolbar sections are laid out using flexbox. Each section will take up an equal
+amount of space within the toolbar.
+
+### Toolbar title
+
+You can use the `mdc-toolbar__title` element to style toolbar text representing
+a page's title, or an application name.
+
+```html
+<header class="mdc-toolbar">
+  <section class="mdc-toolbar__section">
+    <span class="mdc-toolbar__title">Title</span>
+  </section>
+</header>
+```
+
+### RTL Support
+
+`mdc-toolbar` is automatically RTL-aware, and will re-position elements whenever
+it, or its ancestors, has a `dir="rtl"` attribute.
+
+
+## Classes
+
+### Block
+
+The block class is `mdc-toolbar`. This defines the top-level toolbar element.
+
+### Element
+The component has `mdc-toolbar__section` and `mdc-toolbar__title` elements. You
+can add multiple sections to toolbar. Refer to Sections and Toolbar title for
+further details.
+
+### Modifier
+
+The provided modifiers are:
+
+| Class                                | Description                             |
+| -------------------------------------| --------------------------------------- |
+| `mdc-toolbar--fixed`                 | Make toolbar fixed to top of screen.    |
+| `mdc-toolbar__section--align-start`  | Makes section aligns to the start.      |
+| `mdc-toolbar__section--align-end`    | Makes section aligns to the end.        |

packages/mdc-grid-list/constants.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const strings = {
+  TILES_SELECTOR: '.mdc-grid-list__tiles',
+  TILE_SELECTOR: '.mdc-grid-tile',
+};

packages/mdc-grid-list/foundation.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {MDCFoundation} from '@material/base';
+import {strings} from './constants';
+
+export default class MDCGridListFoundation extends MDCFoundation {
+  static get strings() {
+    return strings;
+  }
+
+  static get defaultAdapter() {
+    return {
+      getOffsetWidth: () => /* number */ 0,
+      getTileOffsetWidthAtIndex: (/* index: number | null */) => /* number */ 0,
+      setTilesWidth: (/* value: number | null */) => {},
+      registerInteractionHandler: (/* type: string, handler: EventListener */) => {},
+      deregisterInteractionHandler: (/* type: string, handler: EventListener */) => {},
+    };
+  }
+  constructor(adapter) {
+    super(Object.assign(MDCGridListFoundation.defaultAdapter, adapter));
+    this.resizeHandler_ = () => this.alignCenter();
+  }
+  init() {
+    this.alignCenter();
+    this.adapter_.registerInteractionHandler('resize', this.resizeHandler_);
+  }
+  destroy() {
+    this.adapter_.deregisterInteractionHandler('resize', this.resizeHandler_);
+  }
+  alignCenter() {
+    const gridWidth = this.adapter_.getOffsetWidth();
+    const itemWidth = this.adapter_.getTileOffsetWidthAtIndex(0);
+    this.adapter_.setTilesWidth(itemWidth * Math.floor(gridWidth / itemWidth));
+  }
+}

packages/mdc-grid-list/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {MDCComponent} from '@material/base';
+
+import MDCGridListFoundation from './foundation';
+
+export {MDCGridListFoundation};
+
+export class MDCGridList extends MDCComponent {
+  static attachTo(root) {
+    return new MDCGridList(root);
+  }
+
+  getDefaultFoundation() {
+    return new MDCGridListFoundation({
+      getOffsetWidth: () => this.root_.offsetWidth,
+      getTileOffsetWidthAtIndex: (index) => {
+        this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR)[index].offsetWidth;
+      },
+      setTilesWidth: (value) => {
+        this.root_.querySelector(MDCGridListFoundation.strings.TILES_SELECTOR).style.width = value;
+      },
+      registerInteractionHandler: (type, handler) => this.root_.addEventListener(type, handler),
+      deregisterInteractionHandler: (type, handler) => this.root_.removeEventListener(type, handler),
+    });
+  }
+}