JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://rawgithub.com/glebcha/reminder-mithril/master/assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<section id="reminderapp"></section>
<footer class="footer">
<p>You can create notification with ENTER key</p>
<p>Clear input field with ESCAPE</p>
<p>Double-click on notification will turn on editing</p>
<p>You can press ESCAPE while editing or change focus to revert changes made for chosen notification</p>
</footer>
JavaScript
'use strict';
var reminder = reminder || {};
// Define properties of Remind class
reminder.Remind = function(data) {
this.description = m.prop(data.description);
this.date = m.prop(data.date);
this.edited = m.prop(data.edited);
this.error = m.prop(data.error);
};
(function(){
// Constant with name of notifications list stored in localStorage
var STORAGE_ID = 'task-list';
// Getter/Setter to operate notifications list stored in localStorage
reminder.storage = {
get: function () {
return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
set: function (todos) {
localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
}
};
})();
reminder.controller = function() {
// Get notifications object from localStorage
this.list = reminder.storage.get();
// Create collection
this.list = this.list.map(function(item) {
return new reminder.Remind(item);
});
// Temporary value storage (until we create notification)
this.description = m.prop("");
// Add notification in list and update collection
this.MAX_STRING_LENGTH = 100; // Caonstant define max chars value to input
this.add = function() {
// Remove whitespaces and count chars with a help of regex
if (this.description() && this.description().replace(/\s/g, '').length <= this.MAX_STRING_LENGTH) {
this.list.push(new reminder.Remind({
description: this.description(this.description().trim()),
date: moment.utc().format(), // Write UTC-formatted date, so we can take into account timezone
edited: false,
error: false
}));
reminder.storage.set(this.list);
this.description("");
}
};
this.edit = function(index, ctrl) {
if (this.description() && this.description().replace(/\s/g, '').length <= ctrl.MAX_STRING_LENGTH) {
...