feature: ObservableProperty can switch between Timer- and 'set value'…

… check
MikeMitterer · Aug 18, 2015 · 4fd2f45 · 4fd2f45
1 parent eee178d
commit 4fd2f45
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 9 deletions.
diff --git 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
@@ -34,22 +34,42 @@ class ObservableProperty<T> {
 
     T _value;
     Function _observe;
+
+    /// Default interval if no specified in CTOR
     Duration _interval = new Duration(milliseconds: 100);
+
     bool _pause = false;
 
     /// Observername - helps with debugging!
     final String _name;
 
     StreamController<PropertyChangeEvent<T>> _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<T> {
             _onChange.add(event);
         }
     }
-
-
-
 }
diff --git a/site/web/index.html b/site/web/index.html
@@ -51,6 +51,8 @@
                        href="#features">Features</a>
                     <a class="mdl-navigation__link mdl-navigation__link-animated mdl-typography--text-uppercase"
                        href="#gettingstarted">Getting started</a>
+                    <a class="mdl-navigation__link mdl-navigation__link-animated mdl-typography--text-uppercase"
+                       href="#resources">Resources</a>
                     <!--<a class="mdl-navigation__link mdl-navigation__link-animated mdl-typography&#45;&#45;text-uppercase"-->
                     <!--href="#table">MDL/JS</a>-->
                     <a class="mdl-navigation__link mdl-navigation__link-animated mdl-typography--text-uppercase"
@@ -86,6 +88,8 @@
                href="#features">Features</a>
             <a class="mdl-navigation__link mdl-navigation__link-animated mdl-typography--text-uppercase"
                href="#gettingstarted">Getting started</a>
+            <a class="mdl-navigation__link mdl-navigation__link-animated mdl-typography--text-uppercase"
+               href="#resources">Resources</a>
             <a class="mdl-navigation__link mdl-navigation__link-animated mdl-typography--text-uppercase"
                href="#contact">Contact</a>
         </nav>
@@ -401,8 +405,13 @@ <h4>Components ready to use</h4>
                                            target="_blank">Formatters</a> to format the "observer" output directly from
                                         your HTML
                                     </li>
-                                    <li><a href="https://goo.gl/Nqs3UJ"
-                                           target="_blank">Mustache-Based-Components (Template-Based)</a>
+                                    <li><span>
+                                        <a href="https://goo.gl/Nqs3UJ"
+                                           target="_blank">Mustache-Based-Components (Template-Based)</a><br>
+                                        E.g. define your event-handler in HTML:<br>
+                                        <pre class="prettyprint html" style="max-width: 300px;">&lt;button class=&quot;mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect&quot;
+                                                                              data-mdl-click=&quot;handleButtonClick()&quot;&gt;Click me!&lt;/button&gt;</pre>
+                                    </span>
                                     </li>
                                     <li>You are not tied to css-class-based components. Choose weither your own
                                         componentd
@@ -653,7 +662,21 @@ <h2>HOW WE DO IT</h2>
 
                 </section>-->
 
-        <!-- ABOUT
+        <!-- RESOURCES
+        ============================================= -->
+        <section class="resources-section"><a name="resources"></a>
+            <div class="resources-content">
+
+                <div class="text-center titlebar">
+                    <h3>Resources</h3>
+                    <h2>Check it out</h2>
+                </div>
+
+            </div>
+
+        </section>
+
+        <!-- CONTACT
         ============================================= -->
         <section class="contact-section"><a name="contact"></a>
             <div class="contact-content">

diff --git 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
@@ -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;