Permalink
Browse files

reorg: MdlAccordion registers now the 'panel-part' and not the whole …

…group
  • Loading branch information...
MikeMitterer committed Jul 22, 2015
1 parent 0e6eb81 commit fa86d3aff0939ff114b8f07d54605f0d431c63d3
@@ -4,25 +4,25 @@
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<h5>Multiple sections can be open at the same time</h5>
<div class="mdl-accordion-group mdl-js-accordion mdl-js-ripple-effect">
<div class="mdl-accordion-group mdl-js-ripple-effect">
<!-- Panel 1 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 2 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
@@ -34,25 +34,25 @@ <h5 class="mdl-accordion--header">Header</h5>
</div>
<div class="preview-block sample">
<h5>Only one section is open</h5>
<div class="mdl-accordion-group mdl-js-accordion mdl-accordion--radio-type mdl-js-ripple-effect">
<div class="mdl-accordion-group mdl-accordion--radio-type mdl-js-ripple-effect">
<!-- Panel 1 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 2 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
@@ -51,25 +51,25 @@
<section class="demo-section demo-section--accordion">
<div class="demo-preview-block">
<h5>Multiple sections can be open at the same time</h5>
<div class="mdl-accordion-group mdl-js-accordion mdl-js-ripple-effect">
<div class="mdl-accordion-group mdl-js-ripple-effect">
<!-- Panel 1 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 2 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
@@ -80,25 +80,25 @@ <h5 class="mdl-accordion--header">Header</h5>
</div>
<div class="preview-block sample">
<h5>Only one section is open</h5>
<div class="mdl-accordion-group mdl-js-accordion mdl-accordion--radio-type mdl-js-ripple-effect">
<div class="mdl-accordion-group mdl-accordion--radio-type mdl-js-ripple-effect">
<!-- Panel 1 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 2 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
View
@@ -26,6 +26,7 @@ import 'dart:mirrors';
import 'dart:html' as dom;
import 'dart:async';
import 'dart:js';
import 'package:logging/logging.dart';
import 'package:validate/validate.dart';
@@ -83,7 +83,7 @@ class DomRenderer {
//element.append(child);
parent.insertAdjacentElement("beforeEnd",child);
callAttached(child);
_callAttached(child);
parent.classes.remove(_cssClasses.LOADING);
parent.classes.add(_cssClasses.LOADED);
@@ -138,7 +138,7 @@ class DomRenderer {
parent.insertAdjacentElement("beforeEnd",child);
}
callAttached(child);
_callAttached(child);
parent.classes.remove(_cssClasses.LOADING);
parent.classes.add(_cssClasses.LOADED);
@@ -162,7 +162,7 @@ class DomRenderer {
//- private -----------------------------------------------------------------------------------
dom.NodeValidator _validator() {
dom.NodeValidator _validator() {
final dom.NodeValidator validator = new dom.NodeValidatorBuilder.common() // html5 + Templating
..allowNavigation()
..allowImages()
@@ -174,6 +174,30 @@ class DomRenderer {
return validator;
}
/// Calls the MdlComponents attached-function for the given [element] and all it's children.
void _callAttached(final dom.Element element) {
//final Logger _logger = new Logger('mdlcore.callAttached');
if(element is dom.HtmlElement) {
var jsElement = new JsObject.fromBrowserObject(element);
if(jsElement.hasProperty(MDL_COMPONENT_PROPERTY)) {
final List<String> componentsForElement = (jsElement[MDL_COMPONENT_PROPERTY] as String).split(",");
componentsForElement.forEach((final String componentName) {
final MdlComponent component = jsElement[componentName] as MdlComponent;
component.attached();
//_logger.info("Attached ${component}");
});
}
}
// Iterate through all children
element.children.forEach( (final dom.Element child) {
_callAttached(child);
});
}
}
@@ -26,6 +26,8 @@ class _MaterialAccordionCssClasses {
static const String MAIN_CLASS = "mdl-js-accordion";
final String GROUP = "mdl-accordion-group";
final String ACCORDION_TYPE = "mdl-accordion--radio-type";
final String NAVIGATION = "mdl-accordion--navigation";
@@ -80,44 +82,52 @@ void registerMaterialAccordion() => componentHandler().register(materialAccordio
* <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
* </div>
* </div>
* </div><!-- .mdl-accordion -->
* </div><!-- .mdl-accordion -->
*/
class MaterialAccordion extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialAccordion');
static const _MaterialAccordionConstant _constant = const _MaterialAccordionConstant();
static const _MaterialAccordionCssClasses _cssClasses = const _MaterialAccordionCssClasses();
dom.HtmlElement _group = null;
MaterialAccordion.fromElement(final dom.HtmlElement element,final di.Injector injector)
: super(element,injector) {
_init();
//_init();
}
static MaterialAccordion widget(final dom.HtmlElement element) => mdlComponent(element,MaterialAccordion) as MaterialAccordion;
@override
void attached() {
_init();
}
//- private -----------------------------------------------------------------------------------
void _init() {
_logger.fine("MaterialAccordion - init");
_logger.info("MaterialAccordion - init");
bool hasRipples = false;
if (element != null) {
if (element.classes.contains(_cssClasses.RIPPLE_EFFECT)) {
element.classes.add(_cssClasses.RIPPLE_EFFECT_IGNORE_EVENTS);
if (group.classes.contains(_cssClasses.RIPPLE_EFFECT) ||
element.classes.contains(_cssClasses.RIPPLE_EFFECT)) {
group.classes.add(_cssClasses.RIPPLE_EFFECT_IGNORE_EVENTS);
hasRipples = true;
element.classes.add(_cssClasses.RIPPLE_EFFECT);
}
final bool isRadio = element.classes.contains(_cssClasses.ACCORDION_TYPE);
final bool isRadio = group.classes.contains(_cssClasses.ACCORDION_TYPE);
final List<dom.Element> panels = element.querySelectorAll(".${_cssClasses.ACCORDION}");
//final List<dom.Element> panels = element.querySelectorAll(".${_cssClasses.ACCORDION}");
// Select element label
panels.forEach( (final dom.HtmlElement panel) {
//panels.forEach( (final dom.HtmlElement panel) {
final dom.HtmlElement panel = element;
final dom.Element label = panel.querySelector(".${_cssClasses.ACCORDION_LABEL}");
_logger.fine("Found $label");
final String id = "accordion-${label.hashCode}";
(label as dom.LabelElement).htmlFor = id;
@@ -160,15 +170,34 @@ class MaterialAccordion extends MdlComponent {
label.append(rippleContainer);
}
});
//});
element.classes.add(_cssClasses.IS_UPGRADED);
}
}
String get _groupName => "${_constant.CHECKBOX_NAME}-group-${element.hashCode}";
/// Searches for a parent element with mdl-accordion-group
dom.HtmlElement get group {
dom.HtmlElement _findAccordionGroup(final dom.HtmlElement el) {
if(el == null) {
throw new ArgumentError("${_cssClasses.MAIN_CLASS} must have a ${_cssClasses.GROUP} set!");
}
if(el.classes.contains(_cssClasses.GROUP)) {
return el;
}
return _findAccordionGroup(el.parent);
}
if(_group == null) {
_group = _findAccordionGroup(element);
}
return _group;
}
/// Returns a unique group name
String get _groupName => "${_constant.CHECKBOX_NAME}-group-${group.hashCode}";
bool get _isNavigation => element.classes.contains(_cssClasses.NAVIGATION);
/// Check if this is a "menu" (if parent has mdl-accordion--navigation set)
bool get _isNavigation => group.classes.contains(_cssClasses.NAVIGATION);
List<String> _getLinkFragments(final dom.Element panel) {
final List<String> fragments = new List<String>();
@@ -187,8 +216,9 @@ class MaterialAccordion extends MdlComponent {
return fragments;
}
/// If this is a radio-style-accordion [_uncheckOthers] closes (unchecks) siblings
void _uncheckOthers(final dom.InputElement elementToExclude) {
final List<dom.InputElement> checkboxes = element.querySelectorAll("[name=${_groupName}]") as List<dom.InputElement>;
final List<dom.InputElement> checkboxes = group.querySelectorAll("[name=${_groupName}]") as List<dom.InputElement>;
checkboxes.forEach((final dom.InputElement checkbox) {
if(checkbox != elementToExclude) {
checkbox.checked = false;
Oops, something went wrong.

0 comments on commit fa86d3a

Please sign in to comment.