From 6da03c3c5f257a0123cd283469459668fd653fe4 Mon Sep 17 00:00:00 2001 From: zuber Date: Fri, 11 Dec 2009 13:57:31 +0100 Subject: [PATCH] =?utf8?q?Zast=C4=85pienie=20splittera=20zwyk=C5=82ym=20ch?= =?utf8?q?owaniem=20i=20pokazywaniem=20po=20klikni=C4=99ciu.?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- platforma/static/css/html.css | 45 +-- platforma/static/css/master.css | 38 ++- platforma/static/js/main.js | 306 +++++++++++------- platforma/static/xsl/wl2html_client.xsl | 6 +- .../templates/wiki/document_details.html | 5 +- 5 files changed, 243 insertions(+), 157 deletions(-) diff --git a/platforma/static/css/html.css b/platforma/static/css/html.css index 26ee658c..d6a44874 100755 --- a/platforma/static/css/html.css +++ b/platforma/static/css/html.css @@ -247,18 +247,26 @@ 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; - +*/ 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; - font-size: 0.66em; +/* font-size: 10px; */ } .htmlview .annotation:before { @@ -344,6 +352,9 @@ .htmlview *[x-editable] { position: relative; + padding: 2px; + margin-left: 0; + border: 1px solid #FFF; } /* focused editable element */ @@ -359,29 +370,27 @@ .edit-button { position: absolute; - top: auto; - bottom: auto; - left: -50px; + top: -21px; + left: -1px; width: 50px; - height: 16px; + height: 21px; display: block; /* margin: 4px 0 2px 0;*/ - padding: 0 5px 2px 5px; + padding: 5px 5px 2px 5px; 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 { - background: #A2A2A2; 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 62396843..e3d0b9c8 100755 --- a/platforma/static/css/master.css +++ b/platforma/static/css/master.css @@ -6,20 +6,23 @@ body { } .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; } -.active { - background-color: #DDD; -} - -#simple-editor { - height: 100%; +#source-editor, #simple-editor { + position: absolute; + top: 25px; + bottom: 0; + left: 0; + right: 15px; overflow: hidden; - position: relative; } #html-view { @@ -32,7 +35,14 @@ body { } #sidebar { + position: absolute; overflow: auto; + top: 25px; + right: 0; + bottom: 0; + width: 0; + display: none; + background-color: #FFF; } #header { @@ -94,7 +104,7 @@ body { background-color: #C1C1C1; margin: 0; padding: 2px; - height: 22px; +/* height: 22px;*/ } .toolbar select { @@ -132,4 +142,14 @@ button::-moz-focus-inner { 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 edd92c59..284fd197 100644 --- a/platforma/static/js/main.js +++ b/platforma/static/js/main.js @@ -58,151 +58,209 @@ function serialize(element) { 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() { - 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 }, + iframeClass: 'xml-iframe', 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, '
'); + 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 = $(''); + $('#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() { - $('iframe').height($(window).height() - $('#tabs').outerHeight()); + $('iframe').height($(window).height() - $('#tabs').outerHeight() - $('#source-editor .toolbar').outerHeight()); }); $(window).resize(); - $('.vsplitbar').dblclick(function() { + $('.vsplitbar').click(function() { 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 { - $('#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, '
'); - 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(''); - // }).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 3b44fbd6..517d59bc 100755 --- a/platforma/static/xsl/wl2html_client.xsl +++ b/platforma/static/xsl/wl2html_client.xsl @@ -212,7 +212,7 @@ --> -
+
@@ -432,7 +432,7 @@ -
+
@@ -729,7 +729,7 @@ - +