Permalink
Browse files

feature: mdl-class added + works

  • Loading branch information...
MikeMitterer committed Jul 23, 2015
1 parent c016336 commit 89f9e7fbf32f3c5c2c165bceda10874b1c3bc333
@@ -0,0 +1,17 @@
title: CLASS
samplename: class
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/<%= pre %>_spa_class/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<div class="testtext" mdl-class="checkBorder : 'withborder'">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="switches">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-border">
<input type="checkbox" id="switch-border" class="mdl-switch__input" mdl-model="checkBorder"/>
<span class="mdl-switch__label">Switch 'border' on/off</span>
</label>
</div>
</div>
@@ -0,0 +1,2 @@
template_dir: ../_templates
assets_dir: ../_assets
@@ -0,0 +1,33 @@
name: mdl_class_sample
description: Material Design Lite 'Class' Sample
version: 0.1.0
author: Mike Mitterer <office@mikemitterer.at>
homepage: https://github.com/MikeMitterer/dart-material-design-lite
dependencies:
browser: any
intl: any
args: any
validate: any
browser_detect: any
logging: any
logging_handlers: any
console_log_handler: any
# path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
mdl:
path: ../../
di: any
transformers:
- di
# - $dart2js:
# minify: false
# sourceMaps: true
@@ -0,0 +1,20 @@
//@import "packages/mdl/assets/styles/material-design-lite";
.demo-page--class, .demo-section--class {
.testtext {
padding: 8px;
background-color: lightgray;
border-radius: 5px;
box-sizing: border-box;
border: 1px solid white;
}
.testtext.withborder {
border: 1px solid red;
}
.switches {
margin-top: 12px;
}
}
@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Material Design Lite (MDL/Dart) for Dart is a library of components for web developers based on Google's Material Design, ported to Dart.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OBSERVE</title>
<title>CLASS</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
@@ -35,11 +35,11 @@
</style>
</head>
<body class="demo-page demo-page--observe mdl-upgrading"> <div class="loading">Loading...</div>
<body class="demo-page demo-page--class mdl-upgrading"> <div class="loading">Loading...</div>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-color--grey-100">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">OBSERVE-Sample</span>
<span class="mdl-layout-title">CLASS-Sample</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
@@ -48,27 +48,19 @@
<div class="container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<section class="demo-section demo-section--observe">
<section class="demo-section demo-section--class">
<div class="demo-preview-block">
<p>
Wait 2 secs - A timer will add 10 more List-Items!<br>
If you "REMOVE" "German" - it will be replace with "Austrian"
</p>
<p>
Now it's: <mdl-property observe="time"></mdl-property><br>
Nr. of records: <mdl-property observe="records"></mdl-property><br>
</p>
<mdl-repeat for-each="language in languages">
<div template class="language" >
Language: {{language.name}} ({{language.type}})
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove({{language.name}})">Remove</button>
</div>
</mdl-repeat>
<div class="testtext" mdl-class="checkBorder : 'withborder'">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="switches">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-border">
<input type="checkbox" id="switch-border" class="mdl-switch__input" mdl-model="checkBorder"/>
<span class="mdl-switch__label">Switch 'border' on/off</span>
</label>
</div>
</div>
</section>
</div>
</div>
@@ -85,7 +77,7 @@
</div>
</footer>
</div>
<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_observe/web" target="_blank" id="view-source">
<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/<%= pre %>_spa_class/web" target="_blank" id="view-source">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">pageview</i></button>
</a>
<script type="application/dart" src="main.dart"></script>
@@ -0,0 +1,50 @@
import "dart:html" as dom;
import "dart:async";
import "dart:math" as Math;
import 'package:logging/logging.dart';
import 'package:console_log_handler/console_log_handler.dart';
import 'package:di/di.dart' as di;
import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
final Logger _logger = new Logger('main.Application');
final ObservableProperty<bool> checkBorder = new ObservableProperty<bool>(false);
Application() {
}
@override
void run() {
}
//- private -----------------------------------------------------------------------------------
}
main() async {
final Logger _logger = new Logger('main.Class');
configLogging();
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
}
void configLogging() {
hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK
// now control the logging.
// Turn off all logging first
Logger.root.level = Level.INFO;
Logger.root.onRecord.listen(new LogConsoleHandler());
}
@@ -0,0 +1,7 @@
title: <%= title %>
samplename: <%= package %>
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/<%= basename %>/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<<%= tag %>></<%= tag %>>
</div>
@@ -0,0 +1,2 @@
template_dir: ../_templates
assets_dir: ../_assets
@@ -1,5 +1,5 @@
# templatename is not optional!
templatename: MDL Sample Template
templatename: MDL Sample Template (private)
keeptemplateprivate: true
prompts:
@@ -1,31 +0,0 @@
.demo-page--observe .mdl-repeat div, .demo-section--observe .mdl-repeat div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 12px; }
.demo-page--observe .mdl-repeat div .mdl-checkbox, .demo-section--observe .mdl-repeat div .mdl-checkbox {
margin-top: 0;
margin-bottom: 0;
width: initial; }
.demo-page--observe .mdl-property, .demo-section--observe .mdl-property {
font-weight: bold; }
View
@@ -41,6 +41,7 @@ part "src/template/components/MaterialMustache.dart";
part "src/template/components/MaterialRepeat.dart";
part "src/template/components/MaterialObserve.dart";
part "src/template/components/MaterialModel.dart";
part "src/template/components/MaterialClass.dart";
part "src/template/components/model/ModelObserverFactory.dart";
part "src/template/components/model/ModelObserver.dart";
@@ -66,6 +67,7 @@ void registerMdlTemplateComponents() {
registerMaterialRepeat();
registerMaterialObserve();
registerMaterialModel();
registerMaterialClass();
componentHandler().addModule(_templateModule);
}
@@ -92,6 +92,9 @@ abstract class MdlComponent {
/// Called after [DomRenderer] has added this component to the DOM or
/// if [MdlComponentHandler] hast upgrade the component and it's already in the DOM!
///
/// If you need a components parent then 'init' your component in [attached] instead of
/// CTOR.fromElement(..)
void attached() {
// _logger.info("${this} attached!");
}
View
@@ -95,3 +95,11 @@ MdlComponent mdlComponent(final dom.HtmlElement element,final Type type) {
throw "$element is not a ${typeAsString}-Component!!!\n(ID: ${element.id}, class: ${element.classes})\n"
"These components are available: ${jsElement[MDL_COMPONENT_PROPERTY] as String}";
}
/// Checks if [element] is a "Widget" (usually this means a UI-Element)
/// MdlConfig.isWidget...
bool isMdlWidget(final dom.HtmlElement element) {
Validate.notNull(element);
var jsElement = new JsObject.fromBrowserObject(element);
return jsElement.hasProperty(_MDL_WIDGET_PROPERTY);
}
@@ -106,6 +106,20 @@ class ObservableProperty<T> {
});
}
}
/// Converts [value] to bool. If [value] is a String, "true", "on", "1" are valid boolean values
bool toBool() {
if(value is bool) {
return value as bool;
}
if(value is num) {
return (value as num).toInt() == 1;
}
final String stringvalue = "$value".toLowerCase();
return stringvalue == "true" || stringvalue == "on" || stringvalue == "1" || stringvalue == "yes";
}
// - private ----------------------------------------------------------------------------------
void _setValue() {
Oops, something went wrong.

0 comments on commit 89f9e7f

Please sign in to comment.