Sophia
/
wordpress-juxtapose
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated 

Switched cdn to jsdelivr and added noscript
This commit is contained in:
Sophia Atkinson 2023-09-11 21:20:05 -07:00
parent 1caf7040c8
commit bba1edcaf6
1 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
juxtapose.php
View File

@ -1,72 +1,83 @@
<?php <?php
/* /*
Plugin Name: Juxtapose Plugin Name: Juxtapose
Plugin URI: http://wordpress.org/plugins/juxtaposejs/ Plugin URI: https://github.com/fcingolani/wordpress-juxtapose
Description: Adds a [juxtapose] shortcode to embed Northwestern University Knight Lab's JuxtaposeJS frame comparisons. Description: Adds a [juxtapose] shortcode to embed Northwestern University Knight Lab's JuxtaposeJS frame comparisons.
Author: Federico Cingolani Author: Federico Cingolani
Version: 1.0 Version: 1.1
Author URI: http://fcingolani.com.ar/ Author URI: https://fcingolani.com.ar/
*/ */
class Juxtapose { class Juxtapose
{
static $shortcode_rendered;
static $shortcode_rendered; static function initialize()
{
self::$shortcode_rendered = false;
static function initialize() { add_shortcode("juxtapose", [__CLASS__, "shortcode"]);
self::$shortcode_rendered = false;
add_shortcode('juxtapose', array(__CLASS__, 'shortcode')); add_action("init", [__CLASS__, "init"]);
add_action("wp_footer", [__CLASS__, "wp_footer"]);
}
add_action('init', array(__CLASS__, 'init')); // TODO: Sanitize attributes
add_action('wp_footer', array(__CLASS__, 'wp_footer')); static function shortcode($atts)
} {
self::$shortcode_rendered = true;
// TODO: Sanitize attributes wp_enqueue_script("juxtapose");
static function shortcode( $atts ) {
self::$shortcode_rendered = true;
wp_enqueue_script('juxtapose'); $a = shortcode_atts(
[
"startingposition" => 50,
"showlabels" => true,
"showcredits" => true,
"animate" => true,
"mode" => "horizontal",
$a = shortcode_atts( array( "leftsrc" => "",
'startingposition' => 50, "leftlabel" => "",
'showlabels' => true, "leftcredit" => "",
'showcredits' => true,
'animate' => true,
'mode' => 'horizontal',
'leftsrc' => '', "rightsrc" => "",
'leftlabel' => '', "rightlabel" => "",
'leftcredit' => '', "rightcredit" => "",
],
$atts
);
'rightsrc' => '', return <<<EOT
'rightlabel' => '', <div class="juxtapose" data-startingposition="{$a["startingposition"]}" data-showlabels="{$a["showlabels"]}" data-showcredits="{$a["showcredits"]}" data-animate="{$a["animate"]}" data-mode="{$a["mode"]}">
'rightcredit' => '', <img src="{$a["leftsrc"]}" data-label="{$a["leftlabel"]}" data-credit="{$a["leftcredit"]}">
), $atts ); <img src="{$a["rightsrc"]}" data-label="{$a["rightlabel"]}" data-credit="{$a["rightcredit"]}">
return <<<EOT
<div class="juxtapose" data-startingposition="{$a['startingposition']}" data-showlabels="{$a['showlabels']}" data-showcredits="{$a['showcredits']}" data-animate="{$a['animate']}" data-mode="{$a['mode']}">
<img src="{$a['leftsrc']}" data-label="{$a['leftlabel']}" data-credit="{$a['leftcredit']}">
<img src="{$a['rightsrc']}" data-label="{$a['rightlabel']}" data-credit="{$a['rightcredit']}">
</div> </div>
<noscript><style>.juxtapose{display:none;}</style><h2><strong>JavaScript Is Needed To View This Juxtapose!</strong></h2></noscript>
EOT; EOT;
}
} static function init()
{
static function init() { wp_register_script(
wp_register_script( 'juxtapose', "//s3.amazonaws.com/cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.js", null, null, true ); "juxtapose",
"https://cdn.jsdelivr.net/npm/juxtaposejs/build/js/juxtapose.min.js",
} null,
null,
static function wp_footer() { true
// Should be using wp_enqueue_style, but it can't be used to add styles to the footer. );
// Yeah i know, <link> inside <body> is not valid HTML. }
// But i don't want to load this css when there's not need to.
// SUE ME.
if(self::$shortcode_rendered){
echo '<link rel="stylesheet" href="//s3.amazonaws.com/cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">';
}
}
static function wp_footer()
{
// Should be using wp_enqueue_style, but it can't be used to add styles to the footer.
// Yeah i know, <link> inside <body> is not valid HTML.
// But i don't want to load this css when there's not need to.
// SUE ME.
if (self::$shortcode_rendered) {
echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxtaposejs/build/css/juxtapose.min.css">';
}
}
} }
Juxtapose::initialize(); Juxtapose::initialize();