Przeniesienie stylów i javascriptu do osobnych plików.
[redakcja.git] / platforma / templates / wiki / document_details.html
index 3445802..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') {
-                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;
-        }
-        
-        .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;
-        }
-        
-        #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;
-        }
-        
-        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>