]> _ Git - fluidbook-html5.git/commitdiff
projects / fluidbook-html5.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 1748339)
wip #815 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 26 Apr 2017 14:21:47 +0000 (16:21 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 26 Apr 2017 14:21:47 +0000 (16:21 +0200)
_index.html patch | blob | history
images/close.svg patch | blob | history
images/interface.svg [new file with mode: 0644] patch | blob
js/libs/cube/util.js patch | blob | history
js/libs/fluidbook/fluidbook.links.js patch | blob | history
js/main.js patch | blob | history
style/fluidbook.css patch | blob | history
style/fluidbook.less patch | blob | history

diff --git a/_index.html b/_index.html
index 141fd3019fd05de7677c5d30f20cfda7ad30c29c..ba0555e0a768e661044761eeaeeb0b95e309f35f 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -20,6 +20,7 @@
 </head>
 <body style="background-color:#<!-- $bgcolor -->;" data-branch="mobilezoom">
 <!--googleoff: all-->
+<!-- $svg -->
 <div id="message"><!-- $message --></div>
 <!--googleon: all-->
 <div id="main">
diff --git a/images/close.svg b/images/close.svg
index b37290ab270b498f035dac180e1fe24b85f771ab..fde09483d52d48a6ac13997bef91ba37fb188abd 100644 (file)
--- a/images/close.svg
+++ b/images/close.svg
@@ -1 +1 @@
-<svg id="SvgjsSvg1008" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="17" height="17" viewBox="0 0 17 17"><title>Shape 2</title><desc>Created with Avocode.</desc><defs id="SvgjsDefs1009"></defs><path id="SvgjsPath1010" d="M0.01472 2.13604L2.13604 0.014720000000000066L16.98528 14.86396L14.863959999999999 16.98528Z " fill="#f5f5f5" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path><path id="SvgjsPath1011" d="M2.13604 16.98528L0.014720000000000066 14.863959999999999L14.86396 0.014719999999998734L16.98528 2.1360399999999986Z " fill="#f5f5f5" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="17" height="17" viewBox="0 0 17 17"><path id="p1" class="" d="M0.01472 2.13604L2.13604 0.014720000000000066L16.98528 14.86396L14.863959999999999 16.98528Z " fill="#f5f5f5" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path><path id="p2" d="M2.13604 16.98528L0.014720000000000066 14.863959999999999L14.86396 0.014719999999998734L16.98528 2.1360399999999986Z " fill="#f5f5f5" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path></svg>
\ No newline at end of file
diff --git a/images/interface.svg b/images/interface.svg
new file mode 100644 (file)
index 0000000..70bf1ad
--- /dev/null
+++ b/images/interface.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol viewBox="0 0 17 17" id="close">
+        <path id="p1" class="fill-c-menu-text" d="M0.01472 2.13604L2.13604 0.014720000000000066L16.98528 14.86396L14.863959999999999 16.98528Z" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path>
+        <path id="p2" class="fill-c-menu-text" d="M2.13604 16.98528L0.014720000000000066 14.863959999999999L14.86396 0.014719999999998734L16.98528 2.1360399999999986Z" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path>
+    </symbol>
+</svg>
\ No newline at end of file
diff --git a/js/libs/cube/util.js b/js/libs/cube/util.js
index a29fa6e2b0d5ad82d410b36cb21cfc213b770a0a..93f3c1227495461b9db2a6dc8605e9af3f5a71c6 100644 (file)
--- a/js/libs/cube/util.js
+++ b/js/libs/cube/util.js
@@ -120,7 +120,7 @@ function loadImage(src, callback) {
         loaded = true;
         callback(img);
     });
-    img.src=src;
+    img.src = src;
     if ($(img).isLoaded()) {
         if (!loaded) {
             loaded = true;
@@ -130,3 +130,18 @@ function loadImage(src, callback) {
     return img;
 }
 
+function getSVGDocument(element){
+    var el=$(element).get(0);
+    if (el.contentDocument)
+    {
+        return el.contentDocument;
+    }
+    else
+    {
+        var subdoc = null;
+        try {
+            subdoc = el.getSVGDocument();
+        } catch(e) {}
+        return subdoc;
+    }
+}
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 83a11f4429c17536e47de111fa92d9716bb916b6..c636b964fea4f39a1e111be74765adfef697ac70 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -14,15 +14,20 @@ FluidbookLinks.prototype = {
         });
 
         // ToDo: consider re-using existing popinOverlay div?
-        $('body').append('<div id="zoomPopupOverlay"></div><div id="zoomPopupWrapper"><a href="#" class="zoomPopupClose"></a></div>');
+        $('body').append('<div id="zoomPopupOverlay"></div><div id="zoomPopupWrapper"><a href="#" class="zoomPopupClose"><svg viewBox="0 0 20 20"><use xlink:href="#close"></use></svg></a></div>');
 
-        $(document).on('click', '.zoomPopup', function (e) {
+        $(document).on('click touchend', '.zoomPopup', function (e) {
             e.preventDefault();
             $this.zoomLink(this);
             return false;
         });
 
-        $(document).on('click touchend', '#zoomPopupOverlay, .zoomPopupClose', function (e) {
+        $(this.fluidbook).on('fluidbook.zoom.in.end', function () {
+            $this.zoomLinkReset(true);
+            return true;
+        });
+
+        $(document).on('click touchend', '#zoomPopupOverlay, #zoomPopupWrapper', function (e) {
             console.log('closing zoomPopup...');
             $this.zoomLinkReset();
         });
@@ -98,6 +103,7 @@ FluidbookLinks.prototype = {
                 $this.zoomLink(link);
             });
 
+
             // Zoom out
             this.fluidbook.zoom.resetZoom();
             return false;
@@ -150,11 +156,12 @@ FluidbookLinks.prototype = {
             this.fluidbook.hideLoader();
             z.show();
 
+            var s = (zoomWidth / box.width);
+            $(".zoomPopupClose").css('opacity', 1).transform({scale: 1 / s, origin: ['100%', '0', 0]});
             setTimeout(function () {
                 z.css({
-                    transform: 'translateX(' + x + 'px) translateY(' + y + 'px)',
-                    width: zoomWidth,
-                    height: zoomHeight
+                    boxShadow: '0 0 100px rgba(0,0,0,0.3)',
+                    transform: 'translateX(' + x + 'px) translateY(' + y + 'px) scale(' + s + ')',
                 });
             }, 50);
 
@@ -164,7 +171,10 @@ FluidbookLinks.prototype = {
         });
     },
 
-    zoomLinkReset: function () {
+    zoomLinkReset: function (immediate) {
+        if (immediate == undefined) {
+            immediate = false;
+        }
 
         if (!$('body').hasClass('zoomPopup')) return false; // Already open
 
@@ -172,21 +182,23 @@ FluidbookLinks.prototype = {
             scale = z.data('scale');
 
         z.css({
-            transform: 'translate(0,0)',
-            width: z.width() / scale,
-            height: z.height() / scale
+            transform: 'translate(0,0) scale(1)',
+            boxShadow: '0 0 0 rgba(0,0,0,0.3)',
         });
+        if (immediate) {
+            $('#zoomPopupWrapper').hide();
+            $('body').removeClass('zoomPopup');
+        }
 
         // Hide popup after transition completes
         // ToDo: use CSS transition end event to do this without needing a timeout value (or use Web Animation API)
         // ToDo: see https://davidwalsh.name/css-animation-callback
         setTimeout(function () {
             $('#zoomPopupWrapper').hide();
+            $(".zoomPopupClose").css('opacity', 0);
             $('body').removeClass('zoomPopup');
         }, 500);
 
-        //z.attr('style', '');
-
         return false;
     }
 
diff --git a/js/main.js b/js/main.js
index bb962caeef90135dfe81052878028208b971cdd4..b955e41d1706651a476ce1bba7ab3f2f3d68f1da 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -123,11 +123,8 @@ try {
         DEVICE_READY = true;
 
         fb('device ready !');
-
         document.addEventListener("offline", onDeviceOffline, false);
-
         var manifest;
-
         var fsprefix = window.localStorage.getItem('galfsprefix');
 
         PLATFORM = DATAS.phonegap;
diff --git a/style/fluidbook.css b/style/fluidbook.css
index 61fa2c40113e135aa3cb86ace1b0c0eeefec1791..38adde7e0f419a518e7ef8ac6f1eadd0377efe2d 100644 (file)
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -1533,6 +1533,7 @@ body.zoomPopup #zoomPopupOverlay {
   transition: all 0.5s ease-in-out;
   transform-origin: 0 0;
   position: absolute;
+  cursor: pointer;
   z-index: 101;
 }
 #zoomPopupWrapper img {
@@ -1542,15 +1543,18 @@ body.zoomPopup #zoomPopupOverlay {
   width: 100%;
   height: 100%;
   display: block;
+  z-index: 102;
 }
-.zoomPopupClose {
+#zoomPopupWrapper .zoomPopupClose {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 20px;
-  height: 20px;
-  background: url('../data/images/interface-close.svg') center no-repeat;
-  background-size: contain;
+  top: 0px;
+  right: 0px;
+  width: 30px;
+  height: 30px;
+  z-index: 103;
+  padding: 10px 10px 0 0;
+  opacity: 0;
+  transition: opacity 250ms;
 }
 @media handled and (orientation: portrait) {
   #ol {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index dcf314367a470f5d72e12f76c0defa10ebd90032..9abfe1f4db9304de5142079f8839ba06e711faff 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1793,6 +1793,7 @@ a.button {
        transition: all 0.5s ease-in-out;
        transform-origin: 0 0;
        position: absolute;
+       cursor: pointer;
        z-index: 101;
 
        img {
@@ -1802,17 +1803,19 @@ a.button {
                width: 100%;
                height: 100%;
                display: block;
+               z-index: 102;
+       }
+       .zoomPopupClose {
+               position: absolute;
+               top: 0px;
+               right: 0px;
+               width: 30px;
+               height: 30px;
+               z-index: 103;
+               padding: 10px 10px 0 0;
+               opacity: 0;
+               transition: opacity 250ms;
        }
-}
-
-.zoomPopupClose {
-       position: absolute;
-       top: 10px;
-       right: 10px;
-       width: 20px;
-       height: 20px;
-       background: url('../data/images/interface-close.svg') center no-repeat;
-       background-size: contain;
 }
 
 @media handled and (orientation: portrait) {
Unnamed repository; edit this file 'description' to name the repository.