From e00160a735b2341453d4f685cbec944431080db9 Mon Sep 17 00:00:00 2001 From: Laurens Martina Date: Mon, 5 Oct 2020 21:08:52 +0200 Subject: [PATCH 1/3] wymeditor: Replaces fixed selectors with variables --- .../plugins/image_upload/jquery.wymeditor.image_upload.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js b/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js index 9d974166..fdcc2fb5 100644 --- a/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js +++ b/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js @@ -27,7 +27,9 @@ WYMeditor.editor.prototype.image_upload = function() { var orig = d.initialize; d.initialize = function(wDialog) { orig.call(this, wDialog); - var doc = wDialog.document; + var wym = this, + doc = wDialog.document, + options = wym._options; var oldSubmitLabel = jQuery("form#image_upload_form .submit", doc).val(); // WYMEditor automatically locks onto any form here, so remove the binding. @@ -43,8 +45,8 @@ WYMeditor.editor.prototype.image_upload = function() { if (response.error){ alert(response.error); } else { - jQuery(".wym_src", doc).val(response.thumbUrl); - jQuery(".wym_alt", doc).val(response.original_filename); + jQuery(options.srcSelector, doc).val(response.thumbUrl); + jQuery(options.altSelector, doc).val(response.original_filename); } jQuery("form#image_upload_form .submit", doc).val(oldSubmitLabel); } From c98967acb1135b25ebfa6fc3220fad9a87afacd3 Mon Sep 17 00:00:00 2001 From: Laurens Martina Date: Mon, 5 Oct 2020 20:04:36 +0200 Subject: [PATCH 2/3] figcaption: Adds figcaption Wraps images with title or data-attribution attribute in a figure element. Places the title in a figcaption element. Places the data-attribution in a small element. --- data/themes/default/hypha.css | 4 ++++ index.php | 1 + system/core/pages.php | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 38 insertions(+) diff --git a/data/themes/default/hypha.css b/data/themes/default/hypha.css index 835f90ca..52740165 100644 --- a/data/themes/default/hypha.css +++ b/data/themes/default/hypha.css @@ -525,6 +525,10 @@ img { height: auto; } +#main figure .title + .attribution:before { + content: " - "; +} + #main img.left { float: left; margin: 0 13px 10px 0; diff --git a/index.php b/index.php index 0d9afe1a..b2e40dfa 100644 --- a/index.php +++ b/index.php @@ -125,6 +125,7 @@ if ($hyphaPage) processCommandResult($hyphaPage->process($O_O->getRequest())); registerPostProcessingFunction('dewikify'); + registerPostProcessingFunction('add_captions_to_all_images'); // add hypha commands and navigation $_cmds[] = ''.__('index').''; diff --git a/system/core/pages.php b/system/core/pages.php index 5da80d22..79829fb6 100644 --- a/system/core/pages.php +++ b/system/core/pages.php @@ -601,6 +601,39 @@ function wikify_link($node) { $node->text(''); } + function add_captions_to_all_images($element) { + /** @var \DOMWrap\NodeList $img */ + // process images that reside within "main" + foreach ($element->findXPath('//*[@id="main"]//img[@title or @data-attribution]') as $img) { + // do not process images that reside within the wymeditor + if ($img->parents('.wymeditor')->count() === 0) { + add_caption_to_image($img); + } + } + } + + function add_caption_to_image($img) { + $doc = $img->document(); + + $img->wrap('
'); + $caption = $doc->createElement('figcaption'); + $img->after($caption); + + $title = $img->getAttribute('title'); + if ($title) { + $span = $doc->createElement('span', $title); + $span->addClass('title'); + $caption->append($span); + } + + $attribution = $img->getAttribute('data-attribution'); + if ($attribution) { + $small = $doc->createElement('small', $attribution); + $small->addClass('attribution'); + $caption->append($small); + } + } + /* Function: versionSelector generate html select element with available revisions for given page From 55cfe0286c129d086e8abe98e686aefc627ddabd Mon Sep 17 00:00:00 2001 From: Laurens Martina Date: Mon, 5 Oct 2020 23:28:13 +0200 Subject: [PATCH 3/3] wymeditor: Adds attribution to image dialog Fixes #119 --- system/wymeditor/lang/en.js | 2 + system/wymeditor/lang/nl.js | 4 +- .../jquery.wymeditor.image_upload.js | 38 ++++++++++++++++++- 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/system/wymeditor/lang/en.js b/system/wymeditor/lang/en.js index 8d514c2b..890e136a 100644 --- a/system/wymeditor/lang/en.js +++ b/system/wymeditor/lang/en.js @@ -28,6 +28,8 @@ WYMeditor.STRINGS.en = { Title: 'Title', Relationship: 'Relationship', Alternative_Text: 'Alternative text', + Attribution: 'Attribution', + Attribution_placeholder: 'license: author (date)', Caption: 'Caption', Summary: 'Summary', Number_Of_Rows: 'Number of rows', diff --git a/system/wymeditor/lang/nl.js b/system/wymeditor/lang/nl.js index 834fea38..c4529de1 100644 --- a/system/wymeditor/lang/nl.js +++ b/system/wymeditor/lang/nl.js @@ -28,6 +28,8 @@ WYMeditor.STRINGS.nl = { Title: 'Titel', Relationship: 'Relatie', Alternative_Text: 'Alternatieve tekst', + Attribution: 'Bijdrage', + Attribution_placeholder: 'licentie: auteur (datum)', Caption: 'Bijschrift', Summary: 'Summary', Number_Of_Rows: 'Aantal rijen', @@ -53,4 +55,4 @@ WYMeditor.STRINGS.nl = { File: 'File', Preset: 'Preset', -}; \ No newline at end of file +}; diff --git a/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js b/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js index fdcc2fb5..2e60b2c6 100644 --- a/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js +++ b/system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js @@ -14,6 +14,10 @@ WYMeditor.editor.prototype.image_upload = function() { var wym = this; var uploadUrl = wym._options.dialogImageUploadUrl; + + wym._options.attributionImgAttribute = 'data-attribution'; + wym._options.attributionSelector = '.wym_attribution'; + // Check the options if (uploadUrl == undefined) { WYMeditor.console.warn( @@ -29,7 +33,10 @@ WYMeditor.editor.prototype.image_upload = function() { orig.call(this, wDialog); var wym = this, doc = wDialog.document, - options = wym._options; + options = wym._options, + selectedImage = wym.getSelectedImage(); + + jQuery(options.attributionSelector, doc).val(jQuery(selectedImage).attr(options.attributionImgAttribute)); var oldSubmitLabel = jQuery("form#image_upload_form .submit", doc).val(); // WYMEditor automatically locks onto any form here, so remove the binding. @@ -47,12 +54,37 @@ WYMeditor.editor.prototype.image_upload = function() { } else { jQuery(options.srcSelector, doc).val(response.thumbUrl); jQuery(options.altSelector, doc).val(response.original_filename); + jQuery(options.attributionSelector, doc).val(response.attribution); } jQuery("form#image_upload_form .submit", doc).val(oldSubmitLabel); } }) }; + d.submitHandler = function (wDialog) { + var wym = this, + options = wym._options, + imgAttrs, + selectedImage = wym.getSelectedImage(); + + imgAttrs = { + src: jQuery(options.srcSelector, wDialog.document).val(), + title: jQuery(options.titleSelector, wDialog.document).val(), + alt: jQuery(options.altSelector, wDialog.document).val(), + }; + imgAttrs[options.attributionImgAttribute] = jQuery(options.attributionSelector, wDialog.document).val(); + + wym.focusOnDocument(); + + if (selectedImage) { + wym._updateImageAttrs(selectedImage, imgAttrs); + wym.registerModification(); + } else { + wym.insertImage(imgAttrs); + } + wDialog.close(); + } + // Put together the whole dialog script wym._options.dialogImageHtml = String() + '' + @@ -95,6 +127,10 @@ WYMeditor.editor.prototype.image_upload = function() { '' + '' + '' + + '
' + + '' + + '' + + '
' + '
' + '' + '' +