A user macro for Confluence server for creating image comparison slider.

[#1]

This user macro give ability to view a comparison between two images and control it by moving a slider, in order to show differences.

View on github : https://github.com/AOT-DEP-PADI/ConfluenceUserMacro-ImageComparisonSlider

Features

This user macro give ability to view a comparison between two images and control it by moving a slider, in order to show differences.

• Images use for comparaison provides from attachments of current page confluence;
• Set height and widht with pixel or percent ;
• Set initial visible ratio. Visible ratio of front element on init, must be a float value between 0 and 1. When ratio is equal to 1, so we see completely front image. And when ratio is equal to 0, so we see completely back image.
• Add or remove a thin vertical blank line as a separator beetwen two images ;
• Add or remove label on before and after image ;
• Add or remove more controls buttons ;
• Apply custom CSS on label ;
• Apply custom CSS on images ;
• Enable click on the circle control in order to toogle images ;
• Set animation easing, animation duration to use.

User macro code

• Macro name : image_comparison_slider
• Macro title: Image comparison slider
• Description: Create an image comparison slider
• Macro body processing: No
• Velocity Template code: view code on github
• Version: 1.0.0
• Last modification: 22/05/2019

User macro parameters

## @param AttachmentImageBefore:title=Image "before"|type=attachment|required=false|desc=Première image à utiliser pour la comparaison.
## @param AttachmentImageAfter:title=Image "after"|type=attachment|required=false|desc=Seconde image à utiliser pour la comparaison.
## @param width:title=Largeur|type=string|desc=En pixels ou en pourcentage : par exemple, 600 ou 80%. Par défaut utilise 100%.|default=100%
## @param height:title=Hauteur|type=string|desc=En pixels ou en pourcentage : par exemple, 400 ou 50%. Par défaut utilise 100%.|default=100%
## @param AddSeparator:title=Ajoute un séparateur|type=boolean|default=true
## @param InitVisibleRatio:title=Ratio initial de visibilité|type=string|required=false|desc=Nombre réel entre 0 et 1 pour définir le ratio initial de visibilité entre les images (par défaut à 0.5)|default=0.5
## @param LabelBefore:title=Texte à gauche|type=string|desc=Ajoute un texte à gauche sur l image "before".
## @param LabelAfter:title=Texte à droite|type=string|desc=Ajoute un texte à droite sur l image "after".
## @param LabelBeforeCustomCSS:title=CSS texte à gauche|type=string|desc=Applique un style CSS sur le texte à gauche - exemple: "padding": "10px 20px","color": "red"
## @param LabelAfterCustomCSS:title=CSS texte à droite|type=string|desc=Applique un style CSS sur le texte à droite - exemple: "right": "40px","top": "80px"
## @param ImageBeforeCustomCSS:title=CSS image à gauche|type=string|desc=Applique un style CSS sur l image de gauche 'before' - exemple: "filter":"sepia(80%)"
## @param ImageAfterCustomCSS:title=CSS image à droite|type=string|desc=Applique un style CSS sur l image de droite 'after' - exemple: "filter":"grayscale(50%)"
## @param AddClickOnDragCircle:title=Activer le bouton de déplacement|type=boolean|default=true
## @param AddButtons:title=Ajout de bouttons|type=boolean|default=false
## @param DispositionButtons:title=Disposition des bouttons|type=enum|enumValues=left,center,right|default=center
## @param AnimationEasing:title=Animation type|type=enum|enumValues=linear,swing|default=swing
## @param AnimationDuration:title=Animation durée|type=string|default=400

Details of some parameters bellow, for the complete list go to github repository : https://github.com/AOT-DEP-PADI/ConfluenceUserMacro-ImageComparisonSlider

Images to use in comparison slider

Images must be save in the current page as an attachment file. Image "before" is placed on front, and image "after" on back.

Initial visible ratio

Visible ratio of front element on init, must be a float value between 0 and 1. When ratio is equal to 1, so we see completely front image. And when ratio is equal to 0, so we see completely back image.

Labels

Add a label on "before" and/or "after" image

Apply custom css on label and image

Apply custom CSS on label before and/or after image. Code CSS must respect the syntax of the jQuery method .css() - exemple : "padding": "10px 20px","color": "red","border-radius":"0px". 

Do the same thing on image, for exemple to apply a filter on before image - exemple : "filter":"sepia(80%)"

Usages

Compare the user interface of two versions of an application.

Compare gif animation

https://github.com/AOT-DEP-PADI/ConfluenceUserMacro-ImageComparisonSlider/blob/master/docs/ConfluenceUserMacrosImageCompare_CompareAnimation.gif

[Davin Studer]

Sweet! Looks awesome. I like how you implemented an attachments input type. I did something similar with a CSV Table user macro I created. I wish there was an easier way to do attachments in a user macro. Nice job.

[Davin Studer]

I think this would be best as an article. Would you be ok with me changing the post type to article?

[Vincent Blain]

To improve the behaviour of this macro in macro properties edit screen, I search how can i use AUI (Atlassian User Interface) elements with velocity template, in this case.

For exemple, it will be nice to have ability to create custom interface for macro in edit context. I want use <aui-item-checkbox> elements to present options that the user can select or enable.

https://docs.atlassian.com/aui/8.3.1/docs/dropdown.html

AUI code

<aui-dropdown-menu id="checkbox-items">
<aui-section label="Languages">
<aui-item-checkbox interactive checked>Javascript</aui-item-checkbox>
<aui-item-checkbox interactive>Fortran</aui-item-checkbox>
<aui-item-checkbox interactive>Rust</aui-item-checkbox>
</aui-section>
</aui-dropdown-menu>

JS code

var dropdown = document.getElementById('is-checkbox-checked');
dropdown.addEventListener('change', function (e) {
var isChecked = e.target.hasAttribute('checked');
if (isChecked) {
console.log(e.target.textContent, 'was checked.');
} else {
console.log(e.target.textContent, 'was unchecked.');
}
});

 I will make change... if i found (time) and a way to do it.

[Gonchik Tsymzhitov]

I like it :) 

Thank you for the idea and sharing the macro

[SKAdmin]

Hello - How did you get this to work since the 'attachment' macro parameter type does not work in User Macros?

https://jira.atlassian.com/browse/CONFSERVER-24016

[captain1701]

@SKAdmin, we had it running since years but somehow now it stopped working. 😥 We are currently using 7.19.7 and it looks like the last LTS update made it stop working.

Looks like this is a know issue and I was able to solve it with the given workaround on this ticket:

---

-Dmacro.required.velocity.context.keys=attachmentManager,dateFormatter,generalUtil,bootstrap,action

---

Maybe this macro also works with this:

---

-Dmacro.required.velocity.context.keys=attachmentManager,generalUtil,bootstrap

---

but we have other macros making use of action and dateFormatter, I haven't checked the full code of this macro uses the before mentioned from them as well.

[SKAdmin]

We are also on 7.19.7. Thank you for providing the workaround. Hope this works for us. 

[captain1701]

Just a small adjustment to address only what is really needed by image comparison slider user macro:
-Dmacro.required.velocity.context.keys=attachmentManager,dateFormatter,generalUtil,bootstrap,action,req,content