Skip to content
Permalink
Browse files

updates to todos and remake framework

  • Loading branch information...
panphora committed Aug 22, 2019
1 parent 511c5e4 commit c624955e7259757938658809db08c191e2556985
@@ -1,6 +1,7 @@
import { $ } from '../queryjs';
import { camelCaseToDash } from '../hummingbird/lib/string';
import { callWatchFunctions } from './syncData';
import { callSaveFunction } from './onSave';

export default function () {

@@ -12,6 +13,10 @@ export default function () {

// set value
setValue({elem: event.currentTarget, keyName, attributeValue});

if (event.currentTarget.getAttribute("data-i") === "triggerSaveOnChange") {
callSaveFunction({targetElement: event.currentTarget});
}
});

// plain toggle, using a <div> or <button> or <a>
@@ -22,6 +27,10 @@ export default function () {

// set value
setValue({elem: event.currentTarget, keyName, attributeValue: "true", toggleValue: true});

if (event.currentTarget.getAttribute("data-i") === "triggerSaveOnChange") {
callSaveFunction({targetElement: event.currentTarget});
}
})

// <radio> AND <select>
@@ -32,6 +41,10 @@ export default function () {

// set value
setValue({elem: event.currentTarget, keyName, attributeValue});

if (event.currentTarget.getAttribute("data-i") === "triggerSaveOnChange") {
callSaveFunction({targetElement: event.currentTarget});
}
});


@@ -43,6 +56,10 @@ export default function () {

// set value
setValue({elem: event.currentTarget, keyName, attributeValue});

if (event.currentTarget.getAttribute("data-i") === "triggerSaveOnChange") {
callSaveFunction({targetElement: event.currentTarget});
}
});

}
@@ -1,11 +1,13 @@
import { $ } from '../queryjs';
import { camelCaseToDash } from '../hummingbird/lib/string';
import { callWatchFunctions } from "./syncData";
import { callSaveFunction } from './onSave';

export default function () {

// <input> and <textarea>
$.on("input", "input[data-i], textarea[data-i]", function (event) {
// IMPORTANT: This is ONLY for text inputs, not radio, select, or checkboxes
$.on("input", "input[type='text'][data-i], textarea[data-i]", function (event) {
// 2. get the key name inside the name attribute
let camelCaseKeyName = event.currentTarget.getAttribute("name");
// 3. convert camel case to dash case
@@ -27,6 +29,10 @@ export default function () {
value: newValue,
dataSourceElem: outputElem
});

if (event.currentTarget.getAttribute("data-i") === "triggerSaveOnChange") {
callSaveFunction({targetElement: event.currentTarget});
}
});

}
@@ -2,11 +2,21 @@ import { getDataAndDataSourceElemFromNodeAndAncestors, setValueForKeyName } from
import { camelCaseToDash } from '../hummingbird/lib/string';
import { callWatchFunctionsOnElem, getWatchElements } from './watchHelpers';


// this is fed a save callback function when inputjs in initialized
let afterSyncCallbacks = [];
export function afterSync (cb) {
afterSyncCallbacks.push(cb);
}

// syncDataBetweenElements
// 1. get the data
// 2. loop through the keys
// 3. sync data from keys into targetElement (looking through ancestors)
// 4. call all watch functions inside where the data was synced into
// 5. syncs data into input elements if they're inside the element that was synced into
// 6. the afterSyncCallbacks are called
// *** THIS INCLUDES A SAVE FUNCTION DEFINED WHEN REMAKE IS INITIALIZED ***
export function syncDataBetweenElements ({sourceElement, targetElement, shouldTriggerSave}) {

let elementsDataWasSyncedInto = [];
@@ -48,7 +58,7 @@ export function triggerSyncAndSave (event) {
// 2. find the nearest ancestor element that has the attribute `data-i-sync`
let syncElement = event.currentTarget.closest("[data-i-sync]");

// make sure data sync happens after all date is in place
// make sure data sync happens after all data is in place
// e.g. we might want to have the switch action button also set data
// (we currently do this with the inline edit revisions submit button)
setTimeout(() => {
@@ -1,3 +1,5 @@
{
"text": "Hello"
"todo": {
"text": "Hello"
}
}
@@ -0,0 +1,5 @@
document.body.addEventListener("click", function (event) {
if (event.target.closest(".js-pd")) {
event.preventDefault();
}
});
@@ -1,4 +1,5 @@
import Remake from '../../../_remake/client-side';
import './helpers/event-helpers';
import crostini from 'crostini';

Remake.init({
@@ -1,6 +1,7 @@
body
overflow-x: scroll
padding: 1.5rem
color: #212529
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol

*
@@ -0,0 +1,8 @@
.block
display: block

.flex
display: flex

.justify-content--flex-end
justify-content: flex-end
@@ -0,0 +1,4 @@
.text-link
color: #228BE6
&:hover
text-decoration: none
@@ -0,0 +1,8 @@
.page
max-width: 480px
margin: 0 auto
padding: 3rem 0
&__heading
margin-bottom: 24px
font-weight: bold
font-size: 28px
@@ -0,0 +1,21 @@
.todo-lists
margin-bottom: 24px
&__item
display: flex
margin-bottom: 14px
padding: 11px 16px 12px 18px
text-decoration: none
cursor: pointer
color: #212529
border: 1px solid #CED4DA
&:hover
background-color: #f8f9fa
border-color: #adb5bd
&__edit
margin-left: auto
text-transform: uppercase
text-decoration: underline
font-size: 14px
color: #868E96
&:hover
text-decoration: none
@@ -0,0 +1,21 @@
.todos
margin-bottom: 20px
&__todo
display: flex
margin-bottom: 14px
&__todo-checkbox-area
display: flex
align-items: center
justify-content: center
width: 42px
height: 42px
background-color: #FFE066
&__todo-text
flex: 1 1 auto
padding: 11px 16px 12px 18px
cursor: pointer
color: #d66f00
background-color: #FFF3BF
&:hover
background-color: #ffec99

@@ -1,9 +1,21 @@
// base
@import 'helpers/open-color'
@import 'helpers/colors'
@import 'helpers/base'
@import 'helpers/spacing'
@import 'helpers/flash'

// helpers
@import 'helpers/display'

// basic components
@import 'helpers/buttons'
@import 'helpers/text-field'
@import 'helpers/flash'
@import 'helpers/links'
@import 'helpers/page'
@import 'helpers/site-nav'
@import 'helpers/text-field'
@import 'helpers/todo-list'
@import 'helpers/todos'

// pages
@import 'helpers/accounts'
@@ -7,11 +7,7 @@
</head>
<body>
<nav class="site-nav" role="navigation" aria-label="main navigation">
{{#if currentUser}}
<a class="site-nav__home" href="/{{currentUser.details.username}}">Todos</a>
{{else}}
<a class="site-nav__home" href="/">Todos</a>
{{/if}}
<a class="site-nav__home" href="/">Todos</a>
<div class="site-nav__right">
{{#if currentUser}}
<span class="text--white m-r-16">Hi {{currentUser.details.username}}!</span>
@@ -1,18 +1,33 @@
<div
data-o-save-deep="defaultSave"
data-o-type="object"
>
<div
class="todo-lists"
data-o-key="todoLists"
data-o-type="list"
{{#if pageHasAppData}}
<div
class="page"
data-o-save-deep="defaultSave"
data-o-type="object"
>
{{#each data.todoLists}}
{{> todoList todoList=this}}
{{/each}}
<h2 class="page__heading">Todo Lists</h2>
<div
class="todo-lists"
data-o-key="todoLists"
data-o-type="list"
>
{{#each data.todoLists}}
{{> todoList todoList=this pageAuthor=@root.pageAuthor}}
{{/each}}
</div>
<div class="flex justify-content--flex-end">
<button
class="button"
data-i-new="todoList .todo-lists"
>Add Todo List</button>
</div>
</div>
</div>
<button
class="button"
data-i-new="todoList .todo-lists"
>Add Todo List</button>
{{else}}
<div class="page">
<h2 class="page__heading">Welcome to Todos!</h2>
{{#if currentUser}}
<a class="button" href="/{{currentUser.details.username}}">Go to your todo lists</a>
{{else}}
<a class="button" href="/signup">Sign up!</a>
{{/if}}
</div>
{{/if}}
@@ -1,6 +1,24 @@
<div class="todo-lists">Todo list page</div>
{{> todo}}
<button
class="button"
data-i-new="todoList .todo-lists"
>Add Todo List</button>
<div
class="page"
data-o-save-deep="defaultSave id:{{currentItem.id}}"
data-o-type="object"
data-o-key-id="{{currentItem.id}}"
>
<a class="text-link block m-b-32" href="/{{pageAuthor.details.username}}">Go back</a>
<h2 class="page__heading">Todos</h2>
<div
class="todos"
data-o-key="todos"
data-o-type="list"
>
{{#each currentItem.todos}}
{{> todo todo=this pageAuthor=@root.pageAuthor}}
{{/each}}
</div>
<div class="flex justify-content--flex-end">
<button
class="button"
data-i-new="todo .todos"
>Add Todo</button>
</div>
</div>
@@ -1 +1,16 @@
<div>todo text</div>
<div
class="todos__todo"
data-o-type="object"
data-o-key-id="{{todo.id}}"
data-o-key-is-complete="{{todo.isComplete}}"
data-o-key-text="{{todo.text}}"
>
<div class="todos__todo-checkbox-area">
<input data-i="triggerSaveOnChange" type="checkbox" name="isComplete" value="true" {{#if todo.isComplete}}checked{{/if}}>
</div>
<div
class="todos__todo-text"
data-i-editable-with-remove="text(text-single-line)"
data-w-key-text="innerText"
>{{todo.text}}</div>
</div>
@@ -1,7 +1,16 @@
<div
data-i-editable-with-remove="name(text-single-line)"
<a
class="todo-lists__item"
data-o-type="object"
data-o-key-id="{{todoList.id}}"
data-o-key-name="{{todoList.name}}"
data-w-key-name="innerText"
>{{todoList.name}}</div>
href="{{pageAuthor.details.username}}/todo-list/{{todoList.id}}"
>
<span
data-w-key-name="innerText"
>{{todoList.name}}</span>
<span
class="todo-lists__edit js-pd"
href="#"
data-i-editable-with-remove="name(text-single-line)"
>Edit</span>
</a>

0 comments on commit c624955

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