Skip to content

Two way data #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marcus7777 wants to merge 22 commits into
base: master
Choose a base branch
from
Open

Two way data #17

Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
e632078
Update polymer-quill.html
marcus7777 Apr 2, 2017
8c6a0d3
Two-way data binding
marcus7777 Apr 2, 2017
b35c17d
Update polymer-quill.html
marcus7777 Apr 2, 2017
e053393
Update polymer-quill.html
marcus7777 Apr 3, 2017
416a3e3
Update polymer-quill.html
marcus7777 Apr 3, 2017
00462f3
Update polymer-quill.html
marcus7777 Apr 3, 2017
529e3f6
Update polymer-quill.html
marcus7777 Apr 4, 2017
f98eb9e
Update polymer-quill.html
marcus7777 Apr 5, 2017
f5c021f
Update polymer-quill.html
marcus7777 Apr 5, 2017
f162378
Update polymer-quill.html
marcus7777 Apr 5, 2017
e82e452
Update polymer-quill.html
marcus7777 Apr 5, 2017
6d8b1cd
Update polymer-quill.html
marcus7777 Apr 5, 2017
0b3564a
Update polymer-quill.html
marcus7777 Apr 5, 2017
7908160
Update polymer-quill.html
marcus7777 Apr 5, 2017
8192166
Update polymer-quill.html
marcus7777 Apr 5, 2017
3697288
Update polymer-quill.html
marcus7777 Apr 5, 2017
9d94a72
Update polymer-quill.html
marcus7777 Apr 5, 2017
bd16835
Update polymer-quill.html
marcus7777 Apr 5, 2017
8d52e8b
Update polymer-quill.html
marcus7777 Apr 5, 2017
6206c63
Update polymer-quill.html
marcus7777 Apr 5, 2017
2de3bb6
Update polymer-quill.html
marcus7777 Apr 6, 2017
741079e
Update polymer-quill.html
marcus7777 Apr 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 41 additions & 30 deletions polymer-quill.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="polymer-quill-import.html">
<link rel="import" href="polymer-quill-styles-snow.html">
Expand Down Expand Up @@ -86,22 +85,21 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
--calculated-polymer-quill-editor-overflow: var(--polymer-quill-editor-overflow, scroll);
display: block;
@apply(--polymer-quill);
}
};
#editor {
max-height: var(--calculated-polymer-quill-editor-max-height);
min-height: var(--calculated-polymer-quill-editor-min-height);
overflow: var(--calculated-polymer-quill-editor-overflow);
border: var(--calculated-polymer-quill-editor-border);
}
};
.results {
padding: 20px 10px;
overflow-x: scroll;
}
};
.disabled {
border: 1px solid #ccc !important;
opacity: 0.85;
}

};
</style>
<div id="toolbar" hidden$='{{hideToolbar}}'>
<!-- <span class="ql-formats">
Expand Down Expand Up @@ -155,8 +153,8 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
<select class="ql-align" title="Align">></select>
</span>
<span class="ql-formats">
<button class="ql-link" title="Link"></button>
<button class="ql-image" title="Image" hidden$="{{standardToolbar}}"></button>
<button class="ql-link" title="Link" hidden$="{{standardToolbar}}"></button>
<button class="ql-image" title="Image"></button>
<button class="ql-video" title="Video" hidden$="{{standardToolbar}}"></button>
<!-- <button class="ql-formula"></button>> -->
</span>
Expand Down Expand Up @@ -220,7 +218,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
storeAs: {
type: String,
value: 'delta',
notify: true,
},
/**
* Save Interval in milliseconds.
Expand All @@ -229,7 +226,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
saveInterval: {
type: Number,
value: 2000,
notify: true,
},
/**
* Delay load of content in milliseconds.
Expand All @@ -239,7 +235,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
delay: {
type: Number,
value: 10,
notify: true,
},
/**
* Show Results below editor of saves in Delta or HMTL format.
Expand All @@ -248,7 +243,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
showResults: {
type: Boolean,
value: false,
notify: true,
},
/**
* Show Results below editor of saves in HMTL format.
Expand All @@ -257,7 +251,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
showHtml: {
type: Boolean,
value: false,
notify: true,
},
/**
* Editor toolbar type.
Expand All @@ -266,7 +259,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
toolbarType: {
type: String,
value: 'standard',
notify: true,
},
/**
* Standard Tool
Expand All @@ -275,7 +267,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
standardToolbar: {
type: Boolean,
value: true,
notify: true,
},
/**
* Enable tracks if editing is enabled.
Expand All @@ -284,7 +275,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
enable: {
type: String,
value: 'true',
notify: true,
},
/**
* Whether to instantiate the editor to read-only mode.
Expand All @@ -293,7 +283,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
readOnly: {
type: Boolean,
value: false,
notify: true,
},
/**
* Disable Class title.
Expand All @@ -310,7 +299,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
useContentReset: {
type: Boolean,
value: false,
notify: true,
},
/**
* Placeholder for empty editor.
Expand All @@ -319,7 +307,6 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
placeholder: {
type: String,
value: 'Compose an epic...',
notify: true,
}
},

Expand Down Expand Up @@ -400,10 +387,12 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
}
}
change = change.compose(delta);
}.bind(this));

// Save periodically
setInterval(function() {
}.bind(this))

var typingTimer
var saveInterval = this.saveInterval
var source = "api"
var savePeriodically = function() {
if (change.length() > 0) {
if (this.showResults) {
console.log('Saving changes', change);
Expand All @@ -416,11 +405,23 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
this.html = this.quill.root.innerHTML;

// Fire custom event change
this.fire('change', {delta: change, change: JSON.stringify(change), content: this.content, html: this.html, entireDelta: this.quill.getContents()});
change = new Delta();
if (source == "user") {
this.fire('change', {delta: change, change: JSON.stringify(change), content: this.content, html: this.html, entireDelta: this.quill.getContents()})
} else {
this.fire('update', {delta: change, change: JSON.stringify(change), content: this.content, html: this.html, entireDelta: this.quill.getContents()})
}
change = new Delta()
} else if (this.content !== JSON.stringify(this.quill.getContents()) && this.content !== this.quill.getContents()) { // Allow changes from the Two-way data binding system
this.resetContent(this.content)
}
}.bind(this), this.saveInterval);

clearTimeout(typingTimer)
typingTimer = setTimeout(savePeriodically, saveInterval)
}.bind(this)
this.quill.on('text-change', function(delta, oldDelta, theSource) {
source = theSource
clearTimeout(typingTimer)
typingTimer = setTimeout(savePeriodically, saveInterval)
})
// Check for unsaved data
window.onbeforeunload = function() {
if (change.length() > 0) {
Expand Down Expand Up @@ -463,7 +464,11 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
var notset = true;
if (this.content && this.content.length > 1 && this.content != undefined && this.content !="<p>undefined</p>" ) {
if (this.storeAs === 'delta') {
this.quill.setContents(JSON.parse(this.content),'api');
if (Array.isArray(this.content)) {
this.quill.setContents(this.content,'api');
} else {
this.quill.setContents(JSON.parse(this.content),'api');
}
} else { // HTML
this.quill.root.innerHTML = this.content;
}
Expand Down Expand Up @@ -510,14 +515,20 @@ <h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save e
resetContent: function(content){
// Set content
this.async(function() {
var range = this.quill.getSelection()
if (this.storeAs === 'delta') {
if (this.content.length > 1) {
if (Array.isArray(this.content)) {
this.quill.setContents(this.content,'api')
} else if (this.content.length > 1) {
this.quill.setContents(JSON.parse(this.content),'api');
}
} else { // HTML
this.quill.root.innerHTML = this.content;
}
this.html = this.quill.root.innerHTML;
this.html = this.quill.root.innerHTML
if (range !== null ) {
this.quill.setSelection(range)
}
},this.delay);
},

Expand Down