Permalink
Browse files

doc: Inplace-Edit-Example works

  • Loading branch information...
MikeMitterer committed Dec 6, 2018
1 parent b32dc54 commit dc742f810890750c5ff4c1b524c2c6af06af7337
@@ -33,8 +33,13 @@ import 'package:validate/validate.dart';

import 'package:m4d_core/m4d_core.dart';
import "package:m4d_core/m4d_ioc.dart" as ioc;
import 'package:m4d_directive/directive/components/interfaces/actions.dart';
import 'package:m4d_directive/directive/components/interfaces/stores.dart';
import 'package:m4d_directive/services.dart' as directiveService;
import 'package:m4d_flux/m4d_flux.dart';

part "template/MdlTemplateComponent.dart";
part "template/components/M4DListComponent.dart";
part "template/components/MdlTemplateComponent.dart";

part "template/interfaces.dart";

@@ -59,3 +64,15 @@ part "template/modules/TemplateRenderer.dart";
//
// //componentHandler().addModule(_templateModule);
//}

void registerM4DTemplateComponents() {
registerM4DListComponent();
}

class TemplateModule extends ioc.IOCModule {

@override
configure() {
registerM4DTemplateComponents();
}
}
@@ -0,0 +1,133 @@
part of m4d_template;

class M4DListComponent extends MdlTemplateComponent {
final Logger _logger = new Logger('todo.M4DListComponent');

static const _cssClasses = _M4DListComponentCssClasses();

final SimpleValueStore _store;

String _template = null;
final _paramsFromTemplate = List<String>();

/// Optimize rendering frequency
Timer _timer = null;

Duration renderIntervall = Duration(milliseconds: 200);

M4DListComponent.fromElement(final dom.HtmlElement element,final ioc.IOCContainer iocContainer)
: _store = iocContainer.resolve(directiveService.SimpleValueStore).as<SimpleValueStore>(),
super(element,iocContainer) {
_init();
}

static M4DListComponent widget(final dom.HtmlElement element)
=> mdlComponent(element,M4DListComponent) as M4DListComponent;


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

void _init() {
_logger.info("M4DListComponent - init (Model: ${_model})");

_template = element.innerHtml.replaceAll(RegExp(r"<[/]*template>"), "");

final exp = RegExp(r"\{\{([^\}]+)\}\}");
exp.allMatches(_template).forEach((final Match match) {
_paramsFromTemplate.add(match.group(1).trim());
});

render().then((_) => _bindSignals() );

element.classes.add(_cssClasses.IS_UPGRADED);
}

void _bindSignals() {
_store.onChange.listen((final DataStoreChangedEvent event) {
// optimize rendering
if(event.data is PropertyChangedAction
&& (event.data as PropertyChangedAction).data == _model) {

if (_timer == null || !_timer.isActive) {
_timer = Timer(renderIntervall, () {
_timer?.cancel();
_timer = null;
render();
});
}
}
});
}

String get _model => DataAttribute.forAttribute(element, "model").asString();

List<SimpleDataObject> get _dao {

if(!_store.contains(_model)) {
throw ArgumentError("Store has no ${_model} property!");
}

return _store.prop(_model).value as List<SimpleDataObject>;
}

//- EventHandler -------------------------------------------------------------------------------
void _onClick(final String index) {
dom.window.alert("Clicked on Listitem #${index}");
}

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

@override
String get template {
final buffer = StringBuffer();

// Template must return one single element!!!
buffer.write("<ul class='item-container'>");

int index = 0;
_dao.forEach((final SimpleDataObject object) {
String content = _template;
_paramsFromTemplate.forEach((final String param) {
if(object.contains(param)) {
content = content.replaceAll("{{$param}}", object.asString(param));
}
});
content = content.replaceAll("{{index}}", "$index");
buffer.write(content);

index++;
});
buffer.write("</ul>");

return buffer.toString();
}

@override
Map<String,Function> get events {
return <String,Function>{
"onClick" : (index) => _onClick(index as String)
};
}
}

/// registration-Helper
void registerM4DListComponent() {
final MdlConfig config = new MdlWidgetConfig<M4DListComponent>(
_M4DListComponentCssClasses.MAIN_CLASS,
(final dom.HtmlElement element, final ioc.IOCContainer iocContainer)
=> new M4DListComponent.fromElement(element, iocContainer));

config.selectorType = SelectorType.TAG;
componentHandler().register(config);
}

/// Store strings for class names defined by this component that are used in
/// Dart. This allows us to simply change it in one place should we
/// decide to modify at a later date.
class _M4DListComponentCssClasses {
static const String MAIN_CLASS = "m4d-list";

final String IS_UPGRADED = 'is-upgraded';

const _M4DListComponentCssClasses();
}
@@ -21,6 +21,9 @@ dependencies:
m4d_core: '>=0.1.0 <1.0.0'
# path: /Volumes/Daten/DevLocal/DevDart/m4d/m4d_core

m4d_directive: # '>=0.1.0 <1.0.0'
path: /Volumes/Daten/DevLocal/DevDart/m4d/m4d_directive

m4d_flux: '>=0.1.0 <1.0.0'
# path: /Volumes/Daten/DevLocal/DevDart/m4d/m4d_flux

@@ -8,15 +8,23 @@ environment:
sdk: ">=2.0.0 <3.0.0"

dependencies:
uuid: any

m4d_template:
path: ../..

m4d_animation: '>=0.1.0 <1.0.0'
# path: /Volumes/Daten/DevLocal/DevDart/m4d/m4d_animation

m4d_components: '>=0.1.0 <1.0.0'
# path: /Volumes/Daten/DevLocal/DevDart/m4d/m4d_components

m4d_flux: '>=0.1.0 <1.0.0'
# path: /Volumes/Daten/DevLocal/DevDart/m4d/m4d_flux

m4d_form: '>=0.1.0 <1.0.0'
# path: /Volumes/Daten/DevLocal/DevDart/m4d/m4d_form

m4d_directive: '>=0.1.0 <1.0.0'

dev_dependencies:
@@ -0,0 +1,8 @@
log.level=info

pubspec.template=../_templates/pubspec.tmpl.yaml

sample.html.template=../_templates/default.index.html
sample.content=.sitegen/html/_content/index.html

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

@@ -0,0 +1,17 @@
title: INPLACE
samplename: inplace
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite-site/tree/master/samples/spa_inplace/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<!--
sample-inplace-persons implements "ScopeAware" so we can take
'persons' from this component and not from Application
-->
<sample-inplace-persons>
<m4d-list model="persons">
<template>
<sample-inplace-edit class="sample-inplace-edit--shadow" data-id="{{id}}"></sample-inplace-edit>
</template>
</m4d-list>
</sample-inplace-persons>
</div>
@@ -0,0 +1,9 @@
template_dir: ../_templates
assets_dir: ../_assets

# SASS_PATH wird nur durch "sass" unterstützt
# Usage: sitegen -c
sasscompiler: sass
sass_path:
- "package:mdl_inplace_edit_sample"
- "package:mdl"
Oops, something went wrong.

0 comments on commit dc742f8

Please sign in to comment.