From 811d33e3ecf0785e88afb3ccee6ebc8f43c0ffb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Mon, 6 Oct 2014 12:20:34 +0100 Subject: [PATCH] Implements header-panel. Includes support for standard, seamed, waterfall (multiple sizes) and scroll modes. --- app/material-styleguide.html | 15 ++-- .../header-panel/_header_panel.scss | 65 +++++++++++++++++ app/styleguide/header-panel/demo.html | 72 +++++++++++++++++++ app/styleguide/header-panel/demo.scss | 17 +++++ app/styleguide/header-panel/header-panel.js | 55 ++++++++++++++ 5 files changed, 219 insertions(+), 5 deletions(-) create mode 100644 app/styleguide/header-panel/_header_panel.scss create mode 100644 app/styleguide/header-panel/demo.html create mode 100644 app/styleguide/header-panel/demo.scss create mode 100644 app/styleguide/header-panel/header-panel.js diff --git a/app/material-styleguide.html b/app/material-styleguide.html index 3d192095..d8fb9012 100644 --- a/app/material-styleguide.html +++ b/app/material-styleguide.html @@ -100,15 +100,20 @@

Navigation

+ +
+

Icons

+ +
+ +
+

Header panel

+ +
-
-

Icons

- -
- + + + diff --git a/app/styleguide/header-panel/demo.scss b/app/styleguide/header-panel/demo.scss new file mode 100644 index 00000000..0b22f825 --- /dev/null +++ b/app/styleguide/header-panel/demo.scss @@ -0,0 +1,17 @@ +@import '../styleguide_demo_bp'; +@import '_header_panel'; + +.demo-container { + width: 400px; + float: left; + margin: 0 40px 40px 0; +} + +.demo-content { + height: 2000px; + background: linear-gradient(rgb(214, 227, 231), lightblue); +} + +.header-panel { + max-height: 500px; +} diff --git a/app/styleguide/header-panel/header-panel.js b/app/styleguide/header-panel/header-panel.js new file mode 100644 index 00000000..4a6c8226 --- /dev/null +++ b/app/styleguide/header-panel/header-panel.js @@ -0,0 +1,55 @@ +'use strict'; + +(function() { + window.addEventListener('load', function() { + var panels = document.querySelectorAll('.header-panel'); + var MODE = { + STANDARD: 0, + SEAMED: 1, + WATERFALL: 2, + SCROLL: 3 + }; + var SHADOW_CLASS = 'header-panel-shadow'; + var COMPACT_CLASS = 'header-panel-compact'; + + var scrollHandler = function(mode, header, content) { + return function() { + if (mode === MODE.WATERFALL) { + if (content.scrollTop > 0) { + header.classList.add(SHADOW_CLASS); + header.classList.add(COMPACT_CLASS); + } else { + header.classList.remove(SHADOW_CLASS); + header.classList.remove(COMPACT_CLASS); + } + } + }; + }; + + for (var i = 0; i < panels.length; i++) { + var panel = panels[i]; + var header = panel.querySelector('.header-panel-header'); + var content = panel.querySelector('.header-panel-content'); + var mode = MODE.STANDARD; + if (panel.classList.contains('header-panel-seamed')) { + mode = MODE.SEAMED; + } else if (panel.classList.contains('header-panel-waterfall')) { + mode = MODE.WATERFALL; + } else if (panel.classList.contains('header-panel-scroll')) { + mode = MODE.SCROLL; + } + + if (mode === MODE.STANDARD) { + header.classList.add(SHADOW_CLASS); + } else if (mode === MODE.SEAMED || mode === MODE.SCROLL) { + header.classList.remove(SHADOW_CLASS); + } else if (mode === MODE.WATERFALL) { + var handler = scrollHandler(mode, header, content); + content.addEventListener('scroll', handler); + handler(); + } + } + + }); + +})();