Przeniesienie stylów i javascriptu do osobnych plików.
authorzuber <marek@stepniowski.com>
Tue, 8 Dec 2009 14:13:16 +0000 (15:13 +0100)
committerzuber <marek@stepniowski.com>
Tue, 8 Dec 2009 14:13:16 +0000 (15:13 +0100)
platforma/static/css/html.css
platforma/static/css/master.css
platforma/static/js/main.js [new file with mode: 0644]
platforma/static/xsl/wl2html_client.xsl
platforma/templates/wiki/document_details.html

index c00b5f1..26ee658 100755 (executable)
  */
 
 .htmlview *[x-editable] {    
  */
 
 .htmlview *[x-editable] {    
-    padding-left: 3px;
+    position: relative;
 }
 
 /* focused editable element */
 }
 
 /* focused editable element */
     visibility: hidden;
 }
 
     visibility: hidden;
 }
 
-.context-menu {
+.edit-button {
     position: absolute;
     position: absolute;
-    top: 0px;
+    top: auto;
+    bottom: auto;
     left: -50px;
     width: 50px;
     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;
     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;
     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;
 }
 
 /*
 }
 
 /*
 /* Theme edit dialog
 /*
 /*/
 /* Theme edit dialog
 /*
 /*/
-#theme-edit-dialog {    
+/*#theme-edit-dialog {    
     left: 5%;
     right: 5%;
     top: 5%;
     left: 5%;
     right: 5%;
     top: 5%;
 
 #theme-edit-dialog .theme-mutli-list input:checked + label {
     font-weight: bold;
 
 #theme-edit-dialog .theme-mutli-list input:checked + label {
     font-weight: bold;
-}
\ No newline at end of file
+}*/
\ No newline at end of file
index 874d9e1..6239684 100755 (executable)
 body {
 body {
-    margin: 0;    
-
-    font: 12px Helvetica, Verdana, sans-serif;
+    margin: 0;
     overflow: hidden;
     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;
     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-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%;
     height: 100%;
+    overflow: hidden;
     position: relative;
 }
 
     position: relative;
 }
 
-.content-view {
+#html-view {
+    overflow: auto;
     position: absolute;
     position: absolute;
-    top: 25px;
-    right: 0;
+    top: 27px;
     bottom: 0;
     left: 0;
     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;
     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;
     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;
     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 (file)
index 0000000..edd92c5
--- /dev/null
@@ -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('</');
+        result.push(element.tagName);
+        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, '<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();
+    // });
+});
index b544a31..3b44fbd 100755 (executable)
     </xsl:template>
 
     <xsl:template name="context-menu">
     </xsl:template>
 
     <xsl:template name="context-menu">
-        <span class="default-menu context-menu">
-            <span class="edit-button">Edit</span>
-            <span class="delete-button">Delete</span>
-        </span>
-        <span class="edit-menu context-menu">
+        <!-- <span class="default-menu context-menu"> -->
+        <button class="edit-button">Edytuj</button>
+            <!-- <span class="delete-button">Delete</span> -->
+        <!-- </span> -->
+        <!-- <span class="edit-menu context-menu">
             <span class="accept-button">Accept</span>
             <span class="reject-button">Close</span>
             <span class="accept-button">Accept</span>
             <span class="reject-button">Close</span>
-        </span>
+        </span> -->
     </xsl:template>
 
     <xsl:template name="standard-attributes">
     </xsl:template>
 
     <xsl:template name="standard-attributes">
index 64fc89a..9fabcff 100644 (file)
 {% load toolbar_tags %}
 
 {% block extrahead %}
 {% load toolbar_tags %}
 
 {% block extrahead %}
-    <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" media="screen" charset="utf-8">
+    <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/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 type="text/javascript" charset="utf-8">
-    
-        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('</');
-                result.push(element.tagName);
-                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_URL }}js/lib/codemirror/",
-                stylesheet: "{{ STATIC_URL }}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'));
-                }
-
-                // prepare text
-                var doc = null;
-
-                messageCenter.addMessage('success', 'xmlload', 'Wczytałem HTML :-)');
-            }
-                        
-            function createXSLT(xsl) {
-                var p = new XSLTProcessor();
-                p.importStylesheet(xsl);
-                return p;
-            }
-            
-            function transform() {
-                $.ajax({
-                    url: '{{ STATIC_URL }}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);
-                        $('#simple-editor').html(doc.firstChild);
-                    },
-                    error: function() {alert('Error loading XSL!')}
-                });        
-            };
-            
-            function reverseTransform () {
-                $.ajax({
-                    url: '{{ STATIC_URL }}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($('#simple-editor 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();
-        });
-    </script>
-    
-    <style type="text/css" media="screen">
-    
-        body {
-            margin: 0;
-            overflow: hidden;
-            padding: 0;
-            min-width: 960px;
-        }
-        
-        .vsplitbar {
-            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 {
-            overflow: auto;
-            height: 100%;
-        }
-        
-        #sidebar {
-            overflow: auto;
-/*            padding: 5px; */
-        }
-        
-        #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;
-        }
-        
-        #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;
-        }
-        
-        #tabs {
-            margin: 0;
-            padding: 0;
-            
-            width: 100%;
-            height: 22px;
-            padding-top: 2px;
-            border-bottom: 1px solid #777;
-        }
-        
-        #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;
-/*            text-shadow: #CCC 1px 1px 1px;*/
-            height: 13px;
-            background-color: #C1C1C1;
-            -webkit-box-shadow: 1px -1px 2px rgba(127, 127, 127, 0.25);
-            margin-left: 4px;
-            margin-bottom: -1px;
-        }
-        
-        #tabs li.active {
-            background-color: #FEFCDF;
-            background-image: none;
-/*            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #C1C1C1), to(#FFFFFF));            */
-            border-bottom: 1px solid #FEFCDF;
-        }
-        
-        .toolbar {
-            border-bottom: 1px solid #777;
-            background-color: #FEFCDF;
-            margin: 0;
-            padding: 2px;
-        }
-        
-        .toolbar select {
-            float: left;
-            margin: 2px 5px 2px 0;
-            background: none;
-            border: 1px solid #999;
-            padding: 1px;
-        }
-        
-        .toolbar button {
-            display: block;
-            float: left;
-            margin: 4px 0 2px 0;
-            padding: 0 5px 2px 5px;
-            border: none;
-            background: none;
-        }
-        
-        .toolbar-end {
-            clear: both;
-        }
-        
-        .toolbar button:hover, .toolbar button:active {
-            background: #A2A2A2;
-            color: #FFF;
-            -webkit-border-radius: 10px;
-            -moz-border-radius: 10px;
-            border-radius: 10px;
-        }
-        
-        /* Remove extra padding in Firefox */
-        button::-moz-focus-inner { 
-            border: 0;
-            padding: 0;
-        }
-        
-        p { margin: 0;}
-    </style>
+    <script src="{{STATIC_URL}}js/main.js" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 
 {% block maincontent %}
 {% endblock %}
 
 {% block maincontent %}
                     <input type="hidden" name="comment" value="no comment" />
                     <input type="hidden" name="revision" value="{{ document.revision }}" />
                 </div>
                     <input type="hidden" name="comment" value="no comment" />
                     <input type="hidden" name="revision" value="{{ document.revision }}" />
                 </div>
-                <div id="simple-editor" class="htmlview" style="display: none">
+                <div id="simple-editor" style="display: none">
+                    <div class="toolbar">
+                        <button>Wstaw motyw</button> <button>Wstaw przypis</button>
+                        <div class="toolbar-end"> </div>
+                    </div>
+                    <div id="html-view" class="htmlview">
+                    </div>
                 </div>
             </div>
 
                 </div>
             </div>