Permalink
Browse files

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

… check
  • Loading branch information...
MikeMitterer committed Aug 18, 2015
1 parent eee178d commit 4fd2f45d4eb4b434e065934a2aada74ab7b8a58c
Showing with 94 additions and 9 deletions.
  1. +2 −1 README.md
  2. +22 −5 lib/src/observable/ObservableProperty.dart
  3. +26 −3 site/web/index.html
  4. +19 −0 site/web/site.css
  5. +25 −0 site/web/site.scss
View
@@ -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
@@ -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);
}
}
}
View
@@ -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">
View
@@ -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 {
View
@@ -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;

0 comments on commit 4fd2f45

Please sign in to comment.