Kookaburra and "Compare: Juxtapose"

Backlight 4, 5 & 6 Support
#21

@Matthew, can a SVG be replaced with phplugins without having to replicate all SVGs?

#22

hope :smiley:

#23

Nope. And anyway, the SVG here is bundled into the JS. It’s replaceable, but how to do it via Backlight’s UI without making a mess of things, I don’t know.

IMO, not worth it.

#24

Hi Matt,

if this is too complicated, you could at least make the handle background white and round it off, e.g:

.handle {
  position: absolute;
  top: var(--handle-position-start);
  pointer-events: none;
  box-sizing: border-box;
  margin-left: 1px;
  transform: translate(calc(-50% - 0.5px), -50%);
  line-height: 0;

  background: white !important;
  border: 1px solid #c6c6c6 !important;
  padding: 10px !important;
  border-radius: 50px !important;
}

but this only works temporarily for me, because the code is not applied to kookaburra.css

img-comp
img-comp704×467 57 KB

#25

Not something I can do, because the stylesheet can’t reach element in the shadowDOM.

But you can do this in PHPlugins.

function scripts() {
  echo <<<HTML
  <script>
    const comparisons = document.querySelectorAll('img-comparison-slider');
    const stylesheet = new CSSStyleSheet;
    stylesheet.replaceSync(`
      .handle {
        background-color: rgba(255, 255, 255, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 8px;
        padding: 6px;
      }`
    );

    comparisons.forEach(instance => {
      instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
    });
  </script>

HTML;
// do not indent line above
  return false;
} // END /**/
#26

Hi Matt,

I copied and pasted the script in phplugins but for some reason the script does not work for me :thinking:

#27

Initial things to check:

Did you select the right PHPlugins file?

Do you already have a scripts function declared elsewhere?

If you do already have a scripts function declared, just merge the contents so that its’ all in one function.

Oh, also, if you’re copying from here, then make sure the quotes and single-quotes aren’t the rich-text curly versions. Replace them with “straight” editor characters.

#28

Hi,

  1. it is the correct phplugins file (works with custom css)
  2. only this script is active
  3. I have tried the following but it does not work:
function scripts() {
  echo <<<HTML
  <script>
    const comparisons = document.querySelectorAll('img-comparison-slider');
    const stylesheet = new CSSStyleSheet;
		stylesheet.replaceSync(`
      .handle {
        background-color: rgba(255, 255, 255, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 8px;
        padding: 6px;
      }`
);

    comparisons.forEach(instance => {
      instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
    });
  </script>

HTML;
// do not indent line above
  return false;
} // END /**/

and

function scripts() {
  echo <<<HTML
  <script>
    const comparisons = document.querySelectorAll("img-comparison-slider");
    const stylesheet = new CSSStyleSheet;
		stylesheet.replaceSync(`
      .handle {
        background-color: rgba(255, 255, 255, 1.0);
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 8px;
        padding: 6px;
      }`
	 );

    comparisons.forEach(instance => {
      instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
    });
  </script>

HTML;
// do not indent line above
  return false;
} // END /**/

any ideas???

Thank you,
best regards,
Oliver

#29

Try formatting it this way?

function scripts() {
  echo "
    <script>
      const imgComparisonSliders = document.querySelectorAll('img-comparison-slider');
      const stylesheet = new CSSStyleSheet;
      stylesheet.replaceSync(`
        .handle {
          background-color: rgba(255, 255, 255, 0.25);
          border: 1px solid rgba(255, 255, 255, 0.75);
          border-radius: 8px;
          padding: 6px;
        }`
      );

      imgComparisonSliders.forEach(instance => {
        instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
      });
    </script>
  ";
  return false;
} // END /**/
#30

Otherwise, can you share a link to a page where you’d expect this to be working?

#31

the custom css file is different than the phplugins files. For Kookaburra, you should be starting with the phplugins-kookaburra-sample.php file

1 Like
#32

Rod thank you!

I apologize for my confusion, of course I meant this:

/* DELETE THIS LINE
		// Insert custom CSS into the document head
		function style() {
			echo <<<HTML
				<style>
					* { background-color: rgba(255, 0, 0, 0.25) !important; }
				</style>

HTML;
// do not indent line above
			return false;
		} // END /**/
#33

See v6.2.1, now available.

1 Like
#34

Matt, thanks a lot for this great update :partying_face: :+1:

1 Like