X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/9437f74bdc87107e38ca37f21d7d74579ad6f2aa..e0f595e44766e352edfce0aaf5d32be57f448882:/src/redakcja/static/js/wiki/view_properties.js diff --git a/src/redakcja/static/js/wiki/view_properties.js b/src/redakcja/static/js/wiki/view_properties.js index 7e284a50..51f26d50 100644 --- a/src/redakcja/static/js/wiki/view_properties.js +++ b/src/redakcja/static/js/wiki/view_properties.js @@ -2,12 +2,13 @@ let w = function() {}; w = console.log; - + const elementDefs = { "ilustr": { "attributes": [ { "name": "src", + "type": "media", }, { "name": "alt", @@ -37,304 +38,455 @@ } }; - function PropertiesPerspective(options) { - let oldCallback = options.callback || function() {}; - this.vsplitbar = 'WŁAŚCIWOŚCI'; + class PropertiesPerspective extends $.wiki.SidebarPerspective { + vsplitbar = 'WŁAŚCIWOŚCI'; + $edited = null; - options.callback = function() { - let self = this; + constructor(options) { + super(options); + let self = this; - self.$pane = $("#side-properties"); - - $("#simple-editor").on('click', '[x-node]', function(e) { - if (!e.redakcja_edited) { - e.redakcja_edited = true; - self.edit(this); - } - }); + self.$pane = $("#side-properties"); - self.$pane.on('click', '#parents li', function(e) { - self.edit($(this).data('node')); - }); + $("#simple-editor").on('click', '[x-node]', function(e) { + if (!e.redakcja_edited) { + e.redakcja_edited = true; + self.edit(this); + } + }); - $(document).on('click', '#bubbles .badge', function(e) { - self.edit($(this).data('node')); - }); + self.$pane.on('click', '#parents li', function(e) { + self.edit($(this).data('node')); + }); + + $(document).on('click', '#bubbles .badge', function(e) { + self.edit($(this).data('node')); + }); - self.$pane.on('change', '.form-control', function() { - let $input = $(this); + self.$pane.on('change', '.form-control', function() { + let $input = $(this); - let inputval; - if ($input.attr('type') == 'checkbox') { - inputval = $input.is(':checked'); - } else { - inputval = $input.val(); - } - - if ($input.data("edited")) { - if ($input.data("edited-attr")) { - $input.data("edited").attr($input.data("edited-attr"), inputval); + let inputval; + if ($input.attr('type') == 'checkbox') { + inputval = $input.is(':checked'); } else { - $input.data("edited").text(inputval); + inputval = $input.val(); } - return; - } - - html2text({ - element: self.$edited[0], - success: function(xml) { - w(222) - let $xmlelem = $($.parseXML(xml)); - w(333, $xmlelem) - w($input.data('property'), $input.val()); - $xmlelem.contents().attr($input.data('property'), inputval); - w(444, $xmlelem) - let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]); - w(555, newxml) - xml2html({ - xml: newxml, - base: self.doc.getBase(), - success: function(html) { - let htmlElem = $(html); - self.$edited.replaceWith(htmlElem); - self.edit(htmlElem); - } - }); - }, - error: function(e) {console.log(e);}, + + if ($input.data("edited")) { + if ($input.data("edited-attr")) { + $input.data("edited").attr($input.data("edited-attr"), inputval); + } else { + $input.data("edited").text(inputval); + } + $.wiki.perspectives.VisualPerspective.flush(); + return; + } + + html2text({ + element: self.$edited[0], + success: function(xml) { + w(222) + let $xmlelem = $($.parseXML(xml)); + w(333, $xmlelem) + w($input.data('property'), $input.val()); + $xmlelem.contents().attr($input.data('property'), inputval); + w(444, $xmlelem) + let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]); + w(555, newxml) + xml2html({ + xml: newxml, + base: self.doc.getBase(), + success: function(html) { + let htmlElem = $(html); + self.$edited.replaceWith(htmlElem); + self.edit(htmlElem); + $.wiki.activePerspective().flush(); + } + }); + }, + error: function(e) {console.log(e);}, + }); + self.$edited; }); - self.$edited; - }); - - self.$pane.on('click', '.meta-add', function() { - // create a metadata item - let $fg = $(this).parent(); - let ns = $fg.data('ns'); - let tag = $fg.data('tag'); - let field = $fg.data('field'); - let span = $(''); - span.attr('x-node', tag); - span.attr('x-ns', ns) - if (field.value_type.hasLanguage) { - span.attr('x-a-xml-lang', 'pl'); - } - span.appendTo( - $("> [x-node='RDF'] > [x-node='Description']", self.$edited) - ); - self.displayMetaProperty($fg); - - return false; - }); - - self.$pane.on('click', '.meta-delete', function() { - let $fg = $(this).closest('.form-group'); - $('input', $fg).data('edited').remove(); - self.displayMetaProperty($fg); - return false; - }); + self.$pane.on('click', '.meta-add', function() { + // create a metadata item + let $fg = $(this).parent(); + let ns = $fg.data('ns'); + let tag = $fg.data('tag'); + let field = $fg.data('field'); + let span = $(''); + span.attr('x-node', tag); + span.attr('x-ns', ns) + if (field.value_type.hasLanguage) { + span.attr('x-a-xml-lang', 'pl'); + } + let rdf = $("> [x-node='RDF']", self.$edited); + if (!rdf.length) { + rdf = $(""); + self.$edited.prepend(rdf); + self.$edited.prepend('\n '); - - self.$pane.on('click', '.current-convert', function() { - self.convert($(this).attr('data-to')); - }); - self.$pane.on('click', '#current-delete', function() { - self.delete(); - }); - - - oldCallback.call(this); - }; + } + let rdfdesc = $("> [x-node='Description']", rdf); + if (!rdfdesc.length) { + rdfdesc = $(""); + rdf.prepend(rdfdesc); + rdf.prepend('\n '); + rdfdesc.append('\n '); + rdf.append('\n '); + } + span.appendTo(rdfdesc); + rdfdesc.append('\n '); - $.wiki.SidebarPerspective.call(this, options); - } + self.displayMetaProperty($fg); + + return false; + }); + + self.$pane.on('click', '.meta-delete', function() { + let $fg = $(this).closest('.form-group'); + let $ig = $(this).closest('.input-group'); + $('input', $ig).data('edited').remove(); + self.displayMetaProperty($fg); + $.wiki.perspectives.VisualPerspective.flush(); + return false; + }); + + $('#media-chooser').on('show.bs.modal', function (event) { + var input = $("input", $(event.relatedTarget).parent()); + var modal = $(this); + modal.data('target-input', input); + var imglist = modal.find('.modal-body'); + imglist.html(''); + + self.doc.refreshImageGallery({ + success: function(galleryImages) { + $.each(self.doc.galleryImages, (i, imgItem) => { + let img = $("").attr("src", imgItem.thumb).attr('title', imgItem.url).data('url', imgItem.url).on('click', function() { + imglist.find('img').removeClass('active'); + $(this).addClass('active'); + }); + imglist.append(img); + }); + } + }); + }) + $('#media-chooser .ctrl-ok').on('click', function (event) { + $('#media-chooser').data('target-input') + .val( + (new URL($('#media-chooser .active').data('url'), document.baseURI)).href + ).trigger('change'); + $('#media-chooser').modal('hide'); + }); + + /* Meta chooser */ + $('#meta-chooser').on('show.bs.modal', function (event) { + let input = $("input", $(event.relatedTarget).closest('.input-group')); + let $fg = $(event.relatedTarget).closest('.form-group'); + let field = $fg.data('field'); + let modal = $(this); + modal.data('target-input', input); + let body = modal.find('.modal-body'); + body.html(''); + + let add_options = function(cnt, options, value) { + $.each(options, (i, item) => { + let elem = $('
'); + if (!item.usable) { + $('input', elem).remove(); + } + if (item.hidden) { + $('input', elem).prop('disabled', 'disabled'); + } + $('input', elem).val(item.value); + $('input', elem).val(item.value); + $('.value', elem).text(item.value); + $('.name', elem).append(item.name); + $('.description', elem).append(item.description); + let valueMatch = value && value.startsWith(item.value); + if (valueMatch) { + $('label', elem).addClass('text-primary') + if (value == item.value) { + $('input', elem).prop('checked', true); + } + } + if (item.sub) { + let subT = $('
+
'); + let sub = $('
'); + elem.append(subT); + elem.append(sub); + subT.on('click', () => { + sub.toggle() + }); + add_options(sub, item.sub, valueMatch ? value : null); + } + elem.appendTo(cnt); + }); + }; + + $.ajax({ + url: field.value_type.chooser.source, + success: function(data) { + add_options(body, data, input.val()); + } + }); + }) + $('#meta-chooser .ctrl-ok').on('click', function (event) { + $('#meta-chooser').data('target-input').val( + $('#meta-chooser :checked').val() + ).trigger('change'); + $('#meta-chooser').modal('hide'); + }); - PropertiesPerspective.prototype = new $.wiki.SidebarPerspective(); + self.$pane.on('click', '.current-convert', function() { + self.convert($(this).attr('data-to')); + }); + self.$pane.on('click', '#current-delete', function() { + self.delete(); + }); + } - PropertiesPerspective.prototype.edit = function(element) { - let self = this; + edit(element) { + let self = this; - let $node = $(element); - $("#parents", self.$pane).empty(); - $("#bubbles").empty(); + $("#parents", self.$pane).empty(); + $("#bubbles").empty(); - let b = $("
").text($node.attr('x-node')); - b.data('node', element); - $("#bubbles").append(b); + let $f = $("#properties-form", self.$pane); + $f.empty(); - $node.parents('[x-node]').each(function() { - let a = $("
  • " ) + .append( "
    " + t + "
    " ) + .appendTo( ul ); + }; + } + } + $aninput.data('edited', $(element)) + $aninput.val( + $(element).text() ); - lang_input.appendTo(pp); - pp.appendTo(ig); - } + $aninput.appendTo(ig); - let $aninput = $(""); - $aninput.data('edited', $(element)) - $aninput.val( - $(element).text() - ); - $aninput.appendTo(ig); - - let ap = $("
    "); - ap.appendTo(ig); - $("").appendTo(ap); - - // lang - }; - - - PropertiesPerspective.prototype.displayMetaProperty = function($fg) { - let self = this; - let ns = $fg.data('ns'); - let tag = $fg.data('tag'); - let field = $fg.data('field'); - - // clear container - $('.c', $fg).empty(); - - $("> [x-node='RDF'] > [x-node='Description'] > [x-node='"+tag+"'][x-ns='"+ns+"']", self.$edited).each(function() { - self.addMetaInput( - $('.c', $fg), - field, - this); - }); - - count = $('.c > .input-group', $fg).length; - if (field.required) { - if (!count) { - $('
    WYMAGANE
    ').appendTo($('.c', $fg)); + let ap = $("
    "); + ap.appendTo(ig); + + if (field.value_type.chooser) { + ap.append($("")); } + $("").appendTo(ap); + + // lang } - }; - - - - PropertiesPerspective.prototype.addEditField = function(defn, value, elem) { - let self = this; - let $form = $("#properties-form", self.$pane); - - let $fg = $("
    "); - $("