Skip to content

Commit

Permalink
Merge pull request #71 from Palindrom/Remove-bar
Browse files Browse the repository at this point in the history 
Remove connection bar and test for disconnection events
  • Loading branch information
@alshakero
alshakero authored May 21, 2018
2 parents c5dd1de + 290a7f7 commit 0335e0f
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 208 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,10 @@ patch-applied | Fired when patch gets applied
patchreceived | Fired when patch gets received
patchsent | Fired when patch gets send
socketstatechanged | Fired when web socket state changes
connectionerror | Fired when unrecoverable connection error happens
connection-error | Fired when unrecoverable connection error happens
reconnection-countdown | Fired when reconnecting. has `milliseconds` property in details, denoting number of milliseconds to scheduled reconnection
reconnection-end | Fired after successful reconnection
generic-error | Fired when a generic Palindrom error occurs (server error, patch validation error, etc..)

:warning: Please note, that Polymer applies changes (especially array ones) asynchronously, so those could happen after `patch-applied` event was triggered.

Expand Down Expand Up @@ -109,8 +110,7 @@ In order to develop it locally we suggest to use [polyserve](https://npmjs.com/p
3. Go to the directory: `cd palindrom-client`
4. Install the local dependencies: `bower install`
5. Start the development server: `polyserve -p 8000`
6. Open the demo: [http://localhost:8000/components/palindrom-client/](http://localhost:8000/components/palindrom-client/)
7. Open the test suite: [http://localhost:8000/components/palindrom-client/test/](http://localhost:8000/components/palindrom-client/test/)
6. Open the test suite: [http://localhost:8000/components/palindrom-client/test/](http://localhost:8000/components/palindrom-client/test/)

## History

Expand Down
1 change: 0 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"name": "palindrom-client",
"version": "6.0.0",
"description": "Three-way data binding server - JS - HTML kept in flawless sync with JSON Patch, WebSockets/HTTP.",
"private": true,
"authors": [
Expand Down
214 changes: 32 additions & 182 deletions palindrom-client.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- palindrom-polymer-client version: 6.0.0 | MIT License -->
<!-- palindrom-polymer-client version: 7.0.0 | MIT License -->

<!--
`palindrom-client` element binds [Palindrom](https://github.com/Palindrom/Palindrom) with [Polymer's template binding](https://www.polymer-project.org/2.0/docs/devguide/templates.html).
Expand All @@ -16,101 +16,13 @@
[JSON Patch](https://tools.ietf.org/html/rfc6902)es.
All the changes from server are also received and propagated to your HTML.
@demo demo/index.html
-->
<script src="../Palindrom/dist/palindrom-dom.min.js"></script>

<template id="palindrom-client">
<style>
.box-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}

.box-container[hidden] {
display: none;
}

.box {
padding: 5px 5px;
}

.notice {
background-color: #fff4cc;
border-color: #ffe070;
color: #000;
}

.error {
background-color: #fee;
border: 1px solid #f9c1c1;
border-top: none;
color: #444;
}

.hourglass {
animation: rotateHG 2s cubic-bezier(.03, 1, 1, 0) infinite;
transform-origin: 50% 50%;
display: inline-block;
text-decoration: none!important;
}

@keyframes rotateHG {
100% {
transform: rotate(360deg)
}
}

.tappable {
cursor: pointer;
}

.tappable span {
text-decoration: underline;
}
</style>
<div class="box-container reconnect-pane" hidden>
<div class="box notice tappable" on-tap="reconnectNow">
<strong>
<span class="hourglass">⏳</span> Not connected.
</strong>
Connecting in <span class="reconnection-seconds">5</span>s...
<span>Retry now</span>
</div>
</div>
<div class="box-container reconnecting-now-pane" hidden>
<div class="box notice">
<strong>
<span class="hourglass">⏳</span> Connecting now...
</strong>
</div>
</div>
<div class="box-container error-pane" hidden>
<div class="box error tappable">
<span class="hourglass">⏳</span> Connection error.</strong> See console for details.
<a class="reloading-in-message">
Reloading page in <span class="reconnection-seconds">5</span>...
• <span on-tap="cancelReloading">Do not reload</span> •
</a>
<span on-tap="reload">Reload now</span>
</div>
</div>
<div class="box-container generic-error-pane" hidden>
<div class="box error tappable" on-tap="reload">
<strong>⚠️ An error has occurred.</strong> See console for details.
<span>Click here to reload</span>
</div>
</div>
</template>
<script>


(function() {

const template = document.currentScript.ownerDocument.querySelector('#palindrom-client');

(function () {
const defaultProps = {
"useWebSocket": true,
"debug": false,
Expand All @@ -132,22 +44,6 @@

// assign default properties
Object.assign(this, defaultProps);

// Creates the shadow root
const shadowRoot = this.attachShadow({ mode: 'open' });
const clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);

this.reconnectingNowPane = shadowRoot.querySelector('.reconnecting-now-pane');
this.errorPane = shadowRoot.querySelector('.error-pane');
this.genericErrorPane = shadowRoot.querySelector('.generic-error-pane');
this.reloadingInMessage = shadowRoot.querySelector('.reloading-in-message');
this.reconnectionSecondsSpans = shadowRoot.querySelectorAll('.reconnection-seconds');

// attach event handlers
for(const el of shadowRoot.querySelectorAll('[on-tap]')) {
el.addEventListener('click', this[el.getAttribute('on-tap')].bind(this));
}
}

reconnectNow() {
Expand All @@ -159,7 +55,6 @@
}

cancelReloading() {
this.errorPane.setAttribute('hidden', '');
clearInterval(this.reloadingInterval);
delete this.reloadingInterval;
}
Expand All @@ -186,7 +81,7 @@
listenTo = typeof listenTo == "string" ? document.getElementById(listenTo) : listenTo;
}
let palindrom = PalindromDOM.instances && PalindromDOM.instances.get(this.remoteUrl);
if(!palindrom) {
if (!palindrom) {
/**
* To tell whether we connected to an existing instance,
* or created our own. This is useful for detachement, we don't want
Expand All @@ -202,9 +97,7 @@
purity: this.purity,
localVersionPath: this.localVersionPath,
remoteVersionPath: this.remoteVersionPath,

listenTo,

onLocalChange: this.onLocalChange.bind(this),
onRemoteChange: this.onPatchApplied.bind(this),
onPatchReceived: this.onPatchReceived.bind(this),
Expand All @@ -224,7 +117,7 @@
this.onPatchApplied([{ op: 'replace', path: '', value: obj }], [{ removed: this.obj }])
}
});
if(!PalindromDOM.instances){
if (!PalindromDOM.instances) {
PalindromDOM.instances = new Map();
}
PalindromDOM.instances.set(this.remoteUrl, palindrom);
Expand All @@ -233,34 +126,34 @@
// with already established connection we cannot change listenTo parameter

this.palindrom = palindrom;
palindrom.onLocalChange = this.onLocalChange.bind(this);
palindrom.onRemoteChange = this.onPatchApplied.bind(this);
palindrom.onPatchReceived = this.onPatchReceived.bind(this);
palindrom.onIncomingPatchValidationError = this.onGenericError.bind(this);
palindrom.onOutgoingPatchValidationError = this.onGenericError.bind(this);
palindrom.onError = this.onGenericError.bind(this);
palindrom.onPatchSent = this.onPatchSent.bind(this);
palindrom.onSocketStateChanged = this.onSocketStateChanged.bind(this);
palindrom.onConnectionError = this.onConnectionError.bind(this);
palindrom.onReconnectionCountdown = this.onReconnectionCountdown.bind(this);
palindrom.onReconnectionEnd = this.onReconnectionEnd.bind(this);
palindrom.onStateReset = obj => {
palindrom.onLocalChange = this.onLocalChange.bind(this);
palindrom.onRemoteChange = this.onPatchApplied.bind(this);
palindrom.onPatchReceived = this.onPatchReceived.bind(this);
palindrom.onIncomingPatchValidationError = this.onGenericError.bind(this);
palindrom.onOutgoingPatchValidationError = this.onGenericError.bind(this);
palindrom.onError = this.onGenericError.bind(this);
palindrom.onPatchSent = this.onPatchSent.bind(this);
palindrom.onSocketStateChanged = this.onSocketStateChanged.bind(this);
palindrom.onConnectionError = this.onConnectionError.bind(this);
palindrom.onReconnectionCountdown = this.onReconnectionCountdown.bind(this);
palindrom.onReconnectionEnd = this.onReconnectionEnd.bind(this);
palindrom.onStateReset = obj => {
this.obj = obj;
if (whereToBind) {
this.bindTo(whereToBind);
}
this.onPatchApplied([{ op: 'replace', path: '', value: obj }], [{ removed: this.obj }])
}
// if already established (re-)set state
if(palindrom.obj){
if (palindrom.obj) {
palindrom.onStateReset(palindrom.obj);
}
}
this.network = palindrom.network;
this.morphUrl = palindrom.morphUrl.bind(palindrom)
}
disconnectedCallback(){
if(this.isUsingOwnInstanceOfPalindrom) {
disconnectedCallback() {
if (this.isUsingOwnInstanceOfPalindrom) {
this.palindrom.unlisten();
// hacky way to stop Palindrom connection
this.palindrom.useWebSocket = false;
Expand Down Expand Up @@ -290,7 +183,7 @@
}

fire(name, detail) {
this.dispatchEvent(new CustomEvent(name, {detail}));
this.dispatchEvent(new CustomEvent(name, { detail }));
}

onPatchReceived(data, url, method) {
Expand Down Expand Up @@ -319,48 +212,18 @@
});
}

updateReconnectionSeconds(seconds) {
for(const span of this.reconnectionSecondsSpans) {
span.textContent = seconds;
}
}
onConnectionError(palindromConnectionError) {
const eventDetail = {
palindromConnectionError,
error: palindromConnectionError,
handled: false
};
this.fire("connectionerror", eventDetail);

if (!eventDetail.handled) {
console.error(palindromConnectionError);

this.errorPane.removeAttribute('hidden');

this.reloadingInMessage.removeAttribute('hidden');

let timeout = this.fatalErrorReloadAfterS;

this.updateReconnectionSeconds(timeout--);

this.reloadingInterval = setInterval(() => {
if(!this.reloadingInterval) {

// to make sure to skip even before interval clears
return;
}
this.updateReconnectionSeconds(timeout);
if (timeout-- <= 0) {
clearInterval(this.reloadingInterval);
this.reload();
}
}, 1000);
}
}


this.fire("connection-error", eventDetail);
}
onGenericError(error) {
this.showGenericError = true;
console.error(error);
const eventDetail = {
error
};
this.fire("generic-error", eventDetail);
}

onReconnectionCountdown(milliseconds) {
Expand All @@ -370,33 +233,20 @@
};

this.fire("reconnection-countdown", eventDetail);

if (!eventDetail.handled) {
this.showReconnectingNow = milliseconds == 0;
this.showReconnectingIn = milliseconds != 0;
this.reconnectionSeconds = milliseconds / 1000;
}
}

onReconnectionEnd() {
const eventDetail = {
handled: false
};
this.fire("reconnection-end", eventDetail);

if (!eventDetail.handled) {
this.showReconnectingNow = false;
this.showReconnectingIn = false;
}
}

onPatchApplied(patches, results) {
this.propagateDomBind({ patches, results });
this.dispatchEvent(new CustomEvent("patch-applied", {
bubbles: true,
cancelable: true,
detail: patches
}));
this.fire("patch-applied", {
patches
});
}

notifyTemplateDomBind(tree, patchesAndResults, templateDomBind, polymerPathPrefix) {
Expand Down Expand Up @@ -515,4 +365,4 @@

})();

</script>
</script>
Loading

0 comments on commit 0335e0f

Please sign in to comment.