Zastąpienie splittera zwykłym chowaniem i pokazywaniem po kliknięciu.

diff --git a/platforma/static/css/html.css b/platforma/static/css/html.css
index 26ee658..d6a4487 100755 (executable)
--- a/platforma/static/css/html.css
+++ b/platforma/static/css/html.css
@@ -247,18 +247,26 @@
     font-variant: normal;
     text-decoration: none;
 
     font-variant: normal;
     text-decoration: none;
 

-    padding: 0.2em;

 
 

-    background-color: #efefef;
+    background-color: #fff;

     
     

-    border: 1px solid gray;
-    border-left: 2px dotted gray;
+/*    border: 1px solid gray;
+

     border-right: none;
     border-right: none;

-    
+*/    

     z-index: 1;
     -moz-user-select: -moz-none;
     -webkit-user-select: none;
     user-select: none;
     z-index: 1;
     -moz-user-select: -moz-none;
     -webkit-user-select: none;
     user-select: none;

+    margin-right: -12em;
+    text-align: left;
+}
+
+.htmlview .motyw[x-editable] {
+    border-left: 4px solid #DDD;
+    padding: 0.2em 0.2em 0.2em 0.5em;
+    margin-top: 0.2em;
+

 }
 
 /* 
 }
 
 /* 


@@ -269,7 +277,7 @@
 .htmlview .annotation {    
     vertical-align: super;
     text-decoration: none;
 .htmlview .annotation {    
     vertical-align: super;
     text-decoration: none;

-    font-size: 0.66em;    
+/*    font-size: 10px;    */

 }
 
 .htmlview .annotation:before {
 }
 
 .htmlview .annotation:before {


@@ -344,6 +352,9 @@
 
 .htmlview *[x-editable] {    
     position: relative;
 
 .htmlview *[x-editable] {    
     position: relative;

+    padding: 2px;
+    margin-left: 0;
+    border: 1px solid #FFF;

 }
 
 /* focused editable element */
 }
 
 /* focused editable element */


@@ -359,29 +370,27 @@
 
 .edit-button {
     position: absolute;
 
 .edit-button {
     position: absolute;

-    top: auto;
-    bottom: auto;
-    left: -50px;
+    top: -21px;
+    left: -1px;

     width: 50px;
     width: 50px;

-    height: 16px;
+    height: 21px;

     
     display: block;
 /*    margin: 4px 0 2px 0;*/
     
     display: block;
 /*    margin: 4px 0 2px 0;*/

-    padding: 0 5px 2px 5px;
+    padding: 5px 5px 2px 5px;

     border: none;
     border: none;

-    background: none;
+    background-color: #FAFAFA;

     
     

-    z-index: 3000;
-    color: #777;
+/*    z-index: 3000;*/
+/*    color: #FFF;
+    z-index: 1500;
+*/    border: 1px solid #DDD;
+    border-bottom: none;

 }
 
 
 .edit-button:hover, .edit-button:active {
 }
 
 
 .edit-button:hover, .edit-button:active {

-    background: #A2A2A2;

     color: #FFF;
     color: #FFF;

-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;

 }
 
 /*
 }
 
 /*

diff --git a/platforma/static/css/master.css b/platforma/static/css/master.css
index 6239684..e3d0b9c 100755 (executable)
--- a/platforma/static/css/master.css
+++ b/platforma/static/css/master.css
@@ -6,20 +6,23 @@ body {
 }
 
 .vsplitbar {
 }
 
 .vsplitbar {

+    position: absolute;
+    top: 25px;
+    bottom: 0;
+    right: 0;;

     width: 14px;
     background: #EEE url(/static/img/gallery.png) no-repeat scroll center center;
     border-left: 1px solid #999;
     cursor: col-resize;
 }
 
     width: 14px;
     background: #EEE url(/static/img/gallery.png) no-repeat scroll center center;
     border-left: 1px solid #999;
     cursor: col-resize;
 }
 

-.active {
-    background-color: #DDD;
-}
-
-#simple-editor {
-    height: 100%;
+#source-editor, #simple-editor {
+    position: absolute;
+    top: 25px;
+    bottom: 0;
+    left: 0;
+    right: 15px;

     overflow: hidden;
     overflow: hidden;

-    position: relative;

 }
 
 #html-view {
 }
 
 #html-view {


@@ -32,7 +35,14 @@ body {
 }
 
 #sidebar {
 }
 
 #sidebar {

+    position: absolute;

     overflow: auto;
     overflow: auto;

+    top: 25px;
+    right: 0;
+    bottom: 0;
+    width: 0;
+    display: none;
+    background-color: #FFF;

 }
 
 #header {
 }
 
 #header {


@@ -94,7 +104,7 @@ body {
     background-color: #C1C1C1;
     margin: 0;
     padding: 2px;
     background-color: #C1C1C1;
     margin: 0;
     padding: 2px;

-    height: 22px;
+/*    height: 22px;*/

 }
 
 .toolbar select {
 }
 
 .toolbar select {


@@ -132,4 +142,14 @@ button::-moz-focus-inner {
     padding: 0;
 }
 
     padding: 0;
 }
 

-p { margin: 0;}
\ No newline at end of file
+p { margin: 0;}
+
+.htmlview *[x-editable] {
+    background-color: white;
+}
+
+.htmlview .active[x-editable] {
+    background-color: #FAFAFA;
+    border: 1px solid #DDD;
+/*    -webkit-transition: all 1s linear;*/
+}
\ No newline at end of file

diff --git a/platforma/static/js/main.js b/platforma/static/js/main.js
index edd92c5..284fd19 100644 (file)
--- a/platforma/static/js/main.js
+++ b/platforma/static/js/main.js
@@ -58,151 +58,209 @@ function serialize(element) {
     return result;
 };
 
     return result;
 };
 

+function highlight(colour) {
+    var range, sel;
+    if (window.getSelection) {
+        // Non-IE case
+        sel = window.getSelection();
+        if (sel.getRangeAt) {
+            range = sel.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (range) {
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+        // Use HiliteColor since some browsers apply BackColor to the whole block
+        if ( !document.execCommand("HiliteColor", false, colour) ) {
+            document.execCommand("BackColor", false, colour);
+        }
+        document.designMode = "off";
+    } else if (document.selection && document.selection.createRange) {
+        // IE case
+        range = document.selection.createRange();
+        range.execCommand("BackColor", false, 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());
+//         $(this).remove();
+//     });
+// }

 
 $(function() {
 
 $(function() {

-    var editor = CodeMirror.fromTextArea('id_text', {
+    CodeMirror.fromTextArea('id_text', {

         parserfile: 'parsexml.js',
         path: "/static/js/lib/codemirror/",
         stylesheet: "/static/css/xmlcolors.css",
         parserConfig: {
             useHTMLKludges: false
         },
         parserfile: 'parsexml.js',
         path: "/static/js/lib/codemirror/",
         stylesheet: "/static/css/xmlcolors.css",
         parserConfig: {
             useHTMLKludges: false
         },

+        iframeClass: 'xml-iframe',

         textWrapping: true,
         tabMode: 'spaces',
         indentUnit: 0,
         textWrapping: true,
         tabMode: 'spaces',
         indentUnit: 0,

-    });
-    
-    $('#splitter').splitter({
-        type: "v",
-        outline: true,
-        minLeft: 480,
-        sizeRight: 0,
-        anchorToWindow: true,
-        resizeToWidth: true,
+        initCallback: function(editor) {
+            
+            function createXSLT(xsl) {
+                var p = new XSLTProcessor();
+                p.importStylesheet(xsl);
+                return p;
+            }
+
+            function transform() {
+                $.ajax({
+                    url: '/static/xsl/wl2html_client.xsl',
+                    dataType: 'xml',
+                    success: function(data) {
+                        var doc = null;
+                        var parser = new DOMParser();
+                        var serializer = new XMLSerializer();
+                        var htmlXSL = createXSLT(data);
+
+                        doc = editor.getCode().replace(/\/\s+/g, '<br />');
+                        doc = parser.parseFromString(doc, 'text/xml');
+                        console.log('xml', doc);
+                        doc = htmlXSL.transformToFragment(doc, document);
+                        console.log('after transform', doc);
+                        $('#html-view').html(doc.firstChild);
+                    },
+                    error: function() {alert('Error loading XSL!')}
+                });        
+            };
+
+            function reverseTransform () {
+                $.ajax({
+                    url: '/static/xsl/html2wl_client.xsl',
+                    dataType: 'xml',
+                    success: function(data) {
+                        var doc = null;
+                        var parser = new DOMParser();
+                        var serializer = new XMLSerializer();
+                        var xsl = createXSLT(data);
+
+                        doc = serializer.serializeToString($('#html-view div').get(0))
+                        doc = parser.parseFromString(doc, 'text/xml');
+                        console.log('xml',doc, doc.documentElement);
+                        // TODO: Sprawdzenie błędów
+                        doc = xsl.transformToDocument(doc);
+                        console.log('after transform', doc, doc.documentElement);
+                        doc = serialize(doc.documentElement).join('');
+                        // doc = serializer.serializeToString(doc.documentElement)
+                        editor.setCode(doc);
+                    },
+                    error: function() {alert('Error loading XSL!')}
+                });
+            };
+
+            $('#save-button').click(function(event) {
+                event.preventDefault();
+                console.log(editor.getCode(), $('form input[name=text]').get(0));
+                $('form textarea[name=text]').val(editor.getCode());
+                $('form').ajaxSubmit(function() {
+                    alert('Udało się!');
+                });
+            });
+
+            $('#simple-view-tab').click(function() {
+                if ($(this).hasClass('active')) {
+                    return;
+                }
+                $(this).addClass('active');
+                $('#source-view-tab').removeClass('active');
+                $('#source-editor').hide();
+                $('#simple-editor').show();
+                transform();
+            });
+
+            $('#source-view-tab').click(function() {
+                if ($(this).hasClass('active')) {
+                    return;
+                }
+                $(this).addClass('active');
+                $('#simple-view-tab').removeClass('active');
+                $('#simple-editor').hide();
+                $('#source-editor').show();
+                reverseTransform();
+            });
+
+            $('.toolbar button').click(function(event) {
+                event.preventDefault();
+                var params = eval("(" + $(this).attr('ui:action-params') + ")");
+                scriptletCenter.scriptlets[$(this).attr('ui:action')](editor, params);
+            });
+
+            $('.toolbar select').change(function() {
+                var slug = $(this).val();
+
+                $('.toolbar-buttons-container').hide().filter('[data-group=' + slug + ']').show();
+                $(window).resize();
+            });
+
+            $('.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();
+            
+        }

     });
     
     $(window).resize(function() {
     });
     
     $(window).resize(function() {

-        $('iframe').height($(window).height() - $('#tabs').outerHeight());
+        $('iframe').height($(window).height() - $('#tabs').outerHeight() - $('#source-editor .toolbar').outerHeight());

     });
     
     $(window).resize();
     
     });
     
     $(window).resize();
     

-    $('.vsplitbar').dblclick(function() {
+    $('.vsplitbar').click(function() {

         if ($('#sidebar').width() == 0) {
         if ($('#sidebar').width() == 0) {

-            $('#splitter').trigger('resize', [$(window).width() - 480]);
+            $('#sidebar').width(480).show();
+            $('#source-editor, #simple-editor').css({right: 495});
+            $('.vsplitbar').css({right: 480})
+            // $('#splitter').trigger('resize', [$(window).width() - 480]);

         } else {
         } else {

-            $('#splitter').trigger('resize', [$(window).width()]);
+            $('#sidebar').width(0).hide();
+            $('#source-editor, #simple-editor').css({right: 15});
+            $('.vsplitbar').css({right: 0});
+            // $('#splitter').trigger('resize', [$(window).width()]);

         }
         }

+        $(window).resize();

     });
     });

-
-    loadSuccess = function() {
-        if (this.get('state') != 'loading') {
-            alert('erroneous state:', this.get('state'));
-        }
-    }

                 
                 

-    function createXSLT(xsl) {
-        var p = new XSLTProcessor();
-        p.importStylesheet(xsl);
-        return p;
-    }
-    
-    function transform() {
-        $.ajax({
-            url: '/static/xsl/wl2html_client.xsl',
-            dataType: 'xml',
-            success: function(data) {
-                var doc = null;
-                var parser = new DOMParser();
-                var serializer = new XMLSerializer();
-                var htmlXSL = createXSLT(data);
-                
-                doc = editor.getCode().replace(/\/\s+/g, '<br />');
-                doc = parser.parseFromString(doc, 'text/xml');
-                console.log('xml', doc);
-                doc = htmlXSL.transformToFragment(doc, document);
-                console.log('after transform', doc);
-                $('#html-view').html(doc.firstChild);
-            },
-            error: function() {alert('Error loading XSL!')}
-        });        
-    };
-    
-    function reverseTransform () {
-        $.ajax({
-            url: '/static/xsl/html2wl_client.xsl',
-            dataType: 'xml',
-            success: function(data) {
-                var doc = null;
-                var parser = new DOMParser();
-                var serializer = new XMLSerializer();
-                var xsl = createXSLT(data);
-                
-                doc = serializer.serializeToString($('#html-view div').get(0))
-                doc = parser.parseFromString(doc, 'text/xml');
-                console.log('xml',doc, doc.documentElement);
-                // TODO: Sprawdzenie błędów
-                doc = xsl.transformToDocument(doc);
-                console.log('after transform', doc, doc.documentElement);
-                doc = serialize(doc.documentElement).join('');
-                // doc = serializer.serializeToString(doc.documentElement)
-                editor.setCode(doc);
-            },
-            error: function() {alert('Error loading XSL!')}
-        });
-    };
-    
-    $('#save-button').click(function(event) {
-        event.preventDefault();
-        console.log(editor.getCode(), $('form input[name=text]').get(0));
-        $('form textarea[name=text]').val(editor.getCode());
-        $('form').ajaxSubmit(function() {
-            alert('Udało się!');
-        });
-    });
-    
-    $('#simple-view-tab').click(function() {
-        if ($(this).hasClass('active')) {
-            return;
-        }
-        $(this).addClass('active');
-        $('#source-view-tab').removeClass('active');
-        $('#source-editor').hide();
-        $('#simple-editor').show();
-        transform();
-    });
-    
-    $('#source-view-tab').click(function() {
-        if ($(this).hasClass('active')) {
-            return;
-        }
-        $(this).addClass('active');
-        $('#simple-view-tab').removeClass('active');
-        $('#simple-editor').hide();
-        $('#source-editor').show();
-        reverseTransform();
-    });
-    
-    $('.toolbar button').click(function(event) {
-        event.preventDefault();
-        var params = eval("(" + $(this).attr('ui:action-params') + ")");
-        scriptletCenter.scriptlets[$(this).attr('ui:action')](editor, params);
-    });
-    
-    $('.toolbar select').change(function() {
-        var slug = $(this).val();
-        
-        $('.toolbar-buttons-container').hide().filter('[data-group=' + slug + ']').show();
-    });
-    
-    $('.toolbar-buttons-container').hide();
-    $('.toolbar select').change();
-    
-    // $('#html-view *[x-editable]').live('mouseover', function() {
-    //     $(this).css({backgroundColor: 'red', marginLeft: -50, paddingLeft: 50});
-    //     $(this).append('<button class="edit-button">Edytuj</button>');
-    // }).live('mouseout', function() {
-    //     $(this).css({backgroundColor: null, marginLeft: 0, paddingLeft: 0});
-    //     $('.edit-button', this).remove();
-    // });
+

 });
 });

diff --git a/platforma/static/xsl/wl2html_client.xsl b/platforma/static/xsl/wl2html_client.xsl
index 3b44fbd..517d59b 100755 (executable)
--- a/platforma/static/xsl/wl2html_client.xsl
+++ b/platforma/static/xsl/wl2html_client.xsl
@@ -212,7 +212,7 @@
     -->
     <xsl:template match="motto">
         <xsl:param name="mixed" />
     -->
     <xsl:template match="motto">
         <xsl:param name="mixed" />

-        <div>
+        <div x-editable="true">

             <xsl:call-template name="standard-attributes" />
             <xsl:apply-templates select="child::node()">
                 <xsl:with-param name="mixed" select="true()" />
             <xsl:call-template name="standard-attributes" />
             <xsl:apply-templates select="child::node()">
                 <xsl:with-param name="mixed" select="true()" />


@@ -432,7 +432,7 @@
 
     <xsl:template match="didaskalia">
         <xsl:param name="mixed" />
 
     <xsl:template match="didaskalia">
         <xsl:param name="mixed" />

-        <div>
+        <div x-editable="true">

             <xsl:call-template name="standard-attributes" />
             <xsl:apply-templates select="child::node()">
                 <xsl:with-param name="mixed" select="true()" />
             <xsl:call-template name="standard-attributes" />
             <xsl:apply-templates select="child::node()">
                 <xsl:with-param name="mixed" select="true()" />


@@ -729,7 +729,7 @@
 
     <xsl:template name="context-menu">
         <!-- <span class="default-menu context-menu"> -->
 
     <xsl:template name="context-menu">
         <!-- <span class="default-menu context-menu"> -->

-        <button class="edit-button">Edytuj</button>
+        <!-- <button class="edit-button">Edytuj</button> -->

             <!-- <span class="delete-button">Delete</span> -->
         <!-- </span> -->
         <!-- <span class="edit-menu context-menu">
             <!-- <span class="delete-button">Delete</span> -->
         <!-- </span> -->
         <!-- <span class="edit-menu context-menu">

diff --git a/platforma/templates/wiki/document_details.html b/platforma/templates/wiki/document_details.html
index 9fabcff..742566d 100644 (file)
--- a/platforma/templates/wiki/document_details.html
+++ b/platforma/templates/wiki/document_details.html
@@ -5,7 +5,6 @@
     <link rel="stylesheet" href="{{STATIC_URL}}css/master.css" type="text/css" media="screen" charset="utf-8" />
     <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" media="screen" charset="utf-8" />
     <script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
     <link rel="stylesheet" href="{{STATIC_URL}}css/master.css" type="text/css" media="screen" charset="utf-8" />
     <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" media="screen" charset="utf-8" />
     <script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>

-    <script src="{{STATIC_URL}}js/lib/jquery.splitter.js" type="text/javascript" charset="utf-8"></script>

     <script src="{{STATIC_URL}}js/lib/jquery.form.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{STATIC_URL}}js/button_scripts.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{STATIC_URL}}js/main.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{STATIC_URL}}js/lib/jquery.form.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{STATIC_URL}}js/button_scripts.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{STATIC_URL}}js/main.js" type="text/javascript" charset="utf-8"></script>


@@ -41,8 +40,8 @@
                     </div>
                 </div>
             </div>
                     </div>
                 </div>
             </div>

-
-            <div id="sidebar" style="width: 200px">
+            <div class="vsplitbar"> </div>
+            <div id="sidebar">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             </div>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             </div>