diff --git a/.idea/wordRotator.iml b/.idea/wordRotator.iml index bf3febf..649fc88 100755 --- a/.idea/wordRotator.iml +++ b/.idea/wordRotator.iml @@ -3,6 +3,7 @@ + diff --git a/log/error.log b/log/error.log index 4a0e922..34fe562 100755 --- a/log/error.log +++ b/log/error.log @@ -4,3 +4,31 @@ 2018-09-18T22:37:14+02:00 ERR (3): 2018-09-18T22:37:16+02:00 ERR (3): 2018-09-18T23:03:24+02:00 ERR (3): +2018-09-19T11:15:04+02:00 ERR (3): +2018-09-19T11:15:57+02:00 ERR (3): +2018-09-19T11:16:35+02:00 ERR (3): +2018-09-19T11:25:57+02:00 ERR (3): +2018-09-19T11:35:29+02:00 ERR (3): +2018-09-19T11:37:15+02:00 ERR (3): +2018-09-19T11:38:07+02:00 ERR (3): +2018-09-19T11:38:16+02:00 ERR (3): +2018-09-19T11:40:46+02:00 ERR (3): +2018-09-19T11:42:24+02:00 ERR (3): +2018-09-19T11:49:07+02:00 ERR (3): +2018-09-19T11:53:54+02:00 ERR (3): +2018-09-19T11:54:03+02:00 ERR (3): +2018-09-19T11:54:27+02:00 ERR (3): +2018-09-19T11:54:49+02:00 ERR (3): +2018-09-19T11:57:42+02:00 ERR (3): +2018-09-19T11:58:10+02:00 ERR (3): +2018-09-19T12:01:11+02:00 ERR (3): +2018-09-19T12:01:29+02:00 ERR (3): +2018-09-19T12:03:50+02:00 ERR (3): +2018-09-19T12:04:14+02:00 ERR (3): +2018-09-19T12:04:36+02:00 ERR (3): +2018-09-19T12:06:07+02:00 ERR (3): +2018-09-19T12:06:42+02:00 ERR (3): +2018-09-19T12:06:49+02:00 ERR (3): +2018-09-19T12:21:19+02:00 ERR (3): +2018-09-19T12:21:44+02:00 ERR (3): +2018-09-19T12:21:59+02:00 ERR (3): diff --git a/log/log.log b/log/log.log index 4a0e922..34fe562 100755 --- a/log/log.log +++ b/log/log.log @@ -4,3 +4,31 @@ 2018-09-18T22:37:14+02:00 ERR (3): 2018-09-18T22:37:16+02:00 ERR (3): 2018-09-18T23:03:24+02:00 ERR (3): +2018-09-19T11:15:04+02:00 ERR (3): +2018-09-19T11:15:57+02:00 ERR (3): +2018-09-19T11:16:35+02:00 ERR (3): +2018-09-19T11:25:57+02:00 ERR (3): +2018-09-19T11:35:29+02:00 ERR (3): +2018-09-19T11:37:15+02:00 ERR (3): +2018-09-19T11:38:07+02:00 ERR (3): +2018-09-19T11:38:16+02:00 ERR (3): +2018-09-19T11:40:46+02:00 ERR (3): +2018-09-19T11:42:24+02:00 ERR (3): +2018-09-19T11:49:07+02:00 ERR (3): +2018-09-19T11:53:54+02:00 ERR (3): +2018-09-19T11:54:03+02:00 ERR (3): +2018-09-19T11:54:27+02:00 ERR (3): +2018-09-19T11:54:49+02:00 ERR (3): +2018-09-19T11:57:42+02:00 ERR (3): +2018-09-19T11:58:10+02:00 ERR (3): +2018-09-19T12:01:11+02:00 ERR (3): +2018-09-19T12:01:29+02:00 ERR (3): +2018-09-19T12:03:50+02:00 ERR (3): +2018-09-19T12:04:14+02:00 ERR (3): +2018-09-19T12:04:36+02:00 ERR (3): +2018-09-19T12:06:07+02:00 ERR (3): +2018-09-19T12:06:42+02:00 ERR (3): +2018-09-19T12:06:49+02:00 ERR (3): +2018-09-19T12:21:19+02:00 ERR (3): +2018-09-19T12:21:44+02:00 ERR (3): +2018-09-19T12:21:59+02:00 ERR (3): diff --git a/public/css/wordRotator.css b/public/css/wordRotator.css index 9933edc..8d6f8d3 100755 --- a/public/css/wordRotator.css +++ b/public/css/wordRotator.css @@ -1 +1 @@ -.height-10{height:10%}.width-10{width:10%}.height-20{height:20%}.width-20{width:20%}.height-30{height:30%}.width-30{width:30%}.height-40{height:40%}.width-40{width:40%}.height-50{height:50%}.width-50{width:50%}.height-60{height:60%}.width-60{width:60%}.height-70{height:70%}.width-70{width:70%}.height-80{height:80%}.width-80{width:80%}.height-90{height:90%}.width-90{width:90%}.height-100{height:100%}.width-100{width:100%}@-webkit-keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@-webkit-keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.segment:not(.segment-row):not(.segment-triangle).rotating{z-index:10!important;overflow:hidden}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180,.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}#level{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;max-width:100%;-webkit-tap-highlight-color:rgba(255,255,255,0);overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{vertical-align:top;white-space:normal;cursor:pointer;display:inline-block;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1;background-color:#fff;line-height:0}.segment.segment-row{display:block;width:100%;-webkit-animation:none!important;animation:none!important;white-space:nowrap}.segment.segment-leaf{background-color:transparent;min-width:1em;padding:.8em}.segment.segment-leaf:before{content:" ";display:block;padding-top:100%}.segment.segment-leaf .leaf-element{position:absolute;width:100%;height:100%;line-height:1.5em;top:0;left:0}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px;padding:1px}.segment.segment-parent.layer-2{border:3px solid #000}.show-when-won{visibility:hidden}.show-when-won,.show-when-won *{-webkit-transition:none;transition:none}.won .show-when-won{visibility:initial}#level-number-container{-webkit-transition:none;transition:none;position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);border:3px solid #fff;border-radius:50%;visibility:hidden;margin-top:-5px;display:table-cell;height:45px;width:45px;text-align:center;vertical-align:middle}#level-number-container.visible{visibility:visible}#level-number-container #level-number{-webkit-transition:none;transition:none;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700} \ No newline at end of file +.height-10{height:10%}.width-10{width:10%}.height-20{height:20%}.width-20{width:20%}.height-30{height:30%}.width-30{width:30%}.height-40{height:40%}.width-40{width:40%}.height-50{height:50%}.width-50{width:50%}.height-60{height:60%}.width-60{width:60%}.height-70{height:70%}.width-70{width:70%}.height-80{height:80%}.width-80{width:80%}.height-90{height:90%}.width-90{width:90%}.height-100{height:100%}.width-100{width:100%}@-webkit-keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@-webkit-keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.segment:not(.segment-row):not(.segment-triangle).rotating{z-index:10!important;overflow:hidden}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180,.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}#level{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;max-width:100%;-webkit-tap-highlight-color:rgba(255,255,255,0);overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{vertical-align:top;white-space:normal;cursor:pointer;display:inline-block;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1;background-color:#fff;line-height:0}.segment.segment-row{display:block;width:100%;-webkit-animation:none!important;animation:none!important;white-space:nowrap}.segment.segment-leaf{background-color:transparent;min-width:1em;padding:.8em}.segment.segment-leaf:before{content:" ";display:block;padding-top:100%}.segment.segment-leaf .leaf-element{position:absolute;width:100%;height:100%;line-height:1.5em;top:0;left:0}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px;padding:1px}.segment.segment-parent.layer-2{border:3px solid #000}.show-when-won{visibility:hidden}.show-when-won,.show-when-won *{-webkit-transition:none;transition:none}.won .show-when-won{visibility:initial}#level-number-container{-webkit-transition:none;transition:none;position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);border:3px solid #fff;border-radius:50%;visibility:hidden;margin-top:-3px;display:table-cell;height:40px;width:40px;text-align:center;vertical-align:middle}#level-number-container.visible{visibility:visible}#level-number-container #level-number{-webkit-transition:none;transition:none;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700} \ No newline at end of file diff --git a/public/html/application/fragment/settings.html b/public/html/application/fragment/settings.html new file mode 100644 index 0000000..e473039 --- /dev/null +++ b/public/html/application/fragment/settings.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/public/html/application/setting-template.html b/public/html/application/setting-template.html new file mode 100644 index 0000000..505cee3 --- /dev/null +++ b/public/html/application/setting-template.html @@ -0,0 +1 @@ +

\ No newline at end of file diff --git a/public/img/settings.png b/public/img/settings.png new file mode 100644 index 0000000..6c4900b Binary files /dev/null and b/public/img/settings.png differ diff --git a/public/js/app.js b/public/js/app.js index 1bd54a9..5c5e678 100755 --- a/public/js/app.js +++ b/public/js/app.js @@ -2850,6 +2850,21 @@ class MyDb { }); } + removeAll(objectStore){ + return new Promise((resolve) => { + this.openStore(objectStore, "readwrite", (store) => { + let req = store.clear(); + req.onerror = (e) => { + throw { + "type":"indexed-db-index-error", + "event": e + } + }; + req.onsuccess = resolve; + }); + }) + } + upgrade(db) { }; } @@ -3621,6 +3636,66 @@ class SettingsManager { SettingsManager._instance = null; +class LocalStorageSettingsFragment extends Fragment { + onFirstStart() { + let res = super.onFirstStart(); + let settings = this.findBy(".setting", true); + const settingsManager = SettingsManager.getInstance(); + + for (let i = 0; i < settings.length; i++) { + let setting = settings[i]; + const name = setting.name; + let value = settingsManager.getSetting(name); + + let isCheckable = false; + if (setting instanceof HTMLInputElement && (setting.type === 'checkbox' || setting.type === 'radio')) { + isCheckable = true; + } + if (!settingsManager.hasSetting(name) && Helper.isNotNull(settings[i]["dataset"]["default"])) { + value = setting["dataset"]["default"]; + if (Helper.isNotNull(setting["dataset"]["defaultTranslateable"])) { + + setting["dataset"]["translation"] = ""; + setting["dataset"]["translationValue"] = value; + value = Translator.translate(value); + } + } + + if (Helper.isNotNull(value)) { + if (isCheckable) { + setting.checked = (value === setting.value); + } + else { + setting.value = value; + } + if (value !== "") { + setting.classList.add("notEmpty"); + } + } + + setting.addEventListener("change", function () { + let value = this.value; + if (isCheckable) { + if (this.checked) + { + settingsManager.setSetting(name, value); + } + else + { + settingsManager.setSetting(name, null); + } + } + else { + settingsManager.setSetting(name, value); + } + delete setting["dataset"]["translationValue"]; + delete setting["dataset"]["translation"]; + }); + } + return res; + } +} + class SmartColumn{ constructor(name, label, translateable){ this._name = name; @@ -3889,7 +3964,7 @@ class ListHelper { class SettingsSite extends AbstractSite { constructor(siteManager) { - super(siteManager, 'core/html/settings.html', "settings"); + super(siteManager, SettingsSite.template, "settings"); for (let k in SettingsSite.settingsFragments) { this.addSettingsFragment(k, new SettingsSite.settingsFragments[k](this)); } @@ -3958,139 +4033,33 @@ class SettingsSite extends AbstractSite { static setAddSettingsSite(addLink) { SettingsSite.shouldAddSettingsSite = addLink; } + + static setTemplate(template) { + SettingsSite.template = template; + } } +SettingsSite.template = 'core/html/settings.html'; SettingsSite.settingsFragments = {}; SettingsSite.shouldAddSettingsSite = true; +SettingsSite.settingsAction = null; +SettingsSite.shouldAddSettingsAction = true; InitPromise.addPromise(function (app) { if (SettingsSite.shouldAddSettingsSite) { app.addDeepLink("settings", SettingsSite); - let settingsAction = new MenuAction("settings", function () { - app.startSite(SettingsSite); - }, MenuAction.SHOW_FOR_LARGE, 10000); - settingsAction.setIcon("img/settings.png"); - app.addDefaultAction(settingsAction); - } -}); - -class ScaleHelper { - scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, addListener) { - - margin = Helper.nonNull(margin, 10); - ignoreHeight = Helper.nonNull(ignoreHeight, false); - ignoreWidth = Helper.nonNull(ignoreWidth, false); - fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length); - addListener = Helper.nonNull(addListener, true); - - let hasNoTransitionClass = container.classList.contains("no-transition"); - container.classList.add("no-transition"); - - let currentFontSize = 1; - let diff = 0; - let widthDiff = 0; - let heightDiff = 0; - let containerWidth = 0; - let containerHeight = 0; - do { - currentFontSize += diff / (fontWeight + 1); - fontElement.style.fontSize = currentFontSize + 'px'; - - let containerStyle = window.getComputedStyle(container); - - containerWidth = containerStyle.getPropertyValue("width").replace('px', ''); - containerHeight = containerStyle.getPropertyValue("height").replace('px', ''); - - widthDiff = containerWidth - fontElement.offsetWidth; - heightDiff = containerHeight - fontElement.offsetHeight; - - let newDiff = (ignoreWidth ? heightDiff : (ignoreHeight ? widthDiff : Math.min(widthDiff, heightDiff))); - if (newDiff === diff) { - break; - } - diff = newDiff; - } while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight)); - fontElement.style.fontSize = (currentFontSize - margin) + 'px'; - - if (!hasNoTransitionClass) { - container.classList.remove("no-transition"); + if (Helper.isNull(SettingsSite.settingsAction)) { + let settingsAction = new MenuAction("settings", function () { + app.startSite(SettingsSite); + }, MenuAction.SHOW_FOR_LARGE, 10000); + settingsAction.setIcon("img/settings.png"); + SettingsSite.settingsAction = settingsAction; } - - let self = this; - let listener = function () { - setTimeout(() => { - self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, false); - }, 255); - }; - if (addListener) { - window.addEventListener("resize", listener); - } - return listener; - } - - scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) { - return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight); - } -} - -class Code { - constructor(args) { - if (typeof args === "string") { - args = { - "code": args - }; - } - this.args = args; - this.isCacheable = false; - } - - setIsCacheable(isCacheable) { - this.isCacheable = isCacheable; - } - - getIsCacheable() { - return this.isCacheable; - } - - activate() { - return DataManager.send("c/code", this.args); - } -} - -class CodeSite extends AbstractSite { - constructor(siteManager) { - super(siteManager, "core/html/load.html", "code"); - } - - onConstruct(args) { - super.onConstruct(args); - console.log(args); - - let resPromise = Promise.resolve(); - if (Helper.isNotNull(args["code"])) { - let code = args["code"]; - let isCachable = Helper.nonNull(args["cachable"], false); - - let codeObject = new Code(code); - codeObject.setIsCacheable(isCachable); - - let self = this; - resPromise = codeObject.activate().then(function (res) { - if (!res["success"]) { - FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate(res["errors"][0])); - } - else { - FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate(Helper.nonNull(res["result"]["successMessage"], "code-activated"))); - } - self.finish(); - }); + if (SettingsSite.shouldAddSettingsAction) { + app.addDefaultAction(SettingsSite.settingsAction); } } -} - -InitPromise.addPromise(function (app) { - app.addDeepLink("code", CodeSite); }); class UserManager { @@ -4499,34 +4468,51 @@ InitPromise.addPromise(function(app){ app.addDeepLink("forgotPassword", ForgotPasswordSite); }); -class LoginSite extends UserSite{ +class LoginSite extends UserSite { constructor(siteManager) { super(siteManager, 'userManagement/html/login.html', "login", "offline"); } onFirstStart() { let self = this; - (new LoginForm(document.getElementById("login-form"), "u/login", "post")).onSubmit(function(res){ + (new LoginForm(document.getElementById("login-form"), "u/login", "post")).onSubmit(function (res) { UserManager.setData(res); self.startStartsite(); FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate("login-success")); self.finish(); }); - this.findBy("#forgot-password-link").addEventListener("click", function(){ + this.findBy("#forgot-password-link").addEventListener("click", function () { self.startSite(ForgotPasswordSite); self.finish(); }); } } -InitPromise.addPromise(function(app){ + +LoginSite.loginAction = null; +LoginSite.logoutAction = null; +LoginSite.addLoginAction = true; +LoginSite.addLogoutAction = true; + +InitPromise.addPromise(function (app) { app.addDeepLink("login", LoginSite); - app.addDefaultAction(new UserAction('login', function(){ - app.startSite(LoginSite); - }, Menu.SHOW_NEVER, 1100, "offline")); - app.addDefaultAction(new UserAction('logout', function(){ - UserManager.logOut(); - }, Menu.SHOW_NEVER, 1100, "online")); + + if (Helper.isNull(LoginSite.loginAction)) { + LoginSite.loginAction = new UserAction('login', function () { + app.startSite(LoginSite); + }, Menu.SHOW_NEVER, 1100, "offline"); + } + if (Helper.isNull(LoginSite.logoutAction)) { + LoginSite.logoutAction = new UserAction('logout', function () { + UserManager.logOut(); + }, Menu.SHOW_NEVER, 1100, "online"); + } + if (LoginSite.addLoginAction){ + app.addDefaultAction(LoginSite.loginAction); + } + if (LoginSite.addLogoutAction){ + app.addDefaultAction(LoginSite.logoutAction); + } }); class RegistrationSite extends UserSite { @@ -4535,17 +4521,26 @@ class RegistrationSite extends UserSite { } onFirstStart() { - (new RegistrationForm(document.getElementById("registration-form"), "u/registration", "post")).onSubmit(function(res){ + (new RegistrationForm(document.getElementById("registration-form"), "u/registration", "post")).onSubmit(function (res) { FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate("registration-success")); }); } } +RegistrationSite.action = null; +RegistrationSite.addAction = true; + InitPromise.addPromise(function (app) { app.addDeepLink("registration", RegistrationSite); - app.addDefaultAction(new UserAction('registration', function(){ - app.startSite(RegistrationSite); - }, null, 1100, "offline")); + + if (Helper.isNull(RegistrationSite.action)) { + RegistrationSite.action = new UserAction('registration', function () { + app.startSite(RegistrationSite); + }, null, 1100, "offline"); + } + if (RegistrationSite.addAction) { + app.addDefaultAction(RegistrationSite.action); + } }); class SetNewPasswordSite extends UserSite { @@ -4574,15 +4569,193 @@ InitPromise.addPromise(function(app){ app.addDeepLink("newPassword", SetNewPasswordSite); }); -let basePath = "/pwa/wordRotator/public/"; -if (window.location.pathname.endsWith("publicTest/")) -{ - basePath = "/pwa/wordRotator/publicTest/"; +class ScaleHelper { + scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, addListener) { + + margin = Helper.nonNull(margin, 10); + ignoreHeight = Helper.nonNull(ignoreHeight, false); + ignoreWidth = Helper.nonNull(ignoreWidth, false); + fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length); + addListener = Helper.nonNull(addListener, true); + + let hasNoTransitionClass = container.classList.contains("no-transition"); + container.classList.add("no-transition"); + + let currentFontSize = 1; + let diff = 0; + let widthDiff = 0; + let heightDiff = 0; + let containerWidth = 0; + let containerHeight = 0; + do { + currentFontSize += diff / (fontWeight + 1); + fontElement.style.fontSize = currentFontSize + 'px'; + + let containerStyle = window.getComputedStyle(container); + + containerWidth = containerStyle.getPropertyValue("width").replace('px', ''); + containerHeight = containerStyle.getPropertyValue("height").replace('px', ''); + + widthDiff = containerWidth - fontElement.offsetWidth; + heightDiff = containerHeight - fontElement.offsetHeight; + + let newDiff = (ignoreWidth ? heightDiff : (ignoreHeight ? widthDiff : Math.min(widthDiff, heightDiff))); + if (newDiff === diff) { + break; + } + diff = newDiff; + } while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight)); + fontElement.style.fontSize = (currentFontSize - margin) + 'px'; + + if (!hasNoTransitionClass) { + container.classList.remove("no-transition"); + } + + let self = this; + let listener = function () { + setTimeout(() => { + self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, false); + }, 255); + }; + if (addListener) { + window.addEventListener("resize", listener); + } + return listener; + } + + scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) { + return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight); + } } -SystemSettings.setBasePath(basePath); -Translator.supportedLanguages = ["de", "en"]; -Translator.markTranslations = false; +class Code { + constructor(args) { + if (typeof args === "string") { + args = { + "code": args + }; + } + this.args = args; + this.isCacheable = false; + } + + setIsCacheable(isCacheable) { + this.isCacheable = isCacheable; + } + + getIsCacheable() { + return this.isCacheable; + } + + activate() { + return DataManager.send("c/code", this.args); + } +} + +class CodeSite extends AbstractSite { + constructor(siteManager) { + super(siteManager, "core/html/load.html", "code"); + } + + onConstruct(args) { + super.onConstruct(args); + console.log(args); + + let resPromise = Promise.resolve(); + if (Helper.isNotNull(args["code"])) { + let code = args["code"]; + let isCachable = Helper.nonNull(args["cachable"], false); + + let codeObject = new Code(code); + codeObject.setIsCacheable(isCachable); + + let self = this; + resPromise = codeObject.activate().then(function (res) { + if (!res["success"]) { + FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate(res["errors"][0])); + } + else { + FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate(Helper.nonNull(res["result"]["successMessage"], "code-activated"))); + } + self.finish(); + }); + } + } +} + +InitPromise.addPromise(function (app) { + app.addDeepLink("code", CodeSite); +}); + +class WordRotatorDb extends MyDb { + + static getInstance() { + if (Helper.isNull(WordRotatorDb.instance)) { + WordRotatorDb.instance = new WordRotatorDb(); + } + return WordRotatorDb.instance; + } + + constructor() { + super("wordRotator", 3); + } + + upgrade(db, oldVersion, newVersion, e) { + if (Helper.isNull(oldVersion) || oldVersion < 1 && newVersion >= 1) { + let levelObjectStore = db.createObjectStore(WordRotatorDb.OBJECT_STORE.LEVEL, {"keyPath": "id"}); + } + if (Helper.isNull(oldVersion) || oldVersion < 2 && newVersion >= 2) { + let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL); + levelObjectStore.createIndex("played", ["deleted", "played", "difficulty", "id"], {"unique": false}); + } + if (Helper.isNull(oldVersion) || oldVersion < 3 && newVersion >= 3) { + let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL); + levelObjectStore.createIndex("difficulty", "difficulty", {"unique": false}); + } + }; + + async saveManyLevels(levels) { + return this.saveMany(levels, WordRotatorDb.OBJECT_STORE.LEVEL); + } + + async loadLevel(levelId) { + return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL); + } + + async loadNextLevel(rendererTypes) { + const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL); + + let wrongLevels = []; + let newLevels = []; + let difficulty = -1; + for (let i = 0, n = levels.length; i < n; i++) { + if ((difficulty < 0 || difficulty === levels[i]["difficulty"]) && !levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) { + newLevels.push(levels[i]); + difficulty = levels[i]["difficulty"]; + } + else if (levels[i]["difficulty"] !== 0 && !levels[i]["deleted"] && !levels[i]["played"] ) { + wrongLevels.push(levels[i]); + } + } + + if (newLevels.length === 0) { + return null; + } + + return newLevels[Math.round(Math.random() * newLevels.length) % newLevels.length]; + } + + async saveLevelPlayed(levelId) { + const level = await this.loadLevel(levelId); + level.played = true; + return await this.saveObj(level, WordRotatorDb.OBJECT_STORE.LEVEL); + } +} + +WordRotatorDb.OBJECT_STORE = { + LEVEL: "level", +}; +WordRotatorDb.instance = null; class Segment{ constructor(element){ @@ -5299,88 +5472,18 @@ LevelHelper.types = { 160: FourWordsLevel12, }; -class WordRotatorDb extends MyDb { - - static getInstance() { - if (Helper.isNull(WordRotatorDb.instance)) { - WordRotatorDb.instance = new WordRotatorDb(); - } - return WordRotatorDb.instance; - } - - constructor() { - super("wordRotator", 3); - } - - upgrade(db, oldVersion, newVersion, e) { - if (Helper.isNull(oldVersion) || oldVersion < 1 && newVersion >= 1) { - let levelObjectStore = db.createObjectStore(WordRotatorDb.OBJECT_STORE.LEVEL, {"keyPath": "id"}); - } - if (Helper.isNull(oldVersion) || oldVersion < 2 && newVersion >= 2) { - let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL); - levelObjectStore.createIndex("played", ["deleted", "played", "difficulty", "id"], {"unique": false}); - } - if (Helper.isNull(oldVersion) || oldVersion < 3 && newVersion >= 3) { - let levelObjectStore = e.target.transaction.objectStore(WordRotatorDb.OBJECT_STORE.LEVEL); - levelObjectStore.createIndex("difficulty", "difficulty", {"unique": false}); - } - }; - - async saveManyLevels(levels) { - return this.saveMany(levels, WordRotatorDb.OBJECT_STORE.LEVEL); - } - - async loadLevel(levelId) { - return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL); - } - - async loadNextLevel(rendererTypes) { - const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL); - - let wrongLevels = []; - let newLevels = []; - let difficulty = -1; - for (let i = 0, n = levels.length; i < n; i++) { - if ((difficulty < 0 || difficulty === levels[i]["difficulty"]) && !levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) { - newLevels.push(levels[i]); - difficulty = levels[i]["difficulty"]; - } - else if (levels[i]["difficulty"] !== 0 && !levels[i]["deleted"] && !levels[i]["played"] ) { - wrongLevels.push(levels[i]); - } - } - - if (newLevels.length === 0) { - return null; - } - - return newLevels[Math.round(Math.random() * newLevels.length) % newLevels.length]; - } - - async saveLevelPlayed(levelId) { - const level = await this.loadLevel(levelId); - level.played = true; - return await this.saveObj(level, WordRotatorDb.OBJECT_STORE.LEVEL); - } -} - -WordRotatorDb.OBJECT_STORE = { - LEVEL: "level", -}; -WordRotatorDb.instance = null; - class WordRotatorBaseSite extends AbstractSite { - - createActionBarMenu(menu) { - menu = super.createActionBarMenu(menu); - let actions = menu.actions; - for (let i = 0; i < actions.length; i++) { - if (actions[i].title === "login" || actions[i].title === "registration"){ - actions[i].setVisible(false); - } - } - return menu; - } + // createActionBarMenu(menu) { + // menu = super.createActionBarMenu(menu); + // // menu.addAction(SettingsSite.settingsAction.copy()); + // // let actions = menu.actions; + // // for (let i = 0; i < actions.length; i++) { + // // if (actions[i].title === "login" || actions[i].title === "registration"){ + // // actions[i].setVisible(false); + // // } + // // } + // return menu; + // } } class EndSite extends WordRotatorBaseSite{ @@ -5392,6 +5495,7 @@ class EndSite extends WordRotatorBaseSite{ class LevelSite extends WordRotatorBaseSite { constructor(siteManager) { super(siteManager, "html/application/level.html"); + this.levelScaler = ()=>{}; } onConstruct(args) { @@ -5468,7 +5572,7 @@ class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); this.level = level; return; @@ -5505,7 +5609,7 @@ class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); this.level = level; this.levelCounterAction.innerText = this.levelCounter; @@ -5518,8 +5622,10 @@ class LevelSite extends WordRotatorBaseSite { onStart(args) { let res = super.onStart(args); + this.levelCounterAction.innerText = this.levelCounter; this.levelCounterActionContainer.classList.add("visible"); + this.levelScaler(); return res; } @@ -5601,6 +5707,60 @@ class SynchronizeSite extends WordRotatorBaseSite { } } +class WordRotatorSettingFragment extends LocalStorageSettingsFragment { + constructor(site) { + super(site, "html/application/fragment/settings.html"); + } + + onFirstStart() { + let themeTemplate = this.findBy("#theme-radio-template"); + delete themeTemplate["id"]; + let themeTemplateContainer = themeTemplate.parentNode; + themeTemplateContainer.removeAllChildren(); + + for (let i = 0; i < ThemeManager.themes.length; i++) { + let themeElem = Helper.cloneNode(themeTemplate); + let theme = ThemeManager.themes[i]; + themeElem.appendChild(Translator.makePersistentTranslation(theme._name)); + + let inputElem = themeElem.querySelector("input"); + inputElem.value = theme._className; + + inputElem.addEventListener("change", function() { + if (this.checked){ + ThemeManager.changeCurrentTheme(theme); + } + }); + themeTemplateContainer.appendChild(themeElem); + } + + SettingsManager.getInstance().setSetting("theme", ThemeManager.currentTheme._name); + + this.findBy("#reset-levels").addEventListener("click", () => { + localStorage.removeItem("currentLevel"); + localStorage.removeItem("date-last-sync"); + localStorage.removeItem("levelCounter"); + WordRotatorDb.getInstance().removeAll(WordRotatorDb.OBJECT_STORE.LEVEL); + }); + + return super.onFirstStart(); + } +} + +InitPromise.addPromise(function () { + SettingsSite.addSettingsFragment("settings", WordRotatorSettingFragment); +}); + +let basePath = "/pwa/wordRotator/public/"; +if (window.location.pathname.endsWith("publicTest/")) +{ + basePath = "/pwa/wordRotator/publicTest/"; +} + +SystemSettings.setBasePath(basePath); +Translator.supportedLanguages = ["de", "en"]; +Translator.markTranslations = false; + applyPolyfills(); ThemeManager.addTheme(new Theme('red', '')); @@ -5627,7 +5787,15 @@ window["app"]["refreshCurrentSite"] = app.refreshCurrentSite; window["Translator"] = Translator; window["Translator"]["setLanguage"] = Translator.setLanguage; +SettingsSite.setTemplate("html/application/setting-template.html"); +// SettingsSite.shouldAddSettingsAction = false; + +RegistrationSite.addAction = false; +LoginSite.addLoginAction = false; + InitPromise.resolve(app).then(function(){ + SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS; + app.start(SynchronizeSite); Translator.setLanguage("de"); }); diff --git a/src/js/init.js b/src/js/init.js index 6db3455..a5de345 100755 --- a/src/js/init.js +++ b/src/js/init.js @@ -1,6 +1,6 @@ import { App, applyPolyfills, - InitPromise, + InitPromise, MenuAction, ShareManager, SmsShareButton, TelegramShareButton, Theme, @@ -8,6 +8,7 @@ import { Translator, WhatsappShareButton } from "./lib/pwa-lib"; +import {LoginSite, RegistrationSite} from "./lib/pwa-user-management"; import "./lib/pwa-lib" import "./lib/pwa-core" @@ -15,13 +16,14 @@ import "./lib/pwa-assets" import "./lib/pwa-code-management" import "./lib/pwa-user-management" -import './settings' -// import {ClockSite} from "../module/Application/pwa/js/site/ClockSite"; -import {LevelSite} from "../module/Application/pwa/js/site/LevelSite"; import {SynchronizeSite} from "../module/Application/pwa/js/site/SynchronizeSite"; - +import {SettingsSite} from "./lib/pwa-core"; applyPolyfills(); +import {WordRotatorSettingFragment} from "../module/Application/pwa/js/Fragment/WordRotatorSettingFragment"; + +import './settings' + ThemeManager.addTheme(new Theme('red', '')); ThemeManager.addTheme(new Theme("blue", "blue")); ThemeManager.addTheme(new Theme("black", "black")); @@ -46,7 +48,15 @@ window["app"]["refreshCurrentSite"] = app.refreshCurrentSite; window["Translator"] = Translator; window["Translator"]["setLanguage"] = Translator.setLanguage; +SettingsSite.setTemplate("html/application/setting-template.html"); +// SettingsSite.shouldAddSettingsAction = false; + +RegistrationSite.addAction = false; +LoginSite.addLoginAction = false; + InitPromise.resolve(app).then(function(){ + SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS; + app.start(SynchronizeSite); Translator.setLanguage("de"); }); diff --git a/src/js/lib/pwa-core.js b/src/js/lib/pwa-core.js index 935e834..254e2a4 100755 --- a/src/js/lib/pwa-core.js +++ b/src/js/lib/pwa-core.js @@ -730,7 +730,7 @@ class ListHelper { class SettingsSite extends AbstractSite { constructor(siteManager) { - super(siteManager, 'core/html/settings.html', "settings"); + super(siteManager, SettingsSite.template, "settings"); for (let k in SettingsSite.settingsFragments) { this.addSettingsFragment(k, new SettingsSite.settingsFragments[k](this)); } @@ -799,20 +799,32 @@ class SettingsSite extends AbstractSite { static setAddSettingsSite(addLink) { SettingsSite.shouldAddSettingsSite = addLink; } + + static setTemplate(template) { + SettingsSite.template = template; + } } +SettingsSite.template = 'core/html/settings.html'; SettingsSite.settingsFragments = {}; SettingsSite.shouldAddSettingsSite = true; +SettingsSite.settingsAction = null; +SettingsSite.shouldAddSettingsAction = true; InitPromise.addPromise(function (app) { if (SettingsSite.shouldAddSettingsSite) { app.addDeepLink("settings", SettingsSite); - let settingsAction = new MenuAction("settings", function () { - app.startSite(SettingsSite); - }, MenuAction.SHOW_FOR_LARGE, 10000); - settingsAction.setIcon("img/settings.png"); - app.addDefaultAction(settingsAction); + if (Helper.isNull(SettingsSite.settingsAction)) { + let settingsAction = new MenuAction("settings", function () { + app.startSite(SettingsSite); + }, MenuAction.SHOW_FOR_LARGE, 10000); + settingsAction.setIcon("img/settings.png"); + SettingsSite.settingsAction = settingsAction; + } + if (SettingsSite.shouldAddSettingsAction) { + app.addDefaultAction(SettingsSite.settingsAction); + } } }); diff --git a/src/js/lib/pwa-lib.js b/src/js/lib/pwa-lib.js index c80c813..b185510 100755 --- a/src/js/lib/pwa-lib.js +++ b/src/js/lib/pwa-lib.js @@ -3515,6 +3515,21 @@ class MyDb { }); } + removeAll(objectStore){ + return new Promise((resolve) => { + this.openStore(objectStore, "readwrite", (store) => { + let req = store.clear(); + req.onerror = (e) => { + throw { + "type":"indexed-db-index-error", + "event": e + } + }; + req.onsuccess = resolve; + }); + }) + } + upgrade(db) { }; } @@ -3560,9 +3575,7 @@ class Prioritised { this.callbackCalledPromiseResolver(); } - if (prio == this.highestPrio) { - console.log("endPromise resolved!"); this.endPromiseResolver(); } } diff --git a/src/js/lib/pwa-user-management.js b/src/js/lib/pwa-user-management.js index bad702c..349ba3c 100755 --- a/src/js/lib/pwa-user-management.js +++ b/src/js/lib/pwa-user-management.js @@ -441,34 +441,51 @@ InitPromise.addPromise(function(app){ app.addDeepLink("forgotPassword", ForgotPasswordSite); }); -class LoginSite extends UserSite{ +class LoginSite extends UserSite { constructor(siteManager) { super(siteManager, 'userManagement/html/login.html', "login", "offline"); } onFirstStart() { let self = this; - (new LoginForm(document.getElementById("login-form"), "u/login", "post")).onSubmit(function(res){ + (new LoginForm(document.getElementById("login-form"), "u/login", "post")).onSubmit(function (res) { UserManager.setData(res); self.startStartsite(); FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate("login-success")); self.finish(); }); - this.findBy("#forgot-password-link").addEventListener("click", function(){ + this.findBy("#forgot-password-link").addEventListener("click", function () { self.startSite(ForgotPasswordSite); self.finish(); }); } } -InitPromise.addPromise(function(app){ + +LoginSite.loginAction = null; +LoginSite.logoutAction = null; +LoginSite.addLoginAction = true; +LoginSite.addLogoutAction = true; + +InitPromise.addPromise(function (app) { app.addDeepLink("login", LoginSite); - app.addDefaultAction(new UserAction('login', function(){ - app.startSite(LoginSite); - }, Menu.SHOW_NEVER, 1100, "offline")); - app.addDefaultAction(new UserAction('logout', function(){ - UserManager.logOut(); - }, Menu.SHOW_NEVER, 1100, "online")); + + if (Helper.isNull(LoginSite.loginAction)) { + LoginSite.loginAction = new UserAction('login', function () { + app.startSite(LoginSite); + }, Menu.SHOW_NEVER, 1100, "offline"); + } + if (Helper.isNull(LoginSite.logoutAction)) { + LoginSite.logoutAction = new UserAction('logout', function () { + UserManager.logOut(); + }, Menu.SHOW_NEVER, 1100, "online"); + } + if (LoginSite.addLoginAction){ + app.addDefaultAction(LoginSite.loginAction); + } + if (LoginSite.addLogoutAction){ + app.addDefaultAction(LoginSite.logoutAction); + } }); class RegistrationSite extends UserSite { @@ -477,17 +494,26 @@ class RegistrationSite extends UserSite { } onFirstStart() { - (new RegistrationForm(document.getElementById("registration-form"), "u/registration", "post")).onSubmit(function(res){ + (new RegistrationForm(document.getElementById("registration-form"), "u/registration", "post")).onSubmit(function (res) { FlashMessenger.addMessage(FlashMessenger.MESSAGE_TYPE_SUCCESS, Translator.translate("registration-success")); }); } } +RegistrationSite.action = null; +RegistrationSite.addAction = true; + InitPromise.addPromise(function (app) { app.addDeepLink("registration", RegistrationSite); - app.addDefaultAction(new UserAction('registration', function(){ - app.startSite(RegistrationSite); - }, null, 1100, "offline")); + + if (Helper.isNull(RegistrationSite.action)) { + RegistrationSite.action = new UserAction('registration', function () { + app.startSite(RegistrationSite); + }, null, 1100, "offline"); + } + if (RegistrationSite.addAction) { + app.addDefaultAction(RegistrationSite.action); + } }); class SetNewPasswordSite extends UserSite { diff --git a/src/module/Application/pwa/html/application/fragment/settings.html b/src/module/Application/pwa/html/application/fragment/settings.html new file mode 100644 index 0000000..ed593fd --- /dev/null +++ b/src/module/Application/pwa/html/application/fragment/settings.html @@ -0,0 +1,99 @@ +
+
+
+
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
diff --git a/src/module/Application/pwa/html/application/setting-template.html b/src/module/Application/pwa/html/application/setting-template.html new file mode 100644 index 0000000..999aac2 --- /dev/null +++ b/src/module/Application/pwa/html/application/setting-template.html @@ -0,0 +1,5 @@ +
+ +

+
+
\ No newline at end of file diff --git a/src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js b/src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js new file mode 100644 index 0000000..c96a19a --- /dev/null +++ b/src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js @@ -0,0 +1,47 @@ +import {LocalStorageSettingsFragment, SettingsManager, SettingsSite} from "../../../../../js/lib/pwa-core"; +import {Helper, InitPromise, ThemeManager, Translator} from "../../../../../js/lib/pwa-lib"; +import {WordRotatorDb} from "../WordRotatorDb"; + +export class WordRotatorSettingFragment extends LocalStorageSettingsFragment { + constructor(site) { + super(site, "html/application/fragment/settings.html"); + } + + onFirstStart() { + let themeTemplate = this.findBy("#theme-radio-template"); + delete themeTemplate["id"]; + let themeTemplateContainer = themeTemplate.parentNode; + themeTemplateContainer.removeAllChildren(); + + for (let i = 0; i < ThemeManager.themes.length; i++) { + let themeElem = Helper.cloneNode(themeTemplate); + let theme = ThemeManager.themes[i]; + themeElem.appendChild(Translator.makePersistentTranslation(theme._name)); + + let inputElem = themeElem.querySelector("input"); + inputElem.value = theme._className; + + inputElem.addEventListener("change", function() { + if (this.checked){ + ThemeManager.changeCurrentTheme(theme) + } + }); + themeTemplateContainer.appendChild(themeElem); + } + + SettingsManager.getInstance().setSetting("theme", ThemeManager.currentTheme._name); + + this.findBy("#reset-levels").addEventListener("click", () => { + localStorage.removeItem("currentLevel"); + localStorage.removeItem("date-last-sync"); + localStorage.removeItem("levelCounter"); + WordRotatorDb.getInstance().removeAll(WordRotatorDb.OBJECT_STORE.LEVEL); + }); + + return super.onFirstStart(); + } +} + +InitPromise.addPromise(function () { + SettingsSite.addSettingsFragment("settings", WordRotatorSettingFragment); +}); \ No newline at end of file diff --git a/src/module/Application/pwa/js/site/LevelSite.js b/src/module/Application/pwa/js/site/LevelSite.js index bc04343..dcefa38 100755 --- a/src/module/Application/pwa/js/site/LevelSite.js +++ b/src/module/Application/pwa/js/site/LevelSite.js @@ -12,6 +12,7 @@ import {WordRotatorBaseSite} from "./WordRotatorBaseSite"; export class LevelSite extends WordRotatorBaseSite { constructor(siteManager) { super(siteManager, "html/application/level.html"); + this.levelScaler = ()=>{}; } onConstruct(args) { @@ -88,7 +89,7 @@ export class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); this.level = level; return; @@ -125,7 +126,7 @@ export class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); this.level = level; this.levelCounterAction.innerText = this.levelCounter; @@ -139,10 +140,9 @@ export class LevelSite extends WordRotatorBaseSite { onStart(args) { let res = super.onStart(args); - let scaleHelper = new ScaleHelper(); - scaleHelper.s this.levelCounterAction.innerText = this.levelCounter; this.levelCounterActionContainer.classList.add("visible"); + this.levelScaler(); return res; } diff --git a/src/module/Application/pwa/js/site/WordRotatorBaseSite.js b/src/module/Application/pwa/js/site/WordRotatorBaseSite.js index 4536daf..55caa5a 100644 --- a/src/module/Application/pwa/js/site/WordRotatorBaseSite.js +++ b/src/module/Application/pwa/js/site/WordRotatorBaseSite.js @@ -1,15 +1,16 @@ import {AbstractSite, Menu, MenuAction} from "../../../../../js/lib/pwa-lib"; +import {SettingsSite} from "../../../../../js/lib/pwa-core"; export class WordRotatorBaseSite extends AbstractSite { - - createActionBarMenu(menu) { - menu = super.createActionBarMenu(menu); - let actions = menu.actions; - for (let i = 0; i < actions.length; i++) { - if (actions[i].title === "login" || actions[i].title === "registration"){ - actions[i].setVisible(false); - } - } - return menu; - } + // createActionBarMenu(menu) { + // menu = super.createActionBarMenu(menu); + // // menu.addAction(SettingsSite.settingsAction.copy()); + // // let actions = menu.actions; + // // for (let i = 0; i < actions.length; i++) { + // // if (actions[i].title === "login" || actions[i].title === "registration"){ + // // actions[i].setVisible(false); + // // } + // // } + // return menu; + // } } \ No newline at end of file diff --git a/src/scss/wordRotator.scss b/src/scss/wordRotator.scss index 5571a3d..693a908 100755 --- a/src/scss/wordRotator.scss +++ b/src/scss/wordRotator.scss @@ -187,11 +187,11 @@ $animationDuration: 0.25s; border: 3px solid white; border-radius: 50%; visibility: hidden; - margin-top: -5px; + margin-top: -3px; display: table-cell; - height: 45px; - width: 45px; + height: 40px; + width: 40px; text-align: center; vertical-align: middle;