@vidro/map-handler 1.0.6 → 1.0.9

package/examples/integration/tool/css/master/_menu-tools.scss

@@ -0,0 +1,187 @@
+// main: style.scss
+
+.menu-tools{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0px;
+    font-size: 0;
+    line-height: 0;
+    overflow: hidden;
+    padding-left: 10px;
+    pointer-events: none;
+
+    @media (min-width: 700px){
+        display: none;
+    }
+
+    a.menu-toggle{
+        display: inline-block;
+        padding: 15px;
+        background-color: $color-accent;
+        position: relative;
+        width: 60px;
+        height: 60px;
+        box-sizing: border-box;
+        z-index: 2;
+        pointer-events: auto;
+
+        > svg{
+            position: absolute;
+            display: block;
+            fill: white;
+            width: 30px;
+            height: 30px;
+        }
+
+        // &:hover{
+        //     svg{
+        //         fill: $color-accent;
+        //     }
+        // }
+
+        .hamburger, .times{
+            transform: translateX(0);
+            transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+            transition-property: transform, opacity, fill;
+        }
+
+        &.closed .times{ opacity: 0; transform: translateX(25px); }
+        &.open .hamburger{ opacity: 0; transform: translateX(-25px);}
+
+    }
+
+    ul{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        background-color: $color-menu-tools-mobile-background;
+        pointer-events: auto;
+        overflow-y: scroll;
+        position: absolute;
+        top: 60px;
+        bottom: 0;
+        z-index: 999;
+        
+        &::-webkit-scrollbar-thumb {
+            background: $color-menu-tools-mobile-scrollbar;
+        }
+
+        &.closed{
+            transform: translateX(80px);
+        }
+        &.open{
+            transform: translateX(0);
+            box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.5);
+        }
+
+        > li{
+            margin: 0;
+            padding: 0;
+
+            &:not(:last-child){
+                border-bottom: 1px solid rgba(0, 0, 0, .2);
+            }
+            &:not(:first-child){
+                border-top: 1px solid rgba(255, 255, 255, .2);
+            }
+
+            > button{
+                background: none;
+                border: none;
+                padding: 10px;
+                cursor: pointer;
+
+                svg{
+                    width: 37px;
+                }
+
+                svg path{
+                    fill: white;
+                }
+
+                &:focus{
+                    box-shadow: none;
+                    outline: none;
+                }
+
+                &:disabled{
+                    cursor: not-allowed;
+                    svg path{
+                        fill: fade-out(white, .8);
+                    }
+                }
+
+                &:hover:not(:disabled),
+                &.tool-selected:not(:disabled){
+                    background-color: $color-menu-tools-mobile-background;
+                    svg path{
+                        fill: white;
+                    }
+                }
+            }
+        }
+    }
+
+    // @media (max-width: 600px){
+    //     bottom: 230px;
+    // }
+
+    //
+    // @media (max-width: 600px){
+    //
+    //     * { box-shadow: 0 0 0 1px red; }
+    //
+    //     left: 0;
+    //     bottom: auto;
+    //     text-align: right;
+    //
+    //     ul{
+    //         * { box-shadow: 0 0 0 1px green; }
+    //         background-color: $color-menu-bg;
+    //
+    //         &.closed{ transform: translateX(100%); }
+    //         &.open{ transform: translateX(0); }
+    //
+    //         > li{
+    //             display: inline-block;
+    //             > a,
+    //             > button{
+    //                 background: none;
+    //             }
+    //         }
+    //     }
+    // }
+}
+
+// @media (min-width: 1281px){
+//
+//     .menu-tools a.menu-toggle{
+//         width: 45px;
+//         height: 45px;
+//         padding: 10px;
+//         overflow: hidden;
+//         svg{
+//             width: 25px;
+//             height: 25px;
+//         }
+//     }
+//
+//     .menu-tools ul{
+//         &.closed{ transform: translateX(45px); }
+//         &.open{ transform: translateX(0); }
+//     }
+//     .menu-tools ul li a,
+//     .menu-tools ul li button{
+//         padding: 12.5px;
+//         background-color: $color-menu-bg;
+//
+//         > svg{
+//             display: block;
+//             fill: white;
+//             width: 20px;
+//             height: 20px;
+//         }
+//     }
+// }

package/examples/integration/tool/css/master/_mixins.scss

@@ -0,0 +1,42 @@
+// main: style.scss
+
+$min-width-desktop: 700px;
+$max-width-tablet: 699px;
+$min-width-tablet: 501px;
+$max-width-mobile: 500px;
+
+@mixin only-desktop {
+    @media (min-width: $min-width-desktop){
+        @content;
+    }
+}
+
+@mixin only-tablet {
+    @media (min-width: $min-width-tablet) and (max-width: $max-width-tablet){
+        @content;
+    }
+}
+
+@mixin only-mobile {
+    @media (max-width: $max-width-mobile){
+        @content;
+    }
+}
+
+@mixin only-desktop-and-tablet {
+    @media (min-width: $min-width-tablet){
+        @content;
+    }
+}
+
+@mixin only-mobile-and-tablet {
+    @media (max-width: $max-width-tablet){
+        @content;
+    }
+}
+
+@mixin ellipsize{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/examples/integration/tool/css/master/_notifyjs.scss

@@ -0,0 +1,39 @@
+// main: style.scss
+
+.notifyjs-corner{
+    padding: 0 60px;
+    top: 60px !important;
+    left: 50% !important;
+    transform: translateX(-50%);
+}
+
+.notifyjs-bootstrap-base {
+    font-weight: bold;
+    border: none !important;
+    padding-left: 0 !important;
+    text-shadow: none !important;
+    color: #FFFFFF !important;
+    padding: 10px 25px !important;
+    background-image: none !important;
+    text-align: center !important;
+
+    &.notifyjs-bootstrap-error {
+        // color: #84002f !important;
+        background-color: #ef1d67 !important;
+    }
+
+    &.notifyjs-bootstrap-warning{
+        // color: #a07800 !important;
+        background-color: #ffc000 !important;
+    }
+
+    &.notifyjs-bootstrap-success{
+        // color: #019554 !important;
+        background-color: #1cf395 !important;
+    }
+
+    &.notifyjs-bootstrap-info{
+        // color: #017a8c !important;
+        background-color: #0cd5f3 !important;
+    }
+}

package/examples/integration/tool/css/master/_ol-map-controls.scss

@@ -0,0 +1,117 @@
+// main: style.scss
+
+.ol-attribution.ol-logo-only {
+    bottom: 15px !important;
+    left: 15px !important;
+    width: 22px !important;
+    height: 22px !important;
+}
+
+.map-control-button{
+    display: inline-block !important;
+    display: none !important;
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 60px !important;
+    background-color: white !important;
+    margin: 10px 10px 10px 0 !important;
+    padding: 2px 6px 7px 6px !important;
+    box-sizing: border-box !important;
+    border-radius: 99px !important;
+    text-align: center !important;
+    font-size: 30px !important;
+    cursor: pointer;
+    color: black !important;
+    &:hover,
+    &:active,
+    &:focus{
+        background-color: white;
+        outline: none;
+    }
+}
+
+.ol-zoom{
+    right: 15px;
+    bottom: 15px;
+    top: inherit !important;
+    left: inherit !important;
+    background: none !important;
+    transition: all .2s;
+
+    .ol-zoom-out,
+    .ol-zoom-in{
+        @extend .map-control-button;
+    }
+}
+
+.ol-zoom-extent{
+    right: 155px;
+    bottom: 15px;
+    top: inherit !important;
+    left: inherit !important;
+    background: none !important;
+
+    button{
+        @extend .map-control-button;
+    }
+}
+
+// @media (max-width: 600px){
+//     .map-control-button{
+//         display: block !important;
+//     }
+//     .ol-zoom{
+//         right: 0px;
+//         bottom: 0px;
+//     }
+//     .ol-zoom-extent{
+//         right: 0px;
+//         bottom: 140px;
+//     }
+// }
+
+@media (min-width: 1281px){
+    .map-control-button{
+        width: 40px !important;
+        height: 40px !important;
+        border-radius: 50px !important;
+        margin: 5px 5px 5px 0 !important;
+        padding: 5px 6px 7px 6px !important;
+        font-size: 20px !important;
+    }
+    .ol-zoom-extent{
+        right: 105px;
+    }
+}
+.ol-scale-coordinates{
+  position: absolute;
+  width: auto;
+  bottom: 10px;
+  right: 5px;
+}
+.scale-line {
+
+}
+.ol-scale-line {
+  position: relative;
+  bottom: 0px;
+  right: 5px;
+  width: fit-content;
+  align: -webkit-center;
+}
+.ol-mouse-position{
+  position: relative;
+  bottom: 0px;
+  left: 0px;
+  height: 18px;
+  color: white;
+  text-align: center;
+  font-size: 12px;
+  background-color: rgba(0,60,136,.3);
+}
+.coordinates {
+  width: 150px;
+  right: 140px;
+  bottom: 36px;
+  position: relative;
+}

package/examples/integration/tool/css/master/_simplelightbox.scss

@@ -0,0 +1,287 @@
+// You can customize Simplelightbox with the following variables:
+
+$sl-font-family: Arial, Baskerville, monospace;
+$sl-overlay-background: #fff;
+$sl-navigation-color: #000;
+$sl-caption-color: #fff;
+$sl-caption-background: #000;
+
+$sl-counter-fontsize: 1rem;
+$sl-close-fontsize: 3rem;
+
+$sl-breakpoint-medium: 35.5em; // 568px, when 1em == 16px
+$sl-breakpoint-large:  50em;   // 800px, when 1em == 16px
+
+$sl-arrow-fontsize-small:  2rem;
+$sl-arrow-fontsize-medium: 3rem;
+$sl-arrow-fontsize-large:  3rem;
+$sl-img-border-small:  0 none;
+$sl-img-border-medium: 0 none;
+$sl-img-border-large:  0 none;
+$sl-iframe-border-small:  0 none;
+$sl-iframe-border-medium: 0 none;
+$sl-iframe-border-large:  0 none;
+
+
+
+body.hidden-scroll {
+  overflow: hidden;
+}
+.sl-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: $sl-overlay-background;
+  opacity: 0.7;
+  display: none;
+  z-index: 1006;
+}
+.sl-wrapper {
+  z-index: 1000;
+  button {
+    border: 0 none;
+    background: transparent;
+    font-size: 28px;
+    padding: 0;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .sl-close {
+    display: none;
+    position: fixed;
+    right: 30px;
+    top: 30px;
+    z-index: 1015;
+    margin-top: -14px;
+    margin-right: -14px;
+    height: 44px;
+    width: 44px;
+    line-height: 44px;
+    font-family: $sl-font-family;
+    color: $sl-navigation-color;
+    font-size: $sl-close-fontsize;
+  }
+
+  .sl-counter {
+    display: none;
+    position: fixed;
+    top: 30px;
+    left: 30px;
+    z-index: 1015;
+    color: $sl-navigation-color;
+    font-size: $sl-counter-fontsize;
+  }
+
+  .sl-navigation {
+    width: 100%;
+    display: none;
+    button {
+      position: fixed;
+      top: 50%;
+      margin-top: -22px;
+      height: 44px;
+      width: 22px;
+      line-height: 44px;
+      text-align: center;
+      display: block;
+      z-index: 1015;
+      font-family: $sl-font-family;
+      color: $sl-navigation-color;
+      &.sl-next {
+        right: 5px;
+        font-size: $sl-arrow-fontsize-small;
+      }
+
+      &.sl-prev {
+        left: 5px;
+        font-size: $sl-arrow-fontsize-small;
+      }
+      @media (min-width: $sl-breakpoint-medium) {
+        width: 44px;
+
+        &.sl-next {
+          right: 10px;
+          font-size: $sl-arrow-fontsize-medium;
+        }
+
+        &.sl-prev {
+          left: 10px;
+          font-size: $sl-arrow-fontsize-medium;
+        }
+      }
+      @media (min-width: $sl-breakpoint-large) {
+        width: 44px;
+
+        &.sl-next {
+          right: 20px;
+          font-size: $sl-arrow-fontsize-large;
+        }
+
+        &.sl-prev {
+          left: 20px;
+          font-size: $sl-arrow-fontsize-large;
+        }
+      }
+    }
+  }
+
+  .sl-image {
+    position: fixed;
+    -ms-touch-action: none;
+    touch-action: none;
+    z-index: 10000;
+    img {
+      margin: 0;
+      padding: 0;
+      display: block;
+      border: $sl-img-border-small;
+      @media (min-width: $sl-breakpoint-medium) {
+        border: $sl-img-border-medium;
+      }
+      @media (min-width: $sl-breakpoint-large) {
+        border: $sl-img-border-large;
+      }
+
+    }
+    iframe {
+      background: #000;
+      border: $sl-iframe-border-small;
+      @media (min-width: $sl-breakpoint-medium) {
+        border: $sl-iframe-border-medium;
+      }
+      @media (min-width: $sl-breakpoint-large) {
+        border: $sl-iframe-border-large;
+      }
+    }
+    .sl-caption {
+      display: none;
+      padding: 10px;
+      color: $sl-caption-color;
+      background: $sl-caption-background;
+      opacity: 0.8;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      &.pos-top {
+        bottom: auto;
+        top: 0;
+      }
+
+      &.pos-outside {
+        bottom: auto;
+      }
+    }
+
+    .sl-download {
+      display: none;
+      position: absolute;
+      bottom: 5px;
+      right: 5px;
+      color: $sl-navigation-color;
+      z-index: 1005;
+    }
+  }
+}
+
+.sl-spinner {
+    display: none;
+    border: 5px solid #333;
+    border-radius: 40px;
+    height: 40px;
+    left: 50%;
+    margin: -20px 0 0 -20px;
+    opacity: 0;
+    position: fixed;
+    top: 50%;
+    width: 40px;
+    z-index: 1007;
+    -webkit-animation: pulsate 1s ease-out infinite;
+    -moz-animation: pulsate 1s ease-out infinite;
+    -ms-animation: pulsate 1s ease-out infinite;
+    -o-animation: pulsate 1s ease-out infinite;
+    animation: pulsate 1s ease-out infinite;
+}
+
+.sl-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+
+@-webkit-keyframes pulsate{
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}
+@keyframes pulsate {
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}
+
+@-moz-keyframes pulsate{
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}
+
+@-o-keyframes pulsate{
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}
+
+@-ms-keyframes pulsate{
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}

package/examples/integration/tool/css/master/_toc-config.scss

@@ -0,0 +1,28 @@
+//main: style.scss
+
+.toc-config{
+    font-size: 14px;
+
+    .uib-datepicker-popup{
+        list-style: none;
+        margin: 20px 0 0 0;
+        padding: 0;
+        .btn{
+            margin-left: .2em;
+            margin-right: .2em;
+            border-radius: 0px;
+            padding: 5px;
+            font-size: 11px;
+        }
+
+        button.btn.btn-default.btn-sm.pull-left.uib-left:before {
+            content: "←";
+        }
+
+        button.btn.btn-default.btn-sm.pull-right.uib-right:before {
+            content: "→";
+        }
+
+    }
+
+}