leifoolsen / mdl-ext Goto Github PK

Create a dialog manager .- to manage dialogs

mdlext-accordion and mdlext-select adds evetn listeners. Must implement "mdlDowngrade_" and listen to "mdl-componentdowngraded" event to detach listeners before destruction. In SPA's "componentHandler.downgradeElements" must be called before removing MDL-nodes from DOM.

When using lib/mdl-ext.min.css (from 0.8.12), the down arrows are missing from selectfields. Using lib/mdl-ext.css, they render as expected. Tested in Chrome.

When an text field is empty, the floating label is centered vertically in text field. It should be in line with text entered into a field.

Sticky header does not hide the second row if header has class mdl-layout__header--waterfall

A lightboard, also known as a lightbox, is a translucent surface illuminated from behind, used for situations where a shape laid upon the surface needs to be seen with high contrast. In the "old days" of photography photograpers used a lightboard to get a quick view of their slides. The goal is to create a responsive lightbox design, based on flex layout, similar to what is used in Adobe LightRoom to browse images.

Accordion should be managed by the MDL componentHandler

An accordion should convey the visibility of each tabpanel by maintaining its aria-hidden state.

Reposition/resize lightbox when browser resizes or orientation changes

A lightboard needs a lightbox friend :-)

Create beta release with selectfield component included. Verify that npm install --save-dev works

In some cases the focus outline is visible. Discovered when using with React.

.. or it could be a react-mdl issue?

Dropdowm must spesify a contrast color for text

Simplify release with semantic release and commitizen

Padding left must be corrected. If selected text is wider than the input field width, the text conflicts with the dropdown arrow.

Add a theme which provides bordered text- and select fields

Improvement: The carousel should focus slide when it receives a scroll command.

• first: focus first slide in list
• last: focus last slde in list
• scroll prev: focus leftmost slide in view
• scroll-next: focus rightmost slide in view

Polyfilling the Customevent constructor for IE11 must be handled per module due to bug in the MDL framework.

Will use a strategy similar to what is provided i the Google Dialog Polyfill.

Create a MDL based carousel that advance or rotate images in a fixed space

Markup:

• Use a list to hold each image to display (ul li figure img figcaption)

Features:

• Navigate carousel using keyboard (arrow keys, tab, pgup, pgdown, home, end), mouse drag, touch or by sending custom events to the carousel (first, scroll-prev, prev, next, scroll-next, last, play, pause)
• Select a particular image using enter or space key, or by clicking
• Move images from right to left at a given interval; slideshow
• Set slideshow interval via a data attribute or as a part of the play custom event
• Stop slideshow via custom event (pause) or by a user interaction, e.g clicking an image
• User interactions via keyboard or mouse may be blocked, if configured
• Start slideshow at page load using a data attribute
• The carousel should emit custom events reflecting a user action. E.g. clicking an image will emit a 'select' event with a detail object holding a reference to the selected image.
• The carousel should pause any running animation on window.bur or tab.blur
• The carousel should pause any running animation when carousel is not i viewport

Limitations:

• Only horizontal layout in first release

move variables in ./src/color-themes/_color-themes.scss to ./src/_variables.scss

The sticky header should not show or hide itself before abs(scroll distance) >= height of header. Then an animation effect should be used to show/hide the heaer.

Element Queries are a new way of writing CSS styles so the rules apply to individual elements on the page, instead of to the whole page as one document like in regular CSS Media Queries.

References:

• Beyond Media Queries — It’s Time to Get Elemental
• Media Queries Are Not The Answer: Element Query Polyfill
• Why Element Queries Matter
• Use element queries today with eq.js
• Media Queries are a Hack
• Forget Mobile-First & Desktop-First, it's Time to Think Element-First

Will use eq.js since it works well with SASS, and element queries work without requireing a server to run.

Some alternatives:

• EQCSS
• CSS Element Queries
• BoomQueries

Implement a theme where the input fields are bordered

The focus outline removed in #40 should be reset to it's state before fix. The problem was that the client forgot to call componentHandler.upgradeElement(element, 'MaterialExtSelectfield') after inserting a selectield. Showing the focus outline provides a fallback if the upgradeElement method is not called.

A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.

The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.

Sticky header should work with a drawer, with a fixed fixed drawer and without any drawer in markup.

1. Selectfiled is not aligned vertically with mdl-textfield
2. Padding left must be spesified. If an item that is wider than the input field is selected, the text conflicts with the dropdown arrow.

A client should be able to send toggle messages to an accordion:

• expand-all: sets all panels to "open" state
• collapse-all: removes "open" state from panels
• open(panel): set open state on a given panel
• close(panel): removes "open" stat on a given panel
• toggle(panel): toggles a panels "open" state

Element Queries are a new way of writing CSS styles so the rules apply to individual elements on the page, instead of to the whole page as one document like in regular CSS Media Queries.

References:

• Beyond Media Queries — It’s Time to Get Elemental
• Media Queries Are Not The Answer: Element Query Polyfill
• Why Element Queries Matter
• Use element queries today with eq.js
• Media Queries are a Hack
• Forget Mobile-First & Desktop-First, it's Time to Think Element-First

Will use eq.js since it works well with SASS, and element queries work without requireing a server to run.

Some alternatives:

• EQCSS
• CSS Element Queries
• BoomQueries

Hello Leif,

I played a bit with your accordion - nice work.
While in your examples the opend accordion sections are just big enough to contain their respective content, I somehow managed to create an accordion that always opens its section to the bottom of the browser window. Is there a way to influence this bevaviour deterministically?

Best regards, Bernd

Material Design Lite uses primary color for interactive elements, which is not in line with the Material Design Color guide, https://www.google.com/design/spec/style/color.html#color-color-schemes.

According to the guide this is the correct use:

The accent should be used for the floating action button and interactive elements, such as:

• Text fields and cursors
• Text selection
• Progress bars
• Selection controls, buttons, and sliders
• Links

The color-themes component should use the correct definition. All interactive elements in the color-themes component, except buttons, should use accent color.

Incorrect use of RequestAnimationFrame in LightBox
Correct use, see: https://developer.mozilla.org/ru/docs/Web/Events/resize

Duplicate of #10

Let the header listen to changes in DOM so it can adjust width when/if content changes

Set subtree: true in observer:

        new MutationObserver( ( /*mutations*/ ) => {
           ....
        }).observe( this.content_, {
          attributes: false,
          childList: true,
          characterData: false,
          subtree: true  // <== Add this
        });

Unnecessary enhancement.

MDL provides only one color theme. Many designs require more than one theme, e.g. a dark and a light theme.