From 825884d5336fece8448c24c002ddae8a93dca50d Mon Sep 17 00:00:00 2001 From: zuber Date: Tue, 8 Dec 2009 15:13:16 +0100 Subject: [PATCH] =?utf8?q?Przeniesienie=20styl=C3=B3w=20i=20javascriptu=20?= =?utf8?q?do=20osobnych=20plik=C3=B3w.?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- platforma/static/css/html.css | 66 +-- platforma/static/css/master.css | 376 +++++------------- platforma/static/js/main.js | 208 ++++++++++ platforma/static/xsl/wl2html_client.xsl | 12 +- .../templates/wiki/document_details.html | 352 +--------------- 5 files changed, 331 insertions(+), 683 deletions(-) create mode 100644 platforma/static/js/main.js diff --git a/platforma/static/css/html.css b/platforma/static/css/html.css index c00b5f1d..26ee658c 100755 --- a/platforma/static/css/html.css +++ b/platforma/static/css/html.css @@ -343,7 +343,7 @@ */ .htmlview *[x-editable] { - padding-left: 3px; + position: relative; } /* focused editable element */ @@ -357,61 +357,31 @@ visibility: hidden; } -.context-menu { +.edit-button { position: absolute; - top: 0px; + top: auto; + bottom: auto; left: -50px; width: 50px; + height: 16px; - text-align: center; - font-size: 11px; - line-height: 15px; - - font-weight: normal; - font-style: normal; - - background-color: #dfdfdf; - - margin: 0px; - padding: 0px; - visibility: inherit; display: block; - - border-top: 1px solid black; - border-left: 1px solid black; - border-bottom: 1px solid black; - - overflow: hidden; +/* margin: 4px 0 2px 0;*/ + padding: 0 5px 2px 5px; + border: none; + background: none; - -moz-border-radius-topleft: 2px; - -moz-border-radius-bottomleft: 2px; - - -webkit-border-top-left-radius: 2px; - -webkit-border-bottom-left-radius: 2px; - z-index: 3000; + color: #777; } -.context-menu * { - margin: 0px; - display: block; - - -moz-user-select: -moz-none; - -webkit-user-select: none; - - padding: 2px; - cursor: pointer; - border-bottom: 1px solid black; - -} - -.context-menu *:last-child { - cursor: pointer; - border-bottom: none; -} -.context-menu *:hover { - background-color: orange; +.edit-button:hover, .edit-button:active { + background: #A2A2A2; + color: #FFF; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; } /* @@ -480,7 +450,7 @@ /* Theme edit dialog /* /*/ -#theme-edit-dialog { +/*#theme-edit-dialog { left: 5%; right: 5%; top: 5%; @@ -539,4 +509,4 @@ #theme-edit-dialog .theme-mutli-list input:checked + label { font-weight: bold; -} \ No newline at end of file +}*/ \ No newline at end of file diff --git a/platforma/static/css/master.css b/platforma/static/css/master.css index 874d9e12..62396843 100755 --- a/platforma/static/css/master.css +++ b/platforma/static/css/master.css @@ -1,333 +1,135 @@ body { - margin: 0; - - font: 12px Helvetica, Verdana, sans-serif; + margin: 0; overflow: hidden; - background: #AAA; -} - -#body-wrap { - margin: 0px; - padding: 0px; - position: fixed; - left: 0px; - right: 0px; - bottom: 0px; - top: 0px; -} - -#header { - position: absolute; - padding: 2px 0.5em; - background-color: #CDCDCD; /* !unused */ - border-bottom: 2px solid black; - - font-size: 14px; - - line-height: 26px; - vertical-align: middle; - - /* height: 30px; */ - top: 0px; left: 0px; right: 0px; - z-index: 300; -} - -#content { - position: absolute; - top: 32px; left: 0px; right: 0px; bottom: 0px; - overflow: auto; - background-color: white; -} - -#header #breadcrumbs { -} - -#header-right-toolbar { - position: absolute; - right: 1em; -} - -/* Commit dialog */ -#commit-dialog-error-empty-message { - color: red; - display: none; - font-weight: bold; -} - -text#commit-dialog-message { - width: 80%; - margin: auto; -} - -#split-dialog .container-box form { - margin: 0.2em 1em; -} - -#split-dialog .container-box fieldset { - margin: 0.5em; -} - - - - -/* ======= */ -/* = New = */ -/* ======= */ -#splitview { - width: 100%; - height: 100%; padding: 0; - margin: 0; + min-width: 960px; } -.splitview-splitbar { - width: 5px; +.vsplitbar { + width: 14px; + background: #EEE url(/static/img/gallery.png) no-repeat scroll center center; border-left: 1px solid #999; - border-right: 1px solid #999; - height: 100%; - background-color: #CCC; - z-index: 5100; + cursor: col-resize; } -.splitview-overlay { - z-index: 5000; - background: #FFF; - opacity: 0.5; +.active { + background-color: #DDD; } -.panel-container { +#simple-editor { height: 100%; + overflow: hidden; position: relative; } -.content-view { +#html-view { + overflow: auto; position: absolute; - top: 25px; - right: 0; + top: 27px; bottom: 0; left: 0; - overflow: hidden; -} - -.panel-main-toolbar { - z-index: 1100; - position: absolute; - - top: 0px; - right: 0px; - left: 0px; - height: 24px; - - border-bottom: 1px solid black; - background: gray; - - padding: 0px; -} - -.panel-main-toolbar p { - margin: 0px; - padding: 2px; - line-height: 20px; - font-size: 13px; -} - -.xmlview { - height: 100%; -} - -.view-overlay { - display: none; - z-index: 0; - background: #FFF; - text-align: center; - vertical-align: middle; - - position: absolute; - left: 0; right: 0; - top: 0; - bottom: 0; - - /* user-select: 'none'; - -webkit-user-select: 'none'; - -khtml-user-select: 'none'; - -moz-user-select: 'none'; */ - - overflow: 'hidden'; -} - -.view-overlay div { - position: absolute; } -/* .buttontoolbarview { - display: block; - background-color: #CCC; -} - -.buttontoolbarview a { - color: #000; - text-decoration: none; -} */ /* Similar classes already exist in toolbar.css */ - - -/* ================= */ -/* = Gallery panel = */ -/* ================= */ -.image-gallery-view-template { - position: absolute; - top: 0px; left: 0px; right: 0px; bottom: 0px; - overflow: hidden; +#sidebar { + overflow: auto; } -.image-gallery-header { - position: absolute; - bottom: 0px; - left: 0px; - right: 0px; - height: 30px; - - background: gray; - border-top: 1px solid #780000; - z-index: 100; +#header { + margin: 0; + padding: 0; + background-color: #C1C1C1; + background-image: -webkit-gradient(linear, left top, left bottom, from(#C1C1C1), color-stop(0.9, #A2A2A2)); + font: 11px Helvetica, Verdana, sans-serif; + font-weight: bold; } -input.image-gallery-current-page { - text-align: center; +#header h1 { + margin: 0; + padding: 0; + font: 17px Helvetica, Verdana, sans-serif; + font-weight: bold; + float: left; + padding: 3px 6px 2px 6px; + color: #222; + line-height: 20px; } -.image-gallery-header p { - margin: 0px; - padding: 3px 1em; - height: 30px; - line-height: 24px; - text-align: center; - white-space: nowrap; +#tabs { + margin: 0; + padding: 0; + + width: 100%; + height: 22px; + padding-top: 2px; + border-bottom: 1px solid #999; } -.image-gallery-page-list { - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 31px; - background: black; - z-index: 0; - - overflow: hidden; +#tabs li { + -webkit-user-select: none; + cursor: default; + display: block; + float: left; + padding: 5px 12px 3px 12px; + border: 1px solid #999; + -webkit-border-radius: 4px; + -webkit-border-bottom-left-radius: 0; + -webkit-border-bottom-right-radius: 0; + font-weight: bold; + color: #222; + height: 13px; + -webkit-box-shadow: 1px -1px 2px rgba(127, 127, 127, 0.25); + margin-left: 4px; + margin-bottom: -1px; + background-color: #A2A2A2; } -.image-gallery-page-container { - display: none; - border: none; - - position: absolute; - top: 0px; left: 0px; - - text-align: center; - padding: 0px; +#tabs li.active { + background-color: #C1C1C1; + border-bottom: 1px solid #C1C1C1; } -.htmlview { - position: absolute; - top: 25px; - right: 0; - bottom: 0; - left: 0; - overflow: auto; +.toolbar { + border-bottom: 1px solid #777; + background-color: #C1C1C1; margin: 0; + padding: 2px; + height: 22px; } -.image-gallery-page-container img { - /* border: 2px solid green; */ - margin: 0px; -} - - -/* ================= */ -/* = Message boxes = */ -/* ================= */ -.info { - background-color: gray; +.toolbar select { + float: left; + margin: 2px 5px 2px 0; + background: none; + border: 1px solid #999; + padding: 1px; } -.success { - background-color: green; +.toolbar button { + display: block; + float: left; + margin: 4px 0 2px 0; + padding: 0 5px 2px 5px; + border: none; + background: none; } -.error { - background-color: yellow; +.toolbar-end { + clear: both; } -.critical { - background-color: red; +.toolbar button:hover, .toolbar button:active { + background: #777; + color: #FFF; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; } - - -/* - * - * Buttons - * - */ -*.button { - /* reset margin and padding and see what happens */ +/* Remove extra padding in Firefox */ +button::-moz-focus-inner { + border: 0; padding: 0; - margin: 0; - border: 2px solid blue; - - /* - * Borders and padding: - */ - - /* observation 1: Firefox doesn't apply top/bottom borders to spans in button */ - /* observation 2: Webkit leaves out some padding to left/right - also: it cuts the top/bottom margin to 1px max */ - - /* observation 3: Opera does the oposite then WK and FF -> - span has all borders, button has only left/right - */ - - /* Line Height */ - - /* 1. Wszystkie przeglądarki, domyślnie ustawiają vertical-align: baseline */ - vertical-align: baseline; - - /* 2. Opera ustawia rozmiar przycisku, na rozmiar line-height obiektu, który go zawiera */ - - display: inline-block; - position: relative; - background: yellow; - padding: 2px 4px; - - font-size: 16pt; - text-decoration: none; -} - -*.button:active { - background: aqua; -} - -*.button > span.upper-bg { - position: absolute; - top: 0px; - left: 2px; - right: 0px; - bottom: 5px; - - margin: 0px; - - background-color: white; - z-index: 0; - display: block; -} - -*.button > span.button-text { - position: relative; - margin: 0px; - display: inline-block; - z-index: 2; - background: blue; - opacity: 0.5; } +p { margin: 0;} \ No newline at end of file diff --git a/platforma/static/js/main.js b/platforma/static/js/main.js new file mode 100644 index 00000000..edd92c59 --- /dev/null +++ b/platforma/static/js/main.js @@ -0,0 +1,208 @@ +function serialize(element) { + if (element.nodeType == 3) { // tekst + return [$.trim(element.nodeValue)]; + } else if (element.nodeType != 1) { // pomijamy węzły nie będące elementami XML ani tekstem + return []; + } + + var result = []; + var hasContent = false; + + result.push('<'); + result.push(element.tagName); + + // Mozilla nie uważa deklaracji namespace za atrybuty + var ns = element.tagName.indexOf(':'); + if (ns != -1 && $.browser.mozilla) { + result.push(' xmlns:'); + result.push(element.tagName.substring(0, ns)); + result.push('="'); + result.push(element.namespaceURI); + result.push('"'); + } + + if (element.attributes) { + for (var i=0; i < element.attributes.length; i++) { + var attr = element.attributes[i]; + result.push(' '); + result.push(attr.name); + result.push('="'); + result.push(attr.value); + result.push('"'); + hasContent = true; + } + } + + if (element.childNodes.length == 0) { + result.push(' />'); + } else { + result.push('>'); + + for (var i=0; i < element.childNodes.length; i++) { + result = result.concat(serialize(element.childNodes[i])); + } + + result.push(''); + } + + if (element.tagName == 'akap' || element.tagName == 'akap_dialog' || element.tagName == 'akap_cd') { + result.push('\n\n\n'); + } else if (element.tagName == 'rdf:RDF') { + result.push('\n\n\n\n\n'); + } else if (element.tagName.indexOf('dc:') != -1) { + result.push('\n'); + } + + return result; +}; + + +$(function() { + var editor = CodeMirror.fromTextArea('id_text', { + parserfile: 'parsexml.js', + path: "/static/js/lib/codemirror/", + stylesheet: "/static/css/xmlcolors.css", + parserConfig: { + useHTMLKludges: false + }, + textWrapping: true, + tabMode: 'spaces', + indentUnit: 0, + }); + + $('#splitter').splitter({ + type: "v", + outline: true, + minLeft: 480, + sizeRight: 0, + anchorToWindow: true, + resizeToWidth: true, + }); + + $(window).resize(function() { + $('iframe').height($(window).height() - $('#tabs').outerHeight()); + }); + + $(window).resize(); + + $('.vsplitbar').dblclick(function() { + if ($('#sidebar').width() == 0) { + $('#splitter').trigger('resize', [$(window).width() - 480]); + } else { + $('#splitter').trigger('resize', [$(window).width()]); + } + }); + + 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 b544a313..3b44fbd6 100755 --- a/platforma/static/xsl/wl2html_client.xsl +++ b/platforma/static/xsl/wl2html_client.xsl @@ -728,14 +728,14 @@ - - Edit - Delete - - + + + + + diff --git a/platforma/templates/wiki/document_details.html b/platforma/templates/wiki/document_details.html index 64fc89a2..9fabcff4 100644 --- a/platforma/templates/wiki/document_details.html +++ b/platforma/templates/wiki/document_details.html @@ -2,351 +2,13 @@ {% load toolbar_tags %} {% block extrahead %} - + + - - - + {% endblock %} {% block maincontent %} @@ -370,7 +32,13 @@ - -- 2.20.1