From 4fd2f45d4eb4b434e065934a2aada74ab7b8a58c Mon Sep 17 00:00:00 2001 From: Mike Mitterer Date: Tue, 18 Aug 2015 18:50:43 +0200 Subject: [PATCH] feature: ObservableProperty can switch between Timer- and 'set value' check --- README.md | 3 ++- lib/src/observable/ObservableProperty.dart | 27 ++++++++++++++++---- site/web/index.html | 29 +++++++++++++++++++--- site/web/site.css | 19 ++++++++++++++ site/web/site.scss | 25 +++++++++++++++++++ 5 files changed, 94 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 80752d7d..ea58e3cb 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Material Design Lite for Dart -> A GUI library and framework to develop web apps in Dart. ([www.material-design-lite.pub](http://www.material-design-lite.pub)). +> A GUI library and framework to develop web apps in Dart. +[www.material-design-lite.pub](http://www.material-design-lite.pub)). Material Design Lite lets you add a Material Design look and feel to your dynamic websites and web app. It doesn't rely on any JavaScript frameworks or libraries. Optimised for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible diff --git a/lib/src/observable/ObservableProperty.dart b/lib/src/observable/ObservableProperty.dart index e9ccb0fa..e5afe702 100644 --- a/lib/src/observable/ObservableProperty.dart +++ b/lib/src/observable/ObservableProperty.dart @@ -34,7 +34,10 @@ class ObservableProperty { T _value; Function _observe; + + /// Default interval if no specified in CTOR Duration _interval = new Duration(milliseconds: 100); + bool _pause = false; /// Observername - helps with debugging! @@ -42,14 +45,31 @@ class ObservableProperty { StreamController> _onChange; + /** + * [_value] The observed value + * [observe] Function in parent to observe special values + * [interval] Check-Interval + * [name] is useful for debugging. If you set this name and if you set your loglevel to "info" it + * you should see a log output if this object fires a PropertyChangeEvent + * If you set [observeViaTimer] to false the PropertyChangeEvent is only triggered on "set value" + * + * Sample: + * time.observes(() => _getTime()); + */ ObservableProperty(this._value,{ T observe(), final Duration interval, - final String name: ObservableProperty._DEFAULT_NAME } ) : _name = name { + final String name: ObservableProperty._DEFAULT_NAME, final bool observeViaTimer: true } ) : _name = name { - if(interval != null) { + if(interval != null && observeViaTimer) { _interval = interval; } if(observe != null) { observes(observe); + + } else { + void _triggerFirstChangeEvent() { + value = _value; + } + _triggerFirstChangeEvent(); } } @@ -152,7 +172,4 @@ class ObservableProperty { _onChange.add(event); } } - - - } \ No newline at end of file diff --git a/site/web/index.html b/site/web/index.html index e93c6d1c..20247c24 100644 --- a/site/web/index.html +++ b/site/web/index.html @@ -51,6 +51,8 @@ href="#features">Features Getting started + Resources Features Getting started + Resources Contact @@ -401,8 +405,13 @@

Components ready to use

target="_blank">Formatters to format the "observer" output directly from your HTML -
  • Mustache-Based-Components (Template-Based) +
  • + Mustache-Based-Components (Template-Based)
    + E.g. define your event-handler in HTML:
    + 
    <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
+                                                                              data-mdl-click="handleButtonClick()">Click me!</button>
    +
  • You are not tied to css-class-based components. Choose weither your own componentd @@ -653,7 +662,21 @@

    HOW WE DO IT

    --> - +
    +
    + +
    +

    Resources

    +

    Check it out

    +
    + +
    + +
    + +
    diff --git a/site/web/site.css b/site/web/site.css index 74c26e1f..58183110 100644 --- a/site/web/site.css +++ b/site/web/site.css @@ -8705,6 +8705,25 @@ a img { .mdl-layout__content .features-section .features-content .features-box .features-text h4 { margin-top: 0; font-size: 20px; } + .mdl-layout__content .features-section .features-content .features-box .prettyprint { + max-width: 300px; + white-space: initial; + background-color: #303030; + border-radius: 8px; + padding: 8px; } + .mdl-layout__content .features-section .features-content .features-box .prettyprint .pln { + color: #aaaaaa; } + .mdl-layout__content .resources-section { + background-color: #222222; + padding-top: 80px; + padding-bottom: 40px; + color: #FFF; } + .mdl-layout__content .resources-section .resources-content { + padding-top: 80px; + padding-bottom: 80px; + max-width: 1044px; + margin-left: auto; + margin-right: auto; } .mdl-layout__content .table-section { background-color: #333333; } .mdl-layout__content .table-section .table-content { diff --git a/site/web/site.scss b/site/web/site.scss index 182b0428..dcbe0b9a 100644 --- a/site/web/site.scss +++ b/site/web/site.scss @@ -518,10 +518,35 @@ a img{ font-size : 20px; } } + + .prettyprint { + max-width: 300px; + white-space: initial; + background-color: rgb(48, 48, 48); + border-radius: 8px; + padding: 8px; + .pln { + color: #aaaaaa; + } + } } } } + .resources-section { + background-color: #222222; + padding-top : 80px; + padding-bottom : 40px; + color : #FFF; + + .resources-content { + padding-top : 80px; + padding-bottom : 80px; + max-width : 1044px; + margin-left : auto; + margin-right : auto; + } + } .table-section { background-color: #333333;