Drobne zmiany w CSS i refaktoring JS. Dodanie przycisków "Powiększ" i "Pomniejsz...

diff --git a/platforma/static/css/html.css b/platforma/static/css/html.css
index 574e764..57eed6d 100755 (executable)
--- a/platforma/static/css/html.css
+++ b/platforma/static/css/html.css
@@ -390,6 +390,8 @@
 
 
 .edit-button:hover, .edit-button:active {
 
 
 .edit-button:hover, .edit-button:active {

+/*    color: #FFF;*/
+    background-color: #999;

     color: #FFF;
 }
 
     color: #FFF;
 }
 

diff --git a/platforma/static/css/master.css b/platforma/static/css/master.css
index 493a196..286e5c4 100755 (executable)
--- a/platforma/static/css/master.css
+++ b/platforma/static/css/master.css
@@ -164,6 +164,7 @@ p { margin: 0;}
 /*    -webkit-transition: all 1s linear;*/
 }
 
 /*    -webkit-transition: all 1s linear;*/
 }
 

+

 /* =========== */
 /* = Gallery = */
 /* =========== */
 /* =========== */
 /* = Gallery = */
 /* =========== */

diff --git a/platforma/static/js/main.js b/platforma/static/js/main.js
index cf89c29..7efcf32 100644 (file)
--- a/platforma/static/js/main.js
+++ b/platforma/static/js/main.js
@@ -1,3 +1,4 @@
+// Serializuje XML, wstawiając odpowiednie ilości białych znaków między elementami

 function serialize(element) {
     if (element.nodeType == 3) { // tekst
         return [$.trim(element.nodeValue)];
 function serialize(element) {
     if (element.nodeType == 3) { // tekst
         return [$.trim(element.nodeValue)];


@@ -58,6 +59,8 @@ function serialize(element) {
     return result;
 };
 
     return result;
 };
 

+
+// Teraz nieużywane

 function highlight(colour) {
     var range, sel;
     if (window.getSelection) {
 function highlight(colour) {
     var range, sel;
     if (window.getSelection) {


@@ -83,27 +86,6 @@ function highlight(colour) {
     }
 }
 
     }
 }
 

-function selectTheme(themeId)
-{
-    var selection = window.getSelection();
-    
-    // remove current selection
-    selection.removeAllRanges();
-
-    var range = document.createRange();
-    var s = $(".motyw[theme-class='"+themeId+"']")[0];
-    var e = $(".end[theme-class='"+themeId+"']")[0];
-    // console.log('Selecting range:', themeId, range, s, e);
-    
-    if(s && e) {
-        range.setStartAfter(s);
-        range.setEndBefore(e);
-        selection.addRange(range);
-        // highlight('yellow');
-        // selection.removeAllRanges();
-    }
-};
-

 // function unselectThemes(themeId) {
 //     $('.Apple-style-span').each(function() {
 //         $(this).after($(this).html());
 // function unselectThemes(themeId) {
 //     $('.Apple-style-span').each(function() {
 //         $(this).after($(this).html());


@@ -113,6 +95,7 @@ function selectTheme(themeId)
 
 function gallery(element) {
     var element = $(element);
 
 function gallery(element) {
     var element = $(element);

+    var imageDimensions = {};

     
     function changePage(pageNumber) {        
         $('img', element).attr('src', element.data('images')[pageNumber - 1]);
     
     function changePage(pageNumber) {        
         $('img', element).attr('src', element.data('images')[pageNumber - 1]);


@@ -158,23 +141,101 @@ function gallery(element) {
                 pn.change();
             });
             
                 pn.change();
             });
             

+            

             var image = $('img', element).attr('unselectable', 'on');
             var origin = {};
             var imageOrigin = {};
             var image = $('img', element).attr('unselectable', 'on');
             var origin = {};
             var imageOrigin = {};

-            var imageDimensions = {};
+            var zoomFactor = 1;

             
             

-            function onMouseMove(event) {
-                var delta = {
-                    x: event.clientX - origin.x,
-                    y: event.clientY - origin.y
+            $('.zoom-in', element).click(function() {
+                zoomFactor = Math.min(2, zoomFactor + 0.2);
+                zoom();
+            });
+            $('.zoom-out', element).click(function() {
+                zoomFactor = Math.max(0.2, zoomFactor - 0.2);
+                zoom();
+            });
+            
+            $('img', element).load(function() {
+                image.css({width: null, height: null});
+                imageDimensions = {
+                    width: $(this).width() * zoomFactor,
+                    height: $(this).height() * zoomFactor,
+                    originWidth: $(this).width(),
+                    originHeight: $(this).height(),
+                    galleryWidth: $(this).parent().width(),
+                    galleryHeight: $(this).parent().height()

                 };
                 };

-                
-                var newTop = Math.min(0, Math.max(imageOrigin.top + delta.y, imageDimensions.galleryHeight - imageDimensions.height));
-                var newLeft = Math.min(0, Math.max(imageOrigin.left + delta.x, imageDimensions.galleryWidth - imageDimensions.width));
-                image.css({position: 'absolute', top: newTop, left: newLeft});
+                console.log('load', imageDimensions)
+                var position = normalizePosition(
+                    image.position().left,
+                    image.position().top, 
+                    imageDimensions.galleryWidth,
+                    imageDimensions.galleryHeight,
+                    imageDimensions.width,
+                    imageDimensions.height
+                );
+                image.css({left: position.x, top: position.y, width: $(this).width() * zoomFactor, height: $(this).height() * zoomFactor});
+            });
+
+            $(window).resize(function() {
+                imageDimensions.galleryWidth = image.parent().width();
+                imageDimensions.galleryHeight = image.parent().height();
+            });
+            
+            function bounds(galleryWidth, galleryHeight, imageWidth, imageHeight) {
+                return {
+                    maxX: 0,
+                    maxY: 0,
+                    minX: galleryWidth - imageWidth,
+                    minY: galleryHeight - imageHeight
+                }
+            }
+            
+            function normalizePosition(x, y, galleryWidth, galleryHeight, imageWidth, imageHeight) {
+                var b = bounds(galleryWidth, galleryHeight, imageWidth, imageHeight);
+                return {
+                    x: Math.min(b.maxX, Math.max(b.minX, x)),
+                    y: Math.min(b.maxY, Math.max(b.minY, y))
+                }
+            }
+            
+            function onMouseMove(event) {
+                var position = normalizePosition(
+                    event.clientX - origin.x + imageOrigin.left,
+                    event.clientY - origin.y + imageOrigin.top, 
+                    imageDimensions.galleryWidth,
+                    imageDimensions.galleryHeight,
+                    imageDimensions.width,
+                    imageDimensions.height
+                );
+                image.css({position: 'absolute', top: position.y, left: position.x});

                 return false;
             }
             
                 return false;
             }
             

+            function setZoom(factor) {
+                zoomFactor = factor;
+            }
+            
+            function zoom() {
+                imageDimensions.width = imageDimensions.originWidth * zoomFactor;
+                imageDimensions.height = imageDimensions.originHeight * zoomFactor;
+                var position = normalizePosition(
+                    image.position().left,
+                    image.position().top, 
+                    imageDimensions.galleryWidth,
+                    imageDimensions.galleryHeight,
+                    imageDimensions.width,
+                    imageDimensions.height
+                );
+                console.log(image.position(), imageDimensions, position);
+                image.css({width: imageDimensions.width, height: imageDimensions.height,
+                    left: position.x, top: position.y});
+
+            }
+            
+            window.setZoom = setZoom;
+            

             function onMouseUp(event) {
                 $(document)
                     .unbind('mousemove.gallery')
             function onMouseUp(event) {
                 $(document)
                     .unbind('mousemove.gallery')


@@ -188,12 +249,6 @@ function gallery(element) {
                     y: event.clientY
                 };
                 imageOrigin = image.position();
                     y: event.clientY
                 };
                 imageOrigin = image.position();

-                imageDimensions = {
-                    width: image.width(),
-                    height: image.height(),
-                    galleryWidth: image.parent().width(),
-                    galleryHeight: image.parent().height()
-                };

                 $(document)
                     .bind('mousemove.gallery', onMouseMove)
                     .bind('mouseup.gallery', onMouseUp);
                 $(document)
                     .bind('mousemove.gallery', onMouseMove)
                     .bind('mouseup.gallery', onMouseUp);


@@ -203,8 +258,49 @@ function gallery(element) {
     });
 }
 
     });
 }
 

+
+function html(element) {
+    var element = $(element);
+    
+    function selectTheme(themeId)
+    {
+        var selection = window.getSelection();
+
+        // remove current selection
+        selection.removeAllRanges();
+
+        var range = document.createRange();
+        var s = $(".motyw[theme-class='"+themeId+"']")[0];
+        var e = $(".end[theme-class='"+themeId+"']")[0];
+        // console.log('Selecting range:', themeId, range, s, e);
+
+        if(s && e) {
+            range.setStartAfter(s);
+            range.setEndBefore(e);
+            selection.addRange(range);
+            // highlight('yellow');
+            // selection.removeAllRanges();
+        }
+    };
+    
+    var button = $('<button class="edit-button">Edytuj</button>');
+    $(element).bind('mousemove', function(event) {
+        var editable = $(event.target).closest('*[x-editable]');
+        $('.active[x-editable]', element).not(editable).removeClass('active').children('.edit-button').remove();
+        if (!editable.hasClass('active')) {
+            editable.addClass('active').append(button);
+        }
+    });
+
+    $('.motyw').live('click', function() {
+        selectTheme($(this).attr('theme-class'));
+    });
+}
+
+

 $(function() {
     gallery('#sidebar');
 $(function() {
     gallery('#sidebar');

+    html('#html-view');

     
     CodeMirror.fromTextArea('id_text', {
         parserfile: 'parsexml.js',
     
     CodeMirror.fromTextArea('id_text', {
         parserfile: 'parsexml.js',


@@ -317,21 +413,7 @@ $(function() {
             $('.toolbar-buttons-container').hide();
             $('.toolbar select').change();
 
             $('.toolbar-buttons-container').hide();
             $('.toolbar select').change();
 

-            var button = $('<button class="edit-button">Edytuj</button>');
-            $('#html-view').bind('mousemove', function(event) {
-                var editable = $(event.target).closest('*[x-editable]');
-                $('#html-view .active[x-editable]').not(editable).removeClass('active').children('.edit-button').remove();
-                if (!editable.hasClass('active')) {
-                    editable.addClass('active').append(button);
-                }
-            });
-
-            $('.motyw').live('click', function() {
-                selectTheme($(this).attr('theme-class'));
-            });
-            

             $('#simple-view-tab').click();
             $('#simple-view-tab').click();

-            

         }
     });
     
         }
     });
     

diff --git a/platforma/templates/wiki/document_details.html b/platforma/templates/wiki/document_details.html
index 826ac64..b9a48eb 100644 (file)
--- a/platforma/templates/wiki/document_details.html
+++ b/platforma/templates/wiki/document_details.html
@@ -46,6 +46,8 @@
                     <button class="previous-page">⇽ Poprzednia</button>
                     <input type="text" size="3" maxlength="3" value="1" class="page-number" />
                     <button class="next-page">Następna ⇾</button>
                     <button class="previous-page">⇽ Poprzednia</button>
                     <input type="text" size="3" maxlength="3" value="1" class="page-number" />
                     <button class="next-page">Następna ⇾</button>

+                    <button class="zoom-in">Powiększ</button>
+                    <button class="zoom-out">Pomniejsz</button>

                     <div class="toolbar-end"> </div>
                 </div>
                 <div class="gallery-image">
                     <div class="toolbar-end"> </div>
                 </div>
                 <div class="gallery-image">