From f039fc7ff57fef765b81aaffe38b80f3873d8d1b Mon Sep 17 00:00:00 2001 From: ansuz Date: Wed, 13 Sep 2017 17:43:17 +0200 Subject: [PATCH 01/10] develop a system for avoiding z-index problems --- customize.dist/src/less/cryptpad.less | 12 ++++++------ customize.dist/src/less/loading.less | 4 ++-- customize.dist/src/less/toolbar.less | 6 +++--- customize.dist/src/less2/include/alertify.less | 2 +- customize.dist/src/less2/include/dropdown.less | 2 +- customize.dist/src/less2/include/fileupload.less | 4 ++-- customize.dist/src/less2/include/infopages.less | 2 +- customize.dist/src/less2/include/modal.less | 2 +- customize.dist/src/less2/include/toolbar.less | 6 +++--- www/common/tippy.css | 2 +- 10 files changed, 21 insertions(+), 21 deletions(-) diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index ba763aea0..c67c042c2 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -296,7 +296,7 @@ noscript { left: 0; bottom: 0; right: 0; - z-index: 2; + z-index: 2; // noscriptContainer #noscript { width: 1000px; display: flex; @@ -341,7 +341,7 @@ noscript { left: 0; right: 0; margin: auto; - z-index: 1; + z-index: 1; // #main, #main_other font-size: medium; @@ -607,7 +607,7 @@ noscript { background: blue; position: absolute; left: 0; - z-index:1; + z-index:1; // .usage &.normal { background: @toolbar-green; } @@ -622,7 +622,7 @@ noscript { position: relative; color: black; text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white; - z-index: 2; + z-index: 2; // .usageText font-size: @main-font-size; font-weight: bold; } @@ -644,7 +644,7 @@ noscript { bottom: 10vh; opacity: 0.9; box-sizing: border-box; - z-index: 10000; + z-index: 10000; // #uploadStatusContainer display: none; #uploadStatus { width: 80vw; @@ -674,7 +674,7 @@ noscript { left: @upload_pad_v; top: @upload_pad_h; bottom: @upload_pad_h; background-color: rgba(0,0,255,0.3); - z-index: -1; + z-index: -1; // .progressContainer } .upCancel { text-align: center; } .fa.cancel { diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less index 555b02ad8..6883622a5 100644 --- a/customize.dist/src/less/loading.less +++ b/customize.dist/src/less/loading.less @@ -3,7 +3,7 @@ #loading { position: fixed; - z-index: 9999999; + z-index: 10000000; // #loading top: 0px; bottom: 0px; left: 0px; @@ -35,7 +35,7 @@ } #loadingTip { position: fixed; - z-index: 99999; + z-index: 100000; // loading tip top: 80%; left: 0; right: 0; diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 96f0cbc03..aadc0b6b0 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -259,7 +259,7 @@ body .cryptpad-toolbar { font: @toolbar-button-font; width: 100%; - z-index: 9001; + z-index: 10000; // body, .cryptpad-toolbar .cp-dropdown-container { //height: 100%; @@ -792,7 +792,7 @@ body .cryptpad-toolbar { cursor: pointer; } .cryptpad-user-dropdown { - z-index: 10000; + z-index: 10000; // .cryptpad-user-dropdown //margin-left: 20px; height: 64px; width: 64px; @@ -915,7 +915,7 @@ body .cryptpad-toolbar { background: @dropdown-bg; display: flex; flex-flow: column; - z-index:10000; + z-index:10000; // .drawer-content color: black; .fa { font-size: 17px; diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 8bc53a2a0..e66f92243 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -64,7 +64,7 @@ bottom: 0; width: 100%; height: 100%; - z-index: 99999; // alertify container + z-index: 100000; // alertify container &.forefront { z-index: @max-z-index; // alertify max forefront } diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less index 3a371b6dc..b6a7bcbeb 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -28,7 +28,7 @@ background-color: @colortheme_dropdown-bg; min-width: 250px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); - z-index: 1000; + z-index: 1000; //Z dropdown content max-height: 300px; overflow-y: auto; font: @dropdown_font; diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index 24eb88c1a..bd90ab5d3 100644 --- a/customize.dist/src/less2/include/fileupload.less +++ b/customize.dist/src/less2/include/fileupload.less @@ -10,7 +10,7 @@ bottom: 10vh; opacity: 0.9; box-sizing: border-box; - z-index: 1000000; + z-index: 1000000; //Z file upload table container display: none; #cp-fileupload-table { width: 80vw; @@ -40,7 +40,7 @@ left: @upload_pad_v; top: @upload_pad_h; bottom: @upload_pad_h; background-color: rgba(0,0,255,0.3); - z-index: -1; + z-index: -1; //Z file upload progress container } .cp-fileupload-table-cancel { text-align: center; } .fa.cancel { diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index f37add54f..41bafa6f0 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -117,7 +117,7 @@ .infopages_topbar () { .cp-topbar { background: #fff; - z-index: 9001; + z-index: 10000; //Z infopage toolbar position: fixed; top: 0; display: flex; diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index 9ea75c033..865abff73 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -20,7 +20,7 @@ .cp-modal-container { display: none; - z-index: 100000; + z-index: 100000; //Z modal container position: absolute; top: 0; bottom: 0; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index b928deb18..366d24be4 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -274,7 +274,7 @@ font: @toolbar_button-font; width: 100%; - z-index: 9001; + z-index: 10000; // cp-toolbar .cp-dropdown-container { //height: 100%; @@ -597,7 +597,7 @@ vertical-align: top; } .cp-toolbar-user-dropdown { - z-index: 10000; + z-index: 10000; //Z cp-toolbar-user-dropdown //margin-left: 20px; height: 64px; width: 64px; @@ -737,7 +737,7 @@ background: @colortheme_dropdown-bg; display: flex; flex-flow: column; - z-index:10000; + z-index:10000; //Z cp-toolbar-drawer-content color: black; .fa { font-size: 17px; diff --git a/www/common/tippy.css b/www/common/tippy.css index bb3a28650..819caa330 100644 --- a/www/common/tippy.css +++ b/www/common/tippy.css @@ -1 +1 @@ -.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}} \ No newline at end of file +.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:10000000 !important;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}} From e0ae0fcd9185d28ff9d391aa093fcfad61192ed4 Mon Sep 17 00:00:00 2001 From: ansuz Date: Wed, 13 Sep 2017 17:47:49 +0200 Subject: [PATCH 02/10] thanks Dima! --- customize.dist/translations/messages.fr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 0b32886cd..db0ebbf9f 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -177,7 +177,7 @@ define(function () { out.fileShare = "Copier le lien"; out.getEmbedCode = "Obtenir le code d'intégration"; out.viewEmbedTitle = "Intégrer le pad dans une page web"; - out.viewEmbedTag = "Pour intégrer ce pad, veuillez inclure l'iframe suivant dans votre page là om vous souhaitez l'afficher. Vous pouvez changer sa taille en utilisant du code CSS ou des attributs HTML."; + out.viewEmbedTag = "Pour intégrer ce pad, veuillez inclure l'iframe suivant dans votre page là où vous souhaitez l'afficher. Vous pouvez changer sa taille en utilisant du code CSS ou des attributs HTML."; out.fileEmbedTitle = "Intégrer le fichier dans une page web"; out.fileEmbedScript = "Pour intégrer un fichier, veuillez inclure le script suivant une fois dans votre page afin de pouvoir charger le Media Tag :"; out.fileEmbedTag = "Ensuite vous pouvez placer ce Media Tag où vous souhaitez dans votre page pour l'intégrer :"; From 4d688289cc410c32ed4d12382c693f65d8fbe408 Mon Sep 17 00:00:00 2001 From: ansuz Date: Wed, 13 Sep 2017 18:19:15 +0200 Subject: [PATCH 03/10] lint-compliance --- www/common/LessLoader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 36cb47d49..a4c01c0bf 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -25,7 +25,7 @@ define([ var cacheGet = function (k, cb) { if (window.cryptpadCache) { return void window.cryptpadCache.get(k, cb); } - setTimeout(function () { cb(localStorage['LESS_CACHE|' + key + '|' + k]); }) + setTimeout(function () { cb(localStorage['LESS_CACHE|' + key + '|' + k]); }); }; var cachePut = function (k, v, cb) { if (window.cryptpadCache) { return void window.cryptpadCache.put(k, v, cb); } From 8a32b72ffc19cb6fa8cad786dddd8bad00c34d88 Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Thu, 14 Sep 2017 10:23:05 +0200 Subject: [PATCH 04/10] 1. implement cryptpadCache which has put() and get() functions that can be used like a localStorage that auto-flushes when a new version is released 2. change loading.js to use packaged css in order to get the loading screen up as quick as possible. 3. change LessLoader to cache less in cryptpadCache --- www/common/loading.js | 69 +++++++++++++++++++++++++++++-- www/common/sframe-boot.js | 40 +++++++----------- www/common/sframe-boot2.js | 2 + www/common/sframe-channel.js | 13 +++--- www/common/sframe-common-outer.js | 24 ++++++++++- www/common/sframe-common.js | 13 ++++++ www/common/sframe-protocol.js | 3 ++ 7 files changed, 127 insertions(+), 37 deletions(-) diff --git a/www/common/loading.js b/www/common/loading.js index d9c3b8df9..da327f8f9 100644 --- a/www/common/loading.js +++ b/www/common/loading.js @@ -1,10 +1,73 @@ -define([ - 'less!/customize/src/less/loading.less' -], function () { +define([], function () { + var loadingStyle = (function(){/* + #loading { + position: fixed; + z-index: 9999999; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background: #222; + color: #fafafa; + text-align: center; + font-size: 1.5em; + } + #loading .loadingContainer { + margin-top: 50vh; + transform: translateY(-50%); + } + #loading .cryptofist { + margin-left: auto; + margin-right: auto; + height: 300px; + margin-bottom: 2em; + } + @media screen and (max-height: 450px) { + #loading .cryptofist { + display: none; + } + } + #loading .spinnerContainer { + position: relative; + height: 100px; + } + #loading .spinnerContainer > div { + height: 100px; + } + #loadingTip { + position: fixed; + z-index: 99999; + top: 80%; + left: 0; + right: 0; + text-align: center; + transition: opacity 750ms; + transition-delay: 3000ms; + } + @media screen and (max-height: 600px) { + #loadingTip { + display: none; + } + } + #loadingTip span { + background-color: #222; + color: #fafafa; + text-align: center; + font-size: 1.5em; + opacity: 0.7; + font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + padding: 15px; + max-width: 60%; + display: inline-block; + }*/ + }).toString().slice(14, -3); var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; }); var elem = document.createElement('div'); elem.setAttribute('id', 'loading'); elem.innerHTML = [ + '', '
', '', '
', diff --git a/www/common/sframe-boot.js b/www/common/sframe-boot.js index 4489db89f..f2fcadc37 100644 --- a/www/common/sframe-boot.js +++ b/www/common/sframe-boot.js @@ -6,32 +6,6 @@ // sed -i -e 's@/common/sframe-boot.js?ver=[^"]*@/common/sframe-boot.js?ver=1.3@' $x; done ;(function () { var afterLoaded = function (req) { - var localStorage = {}; - if (req.cfg && req.cfg.urlArgs) { - try { - localStorage = window.localStorage; - if (localStorage['CRYPTPAD_VERSION'] !== req.cfg.urlArgs) { - // new version, flush - Object.keys(localStorage).forEach(function (k) { - if (!k.indexOf('CRYPTPAD_CACHE_')) { delete localStorage[k]; } - }); - localStorage['CRYPTPAD_VERSION'] = req.cfg.urlArgs; - } - } catch (e) { - console.error(e); - localStorage = {}; - } - } - window.cryptpadCache = Object.freeze({ - put: function (k, v, cb) { - cb = cb || function () { }; - setTimeout(function () { localStorage['CRYPTPAD_CACHE_' + k] = v; cb(); }); - }, - get: function (k, cb) { - if (!cb) { throw new Error(); } - setTimeout(function () { cb(localStorage['CRYPTPAD_CACHE_' + k]); }); - } - }); req.cfg = req.cfg || {}; if (req.pfx) { req.cfg.onNodeCreated = function (node /*, config, module, path*/) { @@ -54,6 +28,20 @@ var afterLoaded = function (req) { clearInterval(intr); txid = {}; window.removeEventListener('message', onReply); + data.cache = data.cache || {}; + var updated = {}; + window.cryptpadCache = { + get: function (k, cb) { + setTimeout(function () { cb(data.cache[k]); }); + }, + put: function (k, v, cb) { + cb = cb || function () { }; + updated[k] = v; + setTimeout(function () { data.cache[k] = v; cb(); }); + }, + updated: updated, + cache: data.cache + }; require(['/common/sframe-boot2.js'], function () { }); }; window.addEventListener('message', onReply); diff --git a/www/common/sframe-boot2.js b/www/common/sframe-boot2.js index e6845bcbe..dd0370ca8 100644 --- a/www/common/sframe-boot2.js +++ b/www/common/sframe-boot2.js @@ -20,5 +20,7 @@ define(['/common/requireconfig.js'], function (RequireConfig) { window.__defineGetter__('localStorage', function () { return mkFakeStore(); }); window.__defineGetter__('sessionStorage', function () { return mkFakeStore(); }); + window.CRYPTPAD_INSIDE = true; + require([document.querySelector('script[data-bootload]').getAttribute('data-bootload')]); }); diff --git a/www/common/sframe-channel.js b/www/common/sframe-channel.js index 300491e1f..a091452c3 100644 --- a/www/common/sframe-channel.js +++ b/www/common/sframe-channel.js @@ -8,7 +8,7 @@ define([ return Math.random().toString(16).replace('0.', '') + Math.random().toString(16).replace('0.', ''); }; - var create = function (ow, cb, isSandbox) { + var create = function (ow, cb, isSandbox, sendData) { var otherWindow; var evReady = Util.mkEvent(true); var handlers = {}; @@ -47,7 +47,6 @@ define([ // Fire an event. channel.event('EV_SOMETHING', { args: "whatever" }); var event = chan.event = function (e, content) { - if (!otherWindow) { throw new Error('not yet initialized'); } if (!SFrameProtocol[e]) { throw new Error('please only fire events that are defined in sframe-protocol.js'); } @@ -63,7 +62,6 @@ define([ // If the type is a query, your handler will be invoked with a reply function that takes // one argument (the content to reply with). chan.on = function (queryType, handler, quiet) { - if (!otherWindow && !quiet) { throw new Error('not yet initialized'); } if (!SFrameProtocol[queryType]) { throw new Error('please only register handlers which are defined in sframe-protocol.js'); } @@ -85,7 +83,6 @@ define([ // when that handler is first registered. // channel.whenReg('Q_SOMETHING', function () { ...query Q_SOMETHING?... }); chan.whenReg = function (queryType, cb, always) { - if (!otherWindow) { throw new Error('not yet initialized'); } if (!SFrameProtocol[queryType]) { throw new Error('please only register handlers which are defined in sframe-protocol.js'); } @@ -109,7 +106,8 @@ define([ delete callWhenRegistered[content]; } insideHandlers.push(content); - }, true); + }); + chan.whenReg('EV_REGISTER_HANDLER', evReady.fire); // Make sure both iframes are ready chan.onReady = function (h) { @@ -131,8 +129,9 @@ define([ //console.log(msg); } else if (!otherWindow) { otherWindow = ow; - evReady.fire(); - ow.postMessage(JSON.stringify({ txid: data.txid }), '*'); + sendData = sendData || {}; + sendData.txid = data.txid; + ow.postMessage(JSON.stringify(sendData), '*'); cb(chan); } else if (typeof(data.q) === 'string' && handlers[data.q]) { handlers[data.q].forEach(function (f) { diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js index 32143cb8f..00bd0e0ea 100644 --- a/www/common/sframe-common-outer.js +++ b/www/common/sframe-common-outer.js @@ -34,12 +34,34 @@ define([ Crypto = _Crypto; Cryptget = _Cryptget; FilePicker = _FilePicker; + + if (localStorage.CRYPTPAD_URLARGS !== ApiConfig.requireConf.urlArgs) { + console.log("New version, flushing cache"); + Object.keys(localStorage).forEach(function (k) { + if (k.indexOf('CRYPTPAD_CACHE|') !== 0) { return; } + delete localStorage[k]; + }); + localStorage.CRYPTPAD_URLARGS = ApiConfig.requireConf.urlArgs; + } + var cache = {}; + Object.keys(localStorage).forEach(function (k) { + if (k.indexOf('CRYPTPAD_CACHE|') !== 0) { return; } + cache[k.slice(('CRYPTPAD_CACHE|').length)] = localStorage[k]; + }); + SFrameChannel.create($('#sbox-iframe')[0].contentWindow, waitFor(function (sfc) { sframeChan = sfc; - })); + }), false, { cache: cache }); Cryptpad.ready(waitFor()); })); }).nThen(function (waitFor) { + + sframeChan.on('EV_CACHE_PUT', function (x) { + Object.keys(x).forEach(function (k) { + localStorage['CRYPTPAD_CACHE|' + k] = x[k]; + }); + }); + secret = Cryptpad.getSecrets(); if (!secret.channel) { // New pad: create a new random channel id diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 5fd99d3d5..cf278dd1c 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -259,6 +259,19 @@ define([ }).nThen(function () { ctx.metadataMgr = MetadataMgr.create(ctx.sframeChan); + ctx.sframeChan.whenReg('EV_CACHE_PUT', function () { + if (Object.keys(window.cryptpadCache.updated).length) { + ctx.sframeChan.event('EV_CACHE_PUT', window.cryptpadCache.updated); + } + window.cryptpadCache._put = window.cryptpadCache.put; + window.cryptpadCache.put = function (k, v, cb) { + window.cryptpadCache._put(k, v, cb); + var x = {}; + x[k] = v; + ctx.sframeChan.event('EV_CACHE_PUT', x); + }; + }); + UI.addTooltips(); ctx.sframeChan.on('EV_RT_CONNECT', function () { CommonRealtime.setConnectionState(true); }); diff --git a/www/common/sframe-protocol.js b/www/common/sframe-protocol.js index 1be9d7476..cab662df0 100644 --- a/www/common/sframe-protocol.js +++ b/www/common/sframe-protocol.js @@ -127,4 +127,7 @@ define({ // Present mode URL 'Q_PRESENT_URL_GET_VALUE': true, 'EV_PRESENT_URL_SET_VALUE': true, + + // Put one or more entries to the cache which will go in localStorage. + 'EV_CACHE_PUT': true, }); From 845f75f8a7dc054628aefd70be422d19421f7d51 Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Thu, 14 Sep 2017 10:48:59 +0200 Subject: [PATCH 05/10] remove a 100ms dead spot from page load --- www/common/sframe-boot.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/www/common/sframe-boot.js b/www/common/sframe-boot.js index f2fcadc37..8510e88a0 100644 --- a/www/common/sframe-boot.js +++ b/www/common/sframe-boot.js @@ -47,12 +47,15 @@ var afterLoaded = function (req) { window.addEventListener('message', onReply); }; -var intr = setInterval(function () { +var load0 = function () { try { var req = JSON.parse(decodeURIComponent(window.location.hash.substring(1))); - clearInterval(intr); afterLoaded(req); - } catch (e) { console.error(e); } -}, 100); + } catch (e) { + console.error(e); + setTimeout(load0, 100); + } +}; +load0(); }()); From 5f0383ae990a102ec5251e9861cd454b88891744 Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Thu, 14 Sep 2017 10:52:25 +0200 Subject: [PATCH 06/10] update version of sframe-boot because it was changed --- www/code/inner.html | 2 +- www/file/inner.html | 2 +- www/filepicker/inner.html | 2 +- www/pad/inner.html | 2 +- www/slide/inner.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/www/code/inner.html b/www/code/inner.html index 80d1cb707..485e06455 100644 --- a/www/code/inner.html +++ b/www/code/inner.html @@ -2,7 +2,7 @@ - +