Synchronized style updates with multiple shortcodes on one page

  • Resolved pepperfoggyhorn

    (@pepperfoggyhorn)


    1 year, 10 months ago

    Hi,

    Thanks for your great plugin.

    Is there a way to get the styling of the icon to update synchronously when you have the shortcode inserted more than once on a given page?

    On the example URL above, I have the favourites shortcode in three locations. If I save the content by clicking on the “save” heart, the other save hearts stay outlined instead of changing to solid.

    Is there a way to get all three hearts to update to be solid, no matter which “save” heart someone clicks?

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Takashi Matsuyama

    (@takashimatsuyama)

    Hi @pepperfoggyhorn,

    Thank you for your rating and your question.
    Sorry for the delay in answering.

    Unfortunately, This plugin can not currently sync them.

    I think this topic could be accomplished with another approach, such as using JavaScript to clone elements outside of this plugin. But that should have to be done after Ajax.

    Thanks.

    Thread Starter pepperfoggyhorn

    (@pepperfoggyhorn)

    Thanks, I used a very basic javascript function to sync the content and the classes.

    <script>
window.onclick = e => {
	clickedElement = e.target;
	var elementClass = clickedElement.className;
  if( elementClass.includes( "ccc-favorite-post-toggle-button" ) ){
    if( elementClass == "ccc-favorite-post-toggle-button" ){
      newContent = '\\f004'; // filled
      newClass = 'ccc-favorite-post-toggle-button save';
    }
    else if( elementClass == "ccc-favorite-post-toggle-button save" ){
      newContent = '\\f08a'; // hollow
      newClass = 'ccc-favorite-post-toggle-button';    
    }    
    var favHeartElements = document.getElementsByClassName("ccc-favorite-post-toggle-button");  

    for ( i = 0; i < favHeartElements.length; i++ ){
      element = favHeartElements[i];
      if( element != clickedElement ){
        element.className = newClass;
        var styleElem = document.head.appendChild(document.createElement("style"));
        styleElem.innerHTML = ".skhc-save-content .ccc-favorite-post-toggle a:before{content: '" + newContent + "';}";
      }
    }    
  }
}
</script>

    It may not be the most beautiful or efficient script, but it gets the job done.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Synchronized style updates with multiple shortcodes on one page’ is closed to new replies.