Permalink
Browse files

bug: Accordion did not work without ripples, added some more tests

  • Loading branch information...
MikeMitterer committed May 29, 2015
1 parent 3bf2987 commit 59c0ee7fd50bab81c4557cf8a79f3b5aac47614c
@@ -101,44 +101,48 @@ class MaterialAccordion extends MdlComponent {
void _init() {
_logger.fine("MaterialAccordion - init");
bool hasRipples = false;
if (element != null) {
if (element.classes.contains(_cssClasses.RIPPLE_EFFECT)) {
element.classes.add(_cssClasses.RIPPLE_EFFECT_IGNORE_EVENTS);
hasRipples = true;
}
final bool isRadio = element.classes.contains(_cssClasses.ACCORDION_TYPE);
final bool isRadio = element.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) {
final dom.Element label = panel.querySelector(".${_cssClasses.ACCORDION_LABEL}");
// Select element label
panels.forEach( (final dom.HtmlElement panel) {
final dom.Element label = panel.querySelector(".${_cssClasses.ACCORDION_LABEL}");
_logger.fine("Found $label");
_logger.fine("Found $label");
final String id = "accordion-${label.hashCode}";
(label as dom.LabelElement).htmlFor = id;
final String id = "accordion-${label.hashCode}";
(label as dom.LabelElement).htmlFor = id;
dom.InputElement inputElement = null;
if(isRadio) {
inputElement = new dom.RadioButtonInputElement();
} else {
inputElement = new dom.CheckboxInputElement();
}
inputElement.name = "${_constant.CHECKBOX_NAME}-group-${element.hashCode}";
inputElement.id = id;
label.insertAdjacentElement('beforebegin',inputElement);
if(_isNavigation) {
final Uri uri = Uri.parse(dom.document.baseUri.toString());
if(uri.fragment.isNotEmpty) {
//_logger.info("URI-Fragment: ${uri.fragment}");
if(_getLinkFragments(panel).contains(uri.fragment)) {
//_logger.info("Checked");
inputElement.checked = true;
}
dom.InputElement inputElement = null;
if(isRadio) {
inputElement = new dom.RadioButtonInputElement();
} else {
inputElement = new dom.CheckboxInputElement();
}
inputElement.name = "${_constant.CHECKBOX_NAME}-group-${element.hashCode}";
inputElement.id = id;
label.insertAdjacentElement('beforebegin',inputElement);
if(_isNavigation) {
final Uri uri = Uri.parse(dom.document.baseUri.toString());
if(uri.fragment.isNotEmpty) {
//_logger.info("URI-Fragment: ${uri.fragment}");
if(_getLinkFragments(panel).contains(uri.fragment)) {
//_logger.info("Checked");
inputElement.checked = true;
}
}
}
if(hasRipples) {
final dom.SpanElement rippleContainer = new dom.SpanElement();
rippleContainer.classes.add(_cssClasses.RIPPLE_CONTAINER);
rippleContainer.classes.add(_cssClasses.RIPPLE_EFFECT);
@@ -148,9 +152,9 @@ class MaterialAccordion extends MdlComponent {
rippleContainer.append(ripple);
label.append(rippleContainer);
}
});
}
});
element.classes.add(_cssClasses.IS_UPGRADED);
}
@@ -1,19 +0,0 @@
part of mdl.ui.unit.test;
testButton() {
final Logger _logger = new Logger("test.Button");
group("Button",() {
test('Check if button is upgraded', () {
final dom.ButtonElement button = dom.document.querySelector("#button1");
expect(button,isNotNull);
expect(button.dataset.containsKey("upgraded"),isTrue);
expect(button.dataset["upgraded"],"MaterialButton");
});
});
// end 'Button' group
}
// - Helper --------------------------------------------------------------------------------------
View
@@ -1,19 +0,0 @@
<!doctype html>
<!-- custom_html_test.html -->
<html>
<head>
<title>Custom HTML Test</title>
<link rel="x-dart-test" href="uiTest.dart">
<script async type="application/dart" src="uiTest.dart"></script>
<script src="packages/test/dart.js"></script>
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
</head>
<body>
<div class="ui-test ui-test-button">
<button id="button1" class="mdl-button mdl-js-button">Flat</button>
</div>
</body>
</html>
@@ -0,0 +1,22 @@
part of mdl.ui.unit.test;
testAccordion() {
final Logger _logger = new Logger("test.Accordion");
group('Accordion', () {
setUp(() { });
test('> check if upgraded', () {
final dom.HtmlElement element = dom.document.querySelector("#accordion1");
expect(element,isNotNull);
expect(element.dataset.containsKey("upgraded"),isTrue);
expect(element.dataset["upgraded"],"MaterialAccordion");
});
});
// end 'Accordion' group
}
// - Helper --------------------------------------------------------------------------------------
@@ -0,0 +1,19 @@
part of mdl.ui.unit.test;
testButton() {
final Logger _logger = new Logger("test.Button");
group("Button",() {
test('> check if upgraded', () {
final dom.ButtonElement element = dom.document.querySelector("#button1");
expect(element,isNotNull);
expect(element.dataset.containsKey("upgraded"),isTrue);
expect(element.dataset["upgraded"],"MaterialButton");
});
});
// end 'Button' group
}
// - Helper --------------------------------------------------------------------------------------
@@ -0,0 +1,21 @@
part of mdl.ui.unit.test;
testCheckbox() {
final Logger _logger = new Logger("test.Checkbox");
group('Checkbox', () {
setUp(() { });
test('> check if upgraded', () {
final dom.HtmlElement element = dom.document.querySelector("#checkbox1").parent;
expect(element,isNotNull);
expect(element.dataset.containsKey("upgraded"),isTrue);
expect(element.dataset["upgraded"],"MaterialCheckbox");
});
});
// end 'Checkbox' group
}
// - Helper --------------------------------------------------------------------------------------
@@ -0,0 +1,22 @@
part of mdl.ui.unit.test;
testIconToggle() {
final Logger _logger = new Logger("test.IconToggle");
group('IconToggle', () {
test('> check if upgraded', () {
final dom.HtmlElement element = dom.document.querySelector("#icon-toggle1").parent;
expect(element,isNotNull);
expect(element.dataset.containsKey("upgraded"),isTrue);
expect(element.dataset["upgraded"],"MaterialIconToggle");
});
});
// end 'IconToggle' group
}
// - Helper --------------------------------------------------------------------------------------
@@ -17,7 +17,7 @@
* limitations under the License.
*/
@TestOn("dartium")
//@TestOn("dartium")
library mdl.ui.unit.test;
@@ -34,10 +34,16 @@ import 'package:console_log_handler/console_log_handler.dart';
import "package:mdl/mdl.dart";
import "package:mdl/mdlutils.dart";
part "components/accordion_test.dart";
part "components/button_test.dart";
part "components/checkbox_test.dart";
part "components/icon_toggle_test.dart";
/**
* run the test with: pub run test:test -p dartium test/unit/ *.dart
* run the test with your favorit webserver.
* In my case I run it with with:
* visual $ sitegen --serve --docroot .
*/
main() async {
final Logger _logger = new Logger('wsk_material.unit.test');
@@ -55,7 +61,10 @@ main() async {
await initComponents();
testAccordion();
testButton();
testCheckbox();
testIconToggle();
}
void configLogging() {
View
@@ -0,0 +1,80 @@
<!doctype html>
<!-- custom_html_test.html -->
<html>
<head>
<title>Custom HTML Test</title>
<!--<link rel="x-dart-test" href="test.dart">-->
<script async type="application/dart" src="test.dart"></script>
<script src="packages/test/dart.js"></script>
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<style>
.ui-test {
margin-bottom: 24px;
padding: 12px;
background-color: #e6e6e6;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="ui-test ui-test---accordion">
<div id="accordion1" class="mdl-accordion-group mdl-js-accordion">
<!-- Panel 1 -->
<div class="mdl-accordion">
<label class="mdl-accordion__label">Panel 1<span class="mdl-icon mdl-icon--chevron-right indicator"></span></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">
<label class="mdl-accordion__label">Panel 2<span class="mdl-icon mdl-icon--chevron-right indicator"></span></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">
<label class="mdl-accordion__label">Panel 3<span class="mdl-icon mdl-icon--chevron-right indicator"></span></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.</p>
</div>
</div>
</div>
</div>
<div class="ui-test ui-test---badge">
<span id="badge1" class="mdl-badge" data-badge="42">I am in a span</span>
</div>
<div class="ui-test ui-test--button">
<button id="button1" class="mdl-button mdl-js-button">Flat</button>
</div>
<div class="ui-test ui-test---checkbox">
<label class="mdl-checkbox mdl-js-checkbox" for="checkbox1">
<input type="checkbox" id="checkbox1" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">Check me out</span>
</label>
</div>
<div class="ui-test ui-test---icon-toggle">
<label class="mdl-icon-toggle mdl-js-icon-toggle" for="icon-toggle1">
<input type="checkbox" id="icon-toggle1" class="mdl-icon-toggle__input"/>
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-bold"></span>
</label>
</div>
</body>
</html>

0 comments on commit 59c0ee7

Please sign in to comment.