Skip to content
Permalink
Browse files

doc: Basic-Dialogs like AlertDialog, ConfirmDialog are working

  • Loading branch information...
MikeMitterer committed Nov 14, 2018
1 parent 060ebc0 commit 272c81e1fd59266e45d60d2835bc1445cf1a0786
@@ -0,0 +1,2 @@
WEB_DESCRIPTION="Material 4 Dart - Dialogs"
WEB_PACKAGE="m4d_dialog"
@@ -6,27 +6,6 @@ class MdlConfirmDialog extends MaterialDialog {
static const String _DEFAULT_YES_BUTTON = "Yes";
static const String _DEFAULT_NO_BUTTON = "No";

@override
String template = """
<div class="mdl-dialog">
<div class="mdl-dialog__content">
{{#hasTitle}}
<h5>{{title}}</h5>
{{/hasTitle}}
<p>{{text}}</p>
</div>
<div class="mdl-dialog__actions" layout="row">
<button class="mdl-button" data-mdl-click="onNo()">
{{noButton}}
</button>
<button class="mdl-button mdl-button--colored" data-mdl-click="onYes()">
{{yesButton}}
</button>
</div>
</div>
""";


String title = "";
String text = "";
String yesButton = _DEFAULT_YES_BUTTON;
@@ -49,18 +28,46 @@ class MdlConfirmDialog extends MaterialDialog {
return this;
}

bool get hasTitle => (title != null && title.isNotEmpty);

// - EventHandler -----------------------------------------------------------------------------

void onYes() {
void _onYes() {
close(MdlDialogStatus.YES);
}

void onNo() {
void _onNo() {
close(MdlDialogStatus.NO);
}

// - Template ---------------------------------------------------------------------------------

@override
String get template => """
<div class="mdl-dialog">
<div class="mdl-dialog__content">
${_hasTitle ? '<h5>$title</h5>' : ''}
<p>${text}</p>
</div>
<div class="mdl-dialog__actions" layout="row">
<button class="mdl-button" data-mdl-click="onNo()">
${noButton}
</button>
<button class="mdl-button mdl-button--colored" data-mdl-click="onYes()">
${yesButton}
</button>
</div>
</div>
""";

@override
Map<String, Function> get events {
return <String,Function>{
"onNo" : () => _onNo(),
"onYes" : () => _onYes()
};
}


// - private ----------------------------------------------------------------------------------
bool get _hasTitle => (title != null && title.isNotEmpty);

}

Large diffs are not rendered by default.

@@ -48,18 +48,18 @@ class MaterialTimePicker extends MaterialDialog {

// - EventHandler -----------------------------------------------------------------------------

void onClose() {
void _onClose() {
_logger.info("onClose");

close(MdlDialogStatus.OK);
}

void onCancel() {
void _onCancel() {
_logger.info("onCancel");
close(MdlDialogStatus.CANCEL);
}

void onClickHour(final dom.Event event) {
void _onClickHour(final dom.Event event) {
event.stopPropagation();

final element = event.target as dom.HtmlElement;
@@ -75,7 +75,7 @@ class MaterialTimePicker extends MaterialDialog {
_hour = hour;
}

void onClickMinute(final dom.Event event) {
void _onClickMinute(final dom.Event event) {
event.stopPropagation();

final element = event.target as dom.HtmlElement;
@@ -91,99 +91,26 @@ class MaterialTimePicker extends MaterialDialog {
_minute = minute;
}

void onClickDialogBarHour(final dom.Event event) {
void _onClickDialogBarHour(final dom.Event event) {
event.stopPropagation();
dialog.classes.removeAll(_showMinuteViewClasses);
}

void onClickDialogBarMinute(final dom.Event event) {
void _onClickDialogBarMinute(final dom.Event event) {
event.stopPropagation();
dialog.classes.addAll(_showMinuteViewClasses);
}

// - private ----------------------------------------------------------------------------------

List<String> get _selectedHourClasses => <String>["mdl-color--accent", "mdl-color-text--accent-contrast"];
List<String> get _showMinuteViewClasses => <String>["show-minute-view"];

String get _selectedHourPrefixClass => "mdl-timepicker__hours--";
String get _selectedMinutePrefixClass => "mdl-timepicker__minutes--";

dom.HtmlElement get _elementHour => dialog.querySelector(".mdl-timepicker__time--hour");
dom.SpanElement get _elementMinute => dialog.querySelector(".mdl-timepicker__time--minute");
dom.HtmlElement get _elementHours => dialog.querySelector(".mdl-timepicker__hours");
dom.HtmlElement get _elementMinutes => dialog.querySelector(".mdl-timepicker__minutes");


void set _hour(final String date) => _elementHour.text = date;
void set _minute(final String year) => _elementMinute.text = year;

/// Called by the framework after the dialog was rendered but still invisible
//@override
Future _init(_) async {

_hours.clear();
_elementHours.children
.forEach((final dom.Element element) {
element.children.forEach((final dom.Element element) => _hours.add(element));
});

_minutes.clear();
_elementMinutes.children
.forEach((final dom.Element element) {
element.children.forEach((final dom.Element element) => _minutes.add(element));
});

_selectHour(dateTime.hour);
_selectMinute(dateTime.minute);

_logger.info("Hour: ${_hours.length}, Minutes: ${_minutes.length}");
}

void _selectHour(final int hour) {
_hours.forEach((final dom.HtmlElement element)
=> element.classes.removeAll(_selectedHourClasses));

final int index = hour > 0 ? hour -1 : 23;
_hours[index].classes.addAll(_selectedHourClasses);

_elementHours.classes.where((final String selector) => selector.startsWith(_selectedHourPrefixClass))
.forEach((final String selector) => _elementHours.classes.remove(selector));

final String currentHourClass = "${_selectedHourPrefixClass}${index + 1}";
_elementHours.classes.add(currentHourClass);
}

void _selectMinute(final int minute) {
int index = (minute / 5).round();

// 60 mins
if(index > 11) {
index = 0;
}
_minutes.forEach((final dom.HtmlElement element)
=> element.classes.removeAll(_selectedHourClasses));

_minutes[index].classes.addAll(_selectedHourClasses);

_elementMinutes.classes.where((final String selector) => selector.startsWith(_selectedMinutePrefixClass))
.forEach((final String selector) => _elementMinutes.classes.remove(selector));

final String currentHourClass = "${_selectedMinutePrefixClass}${index * 5}";
_elementMinutes.classes.add(currentHourClass);
}


//- Template -----------------------------------------------------------------------------------

@override
String template = """
String get template => """
<div class="mdl-dialog mdl-timepicker">
<div class="mdl-dialog__toolbar mdl-color--accent">
<div class="mdl-timepicker__time">
<div class="mdl-timepicker__time--hour mdl-color-text--accent-contrast
mdl-typography--display-2 is-active"
data-mdl-click="onClickDialogBarHour(\$event)">{{hour}}
data-mdl-click="onClickDialogBarHour(\$event)">${hour}
</div>
<div class="mdl-timepicker__time--divider mdl-color-text--accent-contrast
@@ -192,7 +119,7 @@ class MaterialTimePicker extends MaterialDialog {
<div class="mdl-timepicker__time--minute mdl-color-text--accent-contrast
mdl-typography--display-2"
data-mdl-click="onClickDialogBarMinute(\$event)">{{minute}}
data-mdl-click="onClickDialogBarMinute(\$event)">${minute}
</div>
</div>
</div>
@@ -263,6 +190,89 @@ class MaterialTimePicker extends MaterialDialog {
</div>
""";

@override
Map<String, Function> get events {
return <String,Function>{
"onClose" : () => _onClose(),
"onCancel" : () => _onCancel(),
"onClickHour" : (event) => _onClickHour(event as dom.Event),
"onClickMinute" : (event) => _onClickMinute(event as dom.Event),
"onClickDialogBarHour" : (event) => _onClickDialogBarHour(event as dom.Event),
"onClickDialogBarMinute" : (event) => _onClickDialogBarMinute(event as dom.Event)
};
}

// - private ----------------------------------------------------------------------------------

List<String> get _selectedHourClasses => <String>["mdl-color--accent", "mdl-color-text--accent-contrast"];
List<String> get _showMinuteViewClasses => <String>["show-minute-view"];

String get _selectedHourPrefixClass => "mdl-timepicker__hours--";
String get _selectedMinutePrefixClass => "mdl-timepicker__minutes--";

dom.HtmlElement get _elementHour => dialog.querySelector(".mdl-timepicker__time--hour");
dom.HtmlElement get _elementMinute => dialog.querySelector(".mdl-timepicker__time--minute");
dom.HtmlElement get _elementHours => dialog.querySelector(".mdl-timepicker__hours");
dom.HtmlElement get _elementMinutes => dialog.querySelector(".mdl-timepicker__minutes");


void set _hour(final String date) => _elementHour.text = date;
void set _minute(final String year) => _elementMinute.text = year;

/// Called by the framework after the dialog was rendered but still invisible
//@override
Future _init(_) async {

_hours.clear();
_elementHours.children
.forEach((final dom.Element element) {
element.children.forEach((final dom.Element element) => _hours.add(element));
});

_minutes.clear();
_elementMinutes.children
.forEach((final dom.Element element) {
element.children.forEach((final dom.Element element) => _minutes.add(element));
});

_selectHour(dateTime.hour);
_selectMinute(dateTime.minute);

_logger.info("Hour: ${_hours.length}, Minutes: ${_minutes.length}");
}

void _selectHour(final int hour) {
_hours.forEach((final dom.HtmlElement element)
=> element.classes.removeAll(_selectedHourClasses));

final int index = hour > 0 ? hour -1 : 23;
_hours[index].classes.addAll(_selectedHourClasses);

_elementHours.classes.where((final String selector) => selector.startsWith(_selectedHourPrefixClass))
.forEach((final String selector) => _elementHours.classes.remove(selector));

final String currentHourClass = "${_selectedHourPrefixClass}${index + 1}";
_elementHours.classes.add(currentHourClass);
}

void _selectMinute(final int minute) {
int index = (minute / 5).round();

// 60 mins
if(index > 11) {
index = 0;
}
_minutes.forEach((final dom.HtmlElement element)
=> element.classes.removeAll(_selectedHourClasses));

_minutes[index].classes.addAll(_selectedHourClasses);

_elementMinutes.classes.where((final String selector) => selector.startsWith(_selectedMinutePrefixClass))
.forEach((final String selector) => _elementMinutes.classes.remove(selector));

final String currentHourClass = "${_selectedMinutePrefixClass}${index * 5}";
_elementMinutes.classes.add(currentHourClass);
}

}

@@ -63,7 +63,7 @@
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div>Sample for pub-package:
<a href="https://pub.dartlang.org/packages/m4d_directive" target="_blank">m4d_directive</a>
<a href="https://pub.dartlang.org/packages/m4d_dialog" target="_blank">m4d_dialog</a>
<span class="published">/ published: <span class="pubdate">2018-09-19 / 14:09:52</span></span>
</div>
</div>
@@ -2,7 +2,7 @@ name: {{samplename}}_sample
description: Material4Dart (m4d) '{{samplename}}' Sample
version: 0.1.0
author: Mike Mitterer <office@mikemitterer.at>
homepage: https://github.com/MikeMitterer/dart-material-design-lite
homepage: https://github.com/MikeMitterer/m4d_dialog

environment:
sdk: ">=2.0.0 <3.0.0"
@@ -1,14 +1,15 @@
# Rsync-Destination für dieses sample
#
# - ssh ls2
# - cat ~/website/config/nginx/_template.conf.txt | sed -e 's/%example%/mdlx_dialog/' > ~/website/config/nginx/mdlx_dialog.conf
# - cat ~/website/config/nginx/mdlx_dialog.conf
# - sudo mkdir -p ~/website/data/example/mdlx_dialog
# - sudo chown ubuntu:ubuntu ~/website/data/example/mdlx_dialog
# - sudo chmod 775 ~/website/data/example/mdlx_dialog
# - ls -lad ~/website/data/example/mdlx_dialog
# - cat ~/website/config/nginx/_template.conf.txt | sed -e 's/%example%/m4d_dialog/' > ~/website/config/nginx/m4d_dialog.conf
# - cat ~/website/config/nginx/m4d_dialog.conf
# - sudo mkdir -p ~/website/data/example/m4d_dialog
# - sudo chown ubuntu:ubuntu ~/website/data/example/m4d_dialog
# - sudo chmod 775 ~/website/data/example/m4d_dialog
# - echo 'm4d_dialog' > ~/website/data/example/m4d_dialog/index.html
# - ls -lad ~/website/data/example/m4d_dialog
# - cd ~/website && docker-compose restart
#
RSYNC_DESTINATION=":~/website/data/example/mdlx_dialog/"
EXAMPLE_URL="http://mdlx_dialog.example.mikemitterer.at/"
RSYNC_DESTINATION=":~/website/data/example/m4d_dialog/"
EXAMPLE_URL="http://m4d_dialog.example.mikemitterer.at/"

0 comments on commit 272c81e

Please sign in to comment.
You can’t perform that action at this time.