+
+''',
+ useShadowDom: false
+)
+class AccordionGroupComponent implements DetachAware, ScopeAware {
+
+ @NgAttr('heading')
+ var heading;
+
+ final AccordionComponent accordion;
+ final DblClickPreventer dblClickPreventer;
+ final Timeout timeout;
+
+ AccordionGroupComponent(this.accordion, this.dblClickPreventer, this.timeout) {
+ accordion.addGroup(this);
+ }
+
+ void set scope(Scope scope) {
+ //
+ timeout(() {
+ scope.watch('isOpen', (value, old){
+ collapse = !value;
+ });
+ }, delay:50);
+ }
+
+ bool _isOpen = false;
+ @NgTwoWay('is-open')
+ set isOpen(value) {
+ _isOpen = utils.toBool(value);
+ if (_isOpen) {
+ accordion.closeOthers(this);
+ }
+ }
+ get isOpen => _isOpen;
+
+ bool collapse = true;
+
+ bool _isDisabled = false;
+ @NgTwoWay('is-disabled')
+ get isDisabled => _isDisabled;
+ set isDisabled(var newValue) {
+ _isDisabled = utils.toBool(newValue);
+ }
+
+ toggleOpen() {
+ dblClickPreventer(() {
+ if ( !isDisabled ) {
+ isOpen = !isOpen;
+ }
+ });
+ }
+
+ @override
+ void detach() {
+ this.accordion.removeGroup(this);
+ }
+}
+
+/*
+ * Use accordion-heading below an accordion-group to provide a heading containing HTML
+ *
+
+ + {{heading}} +
+
+
+
+
diff --git a/lib/alert.dart b/lib/alert.dart
deleted file mode 100644
index d49fe01..0000000
--- a/lib/alert.dart
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright (c) 2013 - 2014, akserg (Sergey Akopkokhyants)
-// https://github.com/akserg/angular.dart.ui
-// All rights reserved. Please see the LICENSE.md file.
-library angular.ui.alert;
-
-import "package:angular/angular.dart";
-
-/**
- * Alert Module.
- */
-class AlertModule extends Module {
- AlertModule() {
- type(Alert);
- }
-}
-
-/**
- * Alert component.
- */
-@NgComponent(selector: 'alert', publishAs: 't', applyAuthorStyles: true,
- templateUrl: 'packages/angular_ui/alert.html')
-class Alert {
- @NgOneWay('type')
- String type;
-
- @NgCallback('close')
- var close;
-
- /**
- * Flag helps show or hide close button depends on availability of [close]
- * attribute.
- */
- bool get showable => (close as BoundExpression).expression.isChain;
-
- /**
- * Thst method calls [close] callback
- */
- void closeHandler() {
- close();
- }
-}
\ No newline at end of file
diff --git a/lib/alert.html b/lib/alert.html
deleted file mode 100644
index 8abc24f..0000000
--- a/lib/alert.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
+
+ + {{heading}} +
+
+
+
-
-
\ No newline at end of file
diff --git a/lib/alert/README.md b/lib/alert/README.md
new file mode 100644
index 0000000..e25e11f
--- /dev/null
+++ b/lib/alert/README.md
@@ -0,0 +1,3 @@
+**Alert** is an Angular Dart version of bootstrap's alert.
+This directive can be used to generate alerts from the dynamic model data (using the ng-repeat directive);
+The presence of the "close" attribute determines if a close button is displayed.
diff --git a/lib/alert/alert.dart b/lib/alert/alert.dart
new file mode 100644
index 0000000..fab435c
--- /dev/null
+++ b/lib/alert/alert.dart
@@ -0,0 +1,58 @@
+// Copyright (C) 2013 - 2015 Angular Dart UI authors. Please see AUTHORS.md.
+// https://github.com/akserg/angular.dart.ui
+// All rights reserved. Please see the LICENSE.md file.
+library angular.ui.alert;
+
+import "package:angular/angular.dart";
+import "package:angular/core_dom/module_internal.dart";
+
+/**
+ * Alert Module.
+ */
+class AlertModule extends Module {
+ AlertModule() {
+ bind(Alert);
+ }
+}
+
+/**
+ * Alert component.
+ */
+@Component(selector: 'alert',
+ useShadowDom: false,
+// templateUrl: 'packages/angular_ui/alert/alert.html'
+ template: '''
+
+
+
'''
+)
+//@Component(selector: '[alert]',
+// useShadowDom: false,
+// templateUrl: 'packages/angular_ui/alert/alert.html')
+class Alert implements ScopeAware {
+ @NgOneWay('type')
+ String type;
+
+ @NgCallback('close')
+ var close;
+
+ Scope scope;
+
+ /**
+ * Flag helps show or hide close button depends on availability of [close]
+ * attribute.
+ */
+ var _closeable = false;
+ bool get closeable => _closeable;
+
+ /**
+ * Calculate and return alert type as string depnds on type. If type is null
+ * methods returns 'warning' as default value.
+ */
+ String get alertTypeAsString => "alert-${type != null ? type : 'warning'}";
+
+ Alert(NodeAttrs attr) {
+ _closeable = attr.containsKey('close');
+ }
+}
\ No newline at end of file
diff --git a/lib/alert/alert.html b/lib/alert/alert.html
new file mode 100644
index 0000000..83d6ed7
--- /dev/null
+++ b/lib/alert/alert.html
@@ -0,0 +1,10 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/angular_ui.dart b/lib/angular_ui.dart
index 91a0c9c..4716a97 100644
--- a/lib/angular_ui.dart
+++ b/lib/angular_ui.dart
@@ -1,26 +1,60 @@
-// Copyright (c) 2013 - 2014, akserg (Sergey Akopkokhyants)
+// Copyright (C) 2013 - 2015 Angular Dart UI authors. Please see AUTHORS.md.
// https://github.com/akserg/angular.dart.ui
// All rights reserved. Please see the LICENSE.md file.
library angular.ui;
import "package:angular/angular.dart";
-import 'package:angular_ui/buttons.dart';
-import 'package:angular_ui/collapse.dart';
-import 'package:angular_ui/dropdown_toggle.dart';
-import 'package:angular_ui/alert.dart';
-import 'package:angular_ui/carousel.dart';
+import 'package:angular_ui/alert/alert.dart';
+import 'package:angular_ui/accordion/accordion.dart';
+import 'package:angular_ui/buttons/buttons.dart';
+import 'package:angular_ui/carousel/carousel.dart';
+import 'package:angular_ui/collapse/collapse.dart';
+import 'package:angular_ui/dropdown/dropdown_toggle.dart';
+import 'package:angular_ui/pagination/pagination.dart';
+import 'package:angular_ui/progressbar/progressbar.dart';
+import 'package:angular_ui/rating/rating.dart';
+import 'package:angular_ui/tabs/tabset.dart';
+import 'package:angular_ui/utils/content_append.dart';
+import 'package:angular_ui/utils/timeout.dart';
+import 'package:angular_ui/utils/transition.dart';
+import 'package:angular_ui/modal/modal.dart';
+import 'package:angular_ui/dragdrop/dragdrop.dart';
+import 'package:angular_ui/datepicker/datepicker.dart';
+import 'package:angular_ui/timepicker/timepicker.dart';
+import 'package:angular_ui/tooltip/tooltip.dart';
+import 'package:angular_ui/popover/popover.dart';
+import 'package:angular_ui/typeahead/module.dart';
+import 'package:angular_ui/utils/dbl_click_preventer.dart';
+
+export 'package:angular_ui/modal/modal.dart';
/**
* AngularUI Module
*/
class AngularUIModule extends Module {
AngularUIModule() {
+ install(new AlertModule());
+ install(new AccordionModule());
install(new ButtonModule());
+ install(new CarouselModule());
install(new CollapseModule());
+ install(new DragDropModule());
install(new DropdownToggleModule());
- install(new AlertModule());
- install(new CarouselModule());
+ install(new PaginationModule());
+ install(new ProgressbarModule());
+ install(new RatingModule());
+ install(new TabsModule());
+ install(new TimeoutModule());
+ install(new TransitionModule());
+ install(new ModalModule());
+ install(new DatepickerModule());
+ install(new TimepickerModule());
+ install(new TooltipModule());
+ install(new PopoverModule());
+ install(new TypeaheadModule());
+ install(new ContentAppendModule());
+ install(new DblClickPreventerModule());
}
}
diff --git a/lib/buttons/README.md b/lib/buttons/README.md
new file mode 100644
index 0000000..73ef600
--- /dev/null
+++ b/lib/buttons/README.md
@@ -0,0 +1,2 @@
+There are 2 directives that can make a group of buttons to behave like a set of checkboxes or radio buttons.
+
diff --git a/lib/buttons.dart b/lib/buttons/buttons.dart
similarity index 69%
rename from lib/buttons.dart
rename to lib/buttons/buttons.dart
index 4fb20dd..b183567 100644
--- a/lib/buttons.dart
+++ b/lib/buttons/buttons.dart
@@ -1,4 +1,4 @@
-// Copyright (c) 2013 - 2014, akserg (Sergey Akopkokhyants)
+// Copyright (C) 2013 - 2015 Angular Dart UI authors. Please see AUTHORS.md.
// https://github.com/akserg/angular.dart.ui
// All rights reserved. Please see the LICENSE.md file.
library angular.ui.buttons;
@@ -11,9 +11,9 @@ import "package:angular/angular.dart";
*/
class ButtonModule extends Module {
ButtonModule() {
- value(ButtonConfig, new ButtonConfig(activeClass:'active', toggleEvent: 'click'));
- type(BtnRadio);
- type(BtnCheckbox);
+ bind(ButtonConfig, toValue:new ButtonConfig(activeClass:'active', toggleEvent: 'click'));
+ bind(BtnRadio);
+ bind(BtnCheckbox);
}
}
@@ -24,13 +24,13 @@ class ButtonConfig {
String activeClass;
String toggleEvent;
- ButtonConfig({this.activeClass, this.toggleEvent});
+ ButtonConfig({this.activeClass:'active', this.toggleEvent:'click'});
}
/**
* Radio button directive.
*/
-@NgDirective(selector:'[btn-radio]')
+@Decorator(selector:'[btn-radio]')
class BtnRadio {
@NgAttr("btn-radio")
@@ -45,13 +45,15 @@ class BtnRadio {
BtnRadio(this.element, this.ngModel, this.config, this.scope) {
// model -> UI
ngModel.render = (value) {
- element.classes.toggle(config.activeClass, ngModel.modelValue == scope.$eval(btnRadioAttr));
+ element.classes.toggle(config.activeClass, ngModel.modelValue == scope.eval(btnRadioAttr));
};
// ui -> model
element.on[config.toggleEvent].listen((dom.Event event) {
if (!element.classes.contains(config.activeClass)) {
- ngModel.viewValue = scope.$eval(btnRadioAttr);
+ ngModel.markAsTouched();
+ ngModel.viewValue = scope.eval(btnRadioAttr);
+ ngModel.render(ngModel.modelValue);
}
});
}
@@ -60,7 +62,7 @@ class BtnRadio {
/**
* Checkbox button directive
*/
-@NgDirective(selector:'[btn-checkbox]')
+@Decorator(selector:'[btn-checkbox]')
class BtnCheckbox {
ButtonConfig config;
NgModel ngModel;
@@ -79,7 +81,7 @@ class BtnCheckbox {
dynamic get falseValue => getCheckboxValue(btnCheckboxFalse, false);
dynamic getCheckboxValue(attributeValue, defaultValue) {
- var val = scope.$eval(attributeValue);
+ var val = scope.eval(attributeValue);
return val != null ? val : defaultValue;
}
@@ -91,7 +93,14 @@ class BtnCheckbox {
// ui -> model
element.on[config.toggleEvent].listen((dom.Event event) {
+ // We need remove focus out of the element because it doesn't change the state
+ element.blur();
+ ngModel.markAsTouched();
ngModel.viewValue = element.classes.contains(config.activeClass) ? falseValue : trueValue;
+ ngModel.render(ngModel.modelValue);
+ });
+ element.onBlur.listen((e) {
+ ngModel.markAsTouched();
});
}
}
\ No newline at end of file
diff --git a/lib/carousel.dart b/lib/carousel.dart
deleted file mode 100644
index 87b3b7a..0000000
--- a/lib/carousel.dart
+++ /dev/null
@@ -1,286 +0,0 @@
-// Copyright (c) 2013 - 2014, akserg (Sergey Akopkokhyants)
-// https://github.com/akserg/angular.dart.ui
-// All rights reserved. Please see the LICENSE.md file.
-library angular.ui.carousel;
-
-import 'dart:html' as dom;
-import 'dart:async' as async;
-import "package:angular/angular.dart";
-import 'transition.dart';
-import 'timeout.dart';
-
-/**
- * Carousel Module.
- */
-class CarouselModule extends Module {
- CarouselModule() {
- install(new TransitionModule());
- type(CarouselController);
- type(Carousel);
- type(Slide);
- }
-}
-
-class CarouselController {
- List
+
+
+ ![]()
+
+
+
+```
+
+Generate the slide content in dart
+```dart
+@Component(
+ selector: 'carousel-demo',
+ templateUrl: 'your_html.html',
+ useShadowDom: false)
+class CarouselDemo {
+ List
+
+ Slide {{$index}}
+{{item['text']}}
+| + | + | + |
|---|---|---|
| + | + | + |
|---|---|---|
';
+ // Convert to html
+
+ popupEl = compile(html, _injector, _compiler, scope:_scope, directives: _directiveMap);
+ datepickerEl = popupEl.querySelector('[datepicker]');
+ //
+ popupEl.attributes['ng-model'] = 'date';
+ popupEl.attributes['ng-change'] = 'dateSelection()';
+ datepickerEl.attributes['ng-model'] = 'date';
+ //
+ Map
+
'''
+)
+class ModalWindow implements AttachAware {
+
+ @NgAttr('windowClass')
+ String windowClass = '';
+
+ @NgOneWay('preventAnimation')
+ void set visible(bool value) {
+ if (_modal._top != null) {
+ _modal._top._visible = value;
+ }
+ }
+
+ bool get visible => _modal._top == null ? false : _modal._top._visible;
+
+ @NgOneWay('keyboard')
+ bool keyboard = true;
+
+ int _index = 0;
+ @NgOneWay('index')
+ void set index(int value) {
+ _index = value;
+ }
+
+ int get index => _index;
+
+ @NgAttr('backdrop')
+ void set backdropAsString(String value) {
+ if (value != null) {
+ if (value == "static") {
+ _backdrop = true;
+ _staticBackdrop = true;
+ } else {
+ _backdrop = value == 'true' ? true : false;
+ _staticBackdrop = false;
+ }
+ }
+ }
+
+ bool _backdrop = true;
+
+ /** If false, clicking the backdrop closes the dialog. */
+ bool _staticBackdrop = false;
+
+ String _sizeClass = '';
+ @NgAttr('size')
+ void set size(String value) {
+ if (value == 'lg' || value == 'sm') {
+ _sizeClass = 'modal-$value';
+ }
+ }
+
+ String get sizeClass => _sizeClass;
+
+ dom.Element _element;
+ Modal _modal;
+ Timeout _timeout;
+
+ ModalWindow(this._element, this._modal, this._timeout);
+
+ void attach() {
+ if (_element != null) {
+ // wait 50ms such that .in is added after .fade
+ _timeout.call(() {
+ // trigger CSS transitions
+ visible = true;
+ // focus a freshly-opened modal
+ _element.focus();
+ }, delay:50);
+ }
+ }
+
+ void close(dom.MouseEvent event) {
+ if(!event.defaultPrevented) {
+ if (_backdrop && !_staticBackdrop && event.currentTarget == event.target) {
+ event.preventDefault();
+ event.stopPropagation();
+ if(_modal._top != null) {
+ _modal._top.dismiss('backdrop click');
+ }
+ }
+ if ((event.target as dom.Element).dataset['dismiss'] == 'modal') {
+ event.preventDefault();
+ event.stopPropagation();
+ if(_modal._top != null) {
+ _modal._top.dismiss('dismiss click');
+ }
+ }
+ }
+ }
+}
+
+/**
+ * Modal Options.
+ */
+class ModalOptions {
+ String windowClass;
+ String size;
+ bool preventAnimation;
+ bool keyboard;
+ String backdrop;
+ String template;
+ String templateUrl;
+
+ ModalOptions({this.windowClass:'', this.size, this.preventAnimation:false,
+ this.keyboard:true, this.backdrop:'true', this.template, this.templateUrl});
+}
+
+/**
+ * Type definition of close function.
+ */
+typedef void CloseHandler(result);
+/**
+ * Type definition of dismiss function.
+ */
+typedef void DismissHandler(String reason);
+
+/**
+ * Instance of modal window to manage [result]s and [close] and [dismiss] functions.
+ */
+class ModalInstance {
+ dom.Element _backDropElement;
+ dom.Element _element;
+
+ async.Completer _resultCompleter;
+ async.Completer _openCompleter;
+
+ async.Future get result => _resultCompleter.future;
+ async.Future get opened => _openCompleter.future;
+
+ dom.Element get _modalElement => _element.querySelector('.modal');
+
+ bool get _visible => _modalElement == null ? false : _modalElement.classes.contains('in');
+ void set _visible(bool value) {
+ if (_modalElement != null) {
+ _modalElement.classes.toggle('in', value);
+ }
+ }
+
+ CloseHandler close;
+ DismissHandler dismiss;
+}
+
+/**
+ * Modal service.
+ */
+@Injectable()
+class Modal {
+ static const _backdropClass = 'modal-backdrop';
+ static List
+
+
+
+
\ No newline at end of file
diff --git a/lib/pagination/pager.html b/lib/pagination/pager.html
new file mode 100644
index 0000000..f400edd
--- /dev/null
+++ b/lib/pagination/pager.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+-
+
- {{previousText}} +
- {{nextText}} +
-
+
- {{previousText}} +
- {{nextText}} +
-
+//
- {{previousText}} +//
- {{nextText}} +//
+
+
''',
+ useShadowDom: false,
+ map: const {
+ 'value': '=>value',
+ 'type': '@type'
+ })
+//@Component(
+// selector: '[progressbar]',
+// templateUrl: 'packages/angular_ui/progressbar/progressbar.html',
+// publishAs: 'ctrl',
+// useShadowDom: false,
+// map: const {
+// 'value': '=>value',
+// 'type': '@type'
+// })
+class ProgressBar extends _ProgressbarBase {
+ ProgressbarConfig _config;
+
+ @NgOneWay("max")
+ int max;
+
+ @NgOneWay("animate")
+ bool animate;
+
+ String get type => _type;
+ set type(val) { _type = val; }
+ String get classes => _classes;
+
+ set value(int val) {
+ super.value = val;
+ }
+
+ ProgressBar(this._config, Transition transistion, dom.Element element) : super(transistion, element);
+
+ evalMaxOrDefault(Scope scope) {
+ max = (max == null) ? _config.max : toInt(scope.parentScope.eval(max.toString()));
+ }
+
+ evalAnimateOrDefault(Scope scope) {
+ animate = (animate == null) ? _config.animate : toBool(scope.parentScope.eval(animate.toString()));
+ }
+
+ int get computedMax => max;
+ bool get isAnimate => animate;
+}
+
+@Component(
+ selector: 'stackedProgress',
+ useShadowDom: false,
+// templateUrl: 'packages/angular_ui/progressbar/stackedProgress.html'
+ template: '''
+
+
''' +) +//@Component( +// selector: '[stackedProgress]', +// useShadowDom: false, +// templateUrl: 'packages/angular_ui/progressbar/stackedProgress.html') +class Progress implements AttachAware, ScopeAware { + Scope scope; + + dom.Element _element; + String classes; + + Progress(this._element); + + void attach() { + this.classes = _element.classes.toString(); + } +} + +@Component( + selector: 'bar', + //templateUrl: 'packages/angular_ui/progressbar/bar.html', + template: ''' +''', + useShadowDom: false, + map: const { + 'value': '=>value', + 'type': '@type' + }) +//@Component( +// selector: '[bar]', +// templateUrl: 'packages/angular_ui/progressbar/bar.html', +// publishAs: 'ctrl', +// useShadowDom: false, +// map: const { +// 'value': '=>value', +// 'type': '@type' +// }) +class Bar extends _ProgressbarBase { + ProgressbarConfig _config; + NodeAttrs _parentAttrs; + + int _max; + bool _animate; + + String get type => _type; + set type(val) { _type = val; } + String get classes => _classes; + + Bar(this._config, Transition transistion, dom.Element element) : super(transistion, element); + + evalMaxOrDefault(Scope scope) { + if (_element.parent.attributes.containsKey("max")) { + _max = scope.parentScope.eval(_element.parent.attributes["max"]); + } else { + _max = _config.max; + } + } + evalAnimateOrDefault(Scope scope) { + if (_element.parent.attributes.containsKey("animate")) { + _animate = scope.parentScope.eval(_element.parent.attributes["animate"]); + } else { + _animate = _config.animate; + } + } + + int get computedMax => _max; + bool get isAnimate => _animate; +} + +abstract class _ProgressbarBase implements AttachAware, ScopeAware { + + Scope scope; + dom.Element _element; + Transition _transistion; + + int _value = 0; + int _oldValue = 0; + + String _type; + String _classes; + + _ProgressbarBase(this._transistion, this._element); + + set value(int currenValue) { + _value = currenValue; + if (computedMax != null) { + _update(getProgressBarElement()); + } + } + + int get computedMax; + bool get isAnimate; + + dom.Element getProgressBarElement() => _element.querySelector(".progress-bar"); + + evalMaxOrDefault(Scope scope); + evalAnimateOrDefault(Scope scope); + + void attach() { + _classes = _element.classes.toString(); + new async.Future.delayed(Duration.ZERO, () { + // We need call update on next event-loop iteration when element + // will be really attached. + evalMaxOrDefault(scope); + evalAnimateOrDefault(scope); + _update(getProgressBarElement()); + }); + } + + void _update(dom.Element shadowElement) { + if (_value == null) { + throw new StateError('attribute value is required, add value="{{initialValue}}" to your element: \'${_element.innerHtml}\'!'); + } + + int percent = _getPercentage(_value); + if (isAnimate) { + shadowElement.style.width = _getPercentage(_oldValue).toString() + '%'; + _transistion(shadowElement, {'width': (percent.toString() + '%')}); + } else { + shadowElement.style.width = (percent.toString() + '%'); + shadowElement.style.transition = 'none'; + } + _oldValue = _value; + } + + int _getPercentage(int value) { + return (100 * value / computedMax).round(); + } +} \ No newline at end of file diff --git a/lib/progressbar/progressbar.html b/lib/progressbar/progressbar.html new file mode 100644 index 0000000..408d508 --- /dev/null +++ b/lib/progressbar/progressbar.html @@ -0,0 +1,11 @@ + + +
+
+
\ No newline at end of file
diff --git a/lib/progressbar/readme.md b/lib/progressbar/readme.md
new file mode 100644
index 0000000..291f942
--- /dev/null
+++ b/lib/progressbar/readme.md
@@ -0,0 +1,107 @@
+# Changes in implementations
+
+Because of the differences between angularjs and angulardart, it is impossible to support
+AngularUI progressbar directive the same way in dart.
+
+##