{% extends "base.html" %}
+{% load toolbar_tags %}
{% block extrahead %}
+ <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 type="text/javascript" charset="utf-8">
-
- function serialize(element) {
- if (element.nodeType == 3) {
- return [$.trim(element.nodeValue)];
- }
-
- var result = [];
-
- result.push('<');
- result.push(element.tagName);
-
- 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('"');
- }
- }
-
- result.push('>');
-
- for (var i=0; i < element.childNodes.length; i++) {
- var child = element.childNodes[i];
- result = result.concat(serialize(child));
- }
-
- result.push('</');
- result.push(element.tagName);
- result.push('>');
-
- if (element.tagName == 'akap') {
- 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);
- 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() {
- $(this).addClass('active');
- $('#source-view-tab').removeClass('active');
- $('#source-editor').hide();
- $('#simple-editor').show();
- transform();
- });
-
- $('#source-view-tab').click(function() {
- $(this).addClass('active');
- $('#simple-view-tab').removeClass('active');
- $('#simple-editor').hide();
- $('#source-editor').show();
- reverseTransform();
- });
- });
- </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: #FFF;
- background-image: none;
-/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #C1C1C1), to(#FFFFFF)); */
- border-bottom: 1px solid #FFF;
- }
- </style>
+ <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>
{% endblock %}
{% block maincontent %}
<div id="splitter">
<div id="editor">
<div id="source-editor">
+ {% toolbar %}
{{ form.text }}
<input type="hidden" name="name" value="{{ document.name }}" />
<input type="hidden" name="author" value="annonymous" />
<input type="hidden" name="revision" value="{{ document.revision }}" />
</div>
<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>
fnp / redakcja.git / blobdiff