From 1aa0688c6847b188c9c6f458a23a8bc197ec1b29 Mon Sep 17 00:00:00 2001 From: fwolf Date: Fri, 5 Jan 2018 06:10:29 +0100 Subject: [PATCH] Major change: Direct embed is now the default, iframe embed is optional. --- embed-content.css | 19 +++++++++++ embed-content.less | 27 ++++++++++++++++ mastodon-embed.php | 78 +++++++++++++++++++++++++++++++++++----------- readme.txt | 17 +++++++--- 4 files changed, 118 insertions(+), 23 deletions(-) diff --git a/embed-content.css b/embed-content.css index 47a596d..8b0c6f9 100644 --- a/embed-content.css +++ b/embed-content.css @@ -3,6 +3,7 @@ */ .mastodon-embed { font-family: "Roboto", "Ubuntu Sans", "Nimbus Sans L", "Droid Sans", Arial, sans-serif; + margin: 1.5rem 0; } .mastodon-embed .activity-stream { box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); @@ -107,10 +108,28 @@ } .mastodon-embed .detailed-status.light .status__content { color: #282c37; + /* + .e-content.show-nsfw { + display: block !important; + transition: all 0.3s; + }*/ } .mastodon-embed .detailed-status.light .status__content a { color: #2b90d9; } +.mastodon-embed .detailed-status.light .status__content a.status__content__spoiler-link { + border-radius: 2px; + display: inline-block; + /** + * Original (and user-unfriendly): + */ + font-size: 0.85rem; + font-weight: 500; + padding: 0 6px; + text-transform: uppercase; + background-color: #9baec8; + color: #fff; +} .mastodon-embed .detailed-status.light .detailed-status__meta { color: #9baec8; font-size: 14px; diff --git a/embed-content.less b/embed-content.less index 1f66c1e..51c2905 100644 --- a/embed-content.less +++ b/embed-content.less @@ -7,6 +7,7 @@ .mastodon-embed { font-family: @mastodon_embed_font; + margin: 1.5rem 0; .activity-stream { box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); @@ -139,6 +140,32 @@ a { color: #2b90d9; } + + a.status__content__spoiler-link { + border-radius: 2px; + display: inline-block; + + /** + * Original (and user-unfriendly): + */ + //font-size: 11px; + + font-size: 0.85rem; + + font-weight: 500; + padding: 0 6px; + text-transform: uppercase; + + background-color: #9baec8; + color: #fff; + } + + /* + .e-content.show-nsfw { + display: block !important; + transition: all 0.3s; + }*/ + } diff --git a/mastodon-embed.php b/mastodon-embed.php index b1e549c..a432469 100644 --- a/mastodon-embed.php +++ b/mastodon-embed.php @@ -2,8 +2,8 @@ /** * Plugin Name: Mastodon Embed Improved * Plugin URI: http://f2w.de/mastodon-embed - * Description: A plugin to embed Mastodon statuses. Complete rewrite of Mastodon embed by David Libeau. Tested up to WP 4.8-nightly - * Version: 2.4.3 + * Description: A plugin to embed Mastodon statuses. Complete rewrite of Mastodon embed by David Libeau. Tested up to WP 5.0-nightly + * Version: 2.5 * Author: Fabian Wolf * Author URI: http://usability-idealist.de * License: GNU GPL v2 or later @@ -14,7 +14,8 @@ * - working caching * - proper shortcode initialization * - backward compatiblity for mastodon-embed - * - fallback to "direct" embeds if embed via iframe is forbidden (eg. when testing on localhost) + * - directly embed toots instead of relying on the iframe method + * - fallback method: iframe (explicitely enabled via shortcode attribute 'use_iframe' (alias: 'iframe') and set it to '1' * - direct embed with reverse-engineered CSS file (including LESS base) and override option (filter: mastodon_embed_content_style) * - uses different shortcode ('mastodon_embed' instead of 'mastodon') if the original mastodon-embed is active as well * - uses simple_html_dom instead of XPath @@ -22,7 +23,7 @@ * - improved debugging (WP_DEBUG + extended constants) * - alias for no_iframe attribute: disable_iframe * - force URL scheme attribute ('force_scheme') to further improve SSL only vs. unencrypted http-only sites (ie. fun with SSL enforcement in WP ;)) - * - automatically picks out specific single toot; to display the complete conversation, set 'no_center' to 1; also, only works with "direct" toot embedding (ie. parameter "no_iframe" set to 1) + * - automatically picks out specific single toot; to display the complete conversation, set 'no_center' to 1; also, only works with "direct" toot embedding */ if( !class_exists( 'simple_html_dom' ) ) { @@ -76,18 +77,35 @@ function __construct( $plugin_init = false ) { function init_assets() { /** * @hook mastodon_embed_content_style URL to the direct embed content CSS. - * @hook mastodon:embed_font_awesome_url Font Awesome CDN URL. Replace with your own or set to null to disable it from being loaded at all. + * @hook mastodon_embed_content_style_dark URL to the dark themed embed content CSS. + * @hook mastodon_embed_font_awesome_url Font Awesome CDN URL. Replace with your own or set to null to disable it from being loaded at all. */ + $embed_content_style = apply_filters( $this->pluginPrefix . 'content_style', plugin_dir_url(__FILE__) . 'embed-content.css' ); + $embed_content_style_dark = apply_filters( $this->pluginPrefix . 'content_style_dark', plugin_dir_url( __FILE__ ) . 'embed-content-dark.css' ); + $embed_content_fa_url = apply_filters( $this->pluginPrefix . 'font_awesome_url', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); if( !empty( $embed_content_fa_url ) ) { wp_register_style( $this->pluginPrefix . 'font-awesome', $embed_content_fa_url ); } - wp_register_style( $this->pluginPrefix . 'content', $embed_content_style ); + if( !empty( $embed_content_style ) || !empty( $embed_content_style_dark ) ) { + $strEmbedStyleURL = ( empty( $embed_content_style ) ? $embed_content_style_dark : $embed_content_style ); + + wp_register_style( $this->pluginPrefix . 'content', $strEmbedStyleURL ); + } + + /** + * @hook mastodon_embed_js_helpers_url URL to the default Javascript helper bundle. + */ + + $embed_js_helpers = apply_filters( $this->pluginPrefix . 'js_helpers_url', plugin_dir_url( __FILE__ ) . 'mastodon-embed.js' ); + if( !empty( $embed_js_helpers ) ) { + wp_register_script( $this->pluginPrefix . 'helpers', $embed_js_helpers, array('jquery' ), false, true ); + } } @@ -122,16 +140,22 @@ function shortcode( $atts = null, $content = null ) { /** * NOTE: Insecure - use default attributes + @function wp_parse_args or @function shortcode_atts (do essentially the same) */ + + /** + * @hook mastodon_embed_default_attributes - The default shortcode attributes; admin settings or custom config file hooks into this, too + */ - $default_atts = array( + $default_atts = apply_filters( $this->pluginPrefix . 'default_attributes', array( 'url' => '', // backward compatiblity (avoid having to increase the major version number) 'container_class' => 'mastodon-embed', 'width' => 700, 'height' => 200, 'css' => 'overflow: hidden', 'cache_timeout' => 24 * 60 * 60, // in seconds; defaults to 1 day - 'no_iframe' => 0, // workaround for localhost / testing purposes - 'disable_iframe' => 0, // alias + 'use_iframe' => 0, // workaround for localhost / testing purposes + 'iframe' => 0, // alias + 'no_iframe' => 1, // backward compatiblity to < 2.5 + 'disable_iframe' => 0, // backward compatiblity mode 'disable_font_awesome' => 0, 'force_scheme' => '', 'no_fa' => 0, @@ -139,7 +163,8 @@ function shortcode( $atts = null, $content = null ) { /*'center' => 1, // picks out only the main toot out of a conversation (entry-center class)*/ 'no_center' => 0, // disable "centering" function 'enable_debug' => 0, // specific debug parameter - ); + 'show_delay' => 350, // in ms + ) ); $atts = shortcode_atts( $default_atts, $atts ); @@ -192,13 +217,21 @@ function shortcode( $atts = null, $content = null ) { $http_code = wp_remote_retrieve_response_code($response); $body = wp_remote_retrieve_body( $response ); + if( !empty( $iframe ) || !empty( $use_iframe ) ) { + $iframe = true; + } + + /** + * NOTE: Obsolete code from @version 2.4.3 + */ + + /* if( !empty( $no_iframe ) || !empty( $disable_iframe ) ) { if( !empty( $disable_iframe ) ) { $no_iframe = true; } - } - + */ /** * NOTE: Switch case is so much easier .. not to mention a proper $return. */ @@ -223,7 +256,7 @@ function shortcode( $atts = null, $content = null ) { - if( empty( $no_iframe ) ) { // use iframe + if( !empty( $iframe ) ) { // use iframe $atom_url = $dom->find( "link[type='application/atom+xml']", 0); @@ -260,11 +293,25 @@ function shortcode( $atts = null, $content = null ) { } } + wp_enqueue_style( $this->pluginPrefix . 'content' ); if( empty( $disable_font_awesome ) && empty( $no_fa ) ) { wp_enqueue_style( $this->pluginPrefix . 'font-awesome' ); } + + + // always load JS + wp_enqueue_script( $this->pluginPrefix . 'helpers' ); + + // check if nsfw / cw is enabled + /*if( strpos( $embed_content, 'class="p-summary' ) !== false || strpos( $embed_content, 'class="status__content__spoiler-link' ) !== false ) { + // if so, enqueue JS + wp_enqueue_script( $this->pluginPrefix . 'helpers' ); + }*/ + + + } @@ -328,12 +375,7 @@ function shortcode( $atts = null, $content = null ) { if( !empty( $strCenteredWrap ) ) { $strWrap = str_replace( '%s', $strCenteredWrap, $strWrap ); // wrap centered toot into original div tag to avoid breaking the supplied CSS } - - /* - if( !empty( $no_iframe ) && ( !empty( $height) || !empty( $width ) ) { - }*/ - $return = sprintf( $strWrap, $return ); // append debug data (if available) diff --git a/readme.txt b/readme.txt index 10d1230..933d752 100644 --- a/readme.txt +++ b/readme.txt @@ -2,7 +2,7 @@ Contributors: usability.idealist Tags: mastodon, social networks, social, opensocial, twitter, embed, shortcode, status, toot Requires at least: 4.5 -Tested up to: 4.8 +Tested up to: 4.9 Stable tag: 2.4.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -20,7 +20,9 @@ Currently implemented features: * working caching * proper shortcode initialization * backward compatiblity for mastodon-embed -* fallback to "direct" embeds if embed via iframe is forbidden (eg. when testing on localhost); use shortcode attribute `no_iframe` and set it to `1` (eg. `[mastodon no_iframe="1"]http://my.mastodon.instance/@mastodon_user/12345[/mastodon]`) +* directly embed toots instead of relying on the iframe method +* fallback: if direct import fails, try using the iframe method; add the attribute `use_iframe` (alias: `iframe`) to the shortcode and set it to `1` (eg. `[mastodon use_iframe="1"]http://my.mastodon.instance/@mastodon_user/12345[/mastodon]`) +* former fallback: to "direct" embeds if embed via iframe is forbidden (eg. when testing on localhost); use shortcode attribute `no_iframe` and set it to `1` (eg. `[mastodon no_iframe="1"]http://my.mastodon.instance/@mastodon_user/12345[/mastodon]`) * Reverse-engineered CSS file (including LESS base) and override option (filter: mastodon_content_style) * Uses different shortcode ('mastodon' instead of 'mastodon') if the original mastodon-embed is active as well * Uses simple_html_dom class instead of XPath @@ -31,12 +33,13 @@ Currently implemented features: = Work in progress = -* Auto-Embed: An oEmbed-like embedding option (ie. just drop the URL into your post and its being automagickally turned into a proper Mastodon status embed) +* Settings screen in the admin interface +* Custom config file for advanced users (just drop it into the uploads folder, and tadaa! instant settings) = Future plans = +* Auto-Embed: An oEmbed-like embedding option (ie. just drop the URL into your post and its being automagickally turned into a proper Mastodon status embed) * Optionally use the regular Mastodon API to retrieve toots (requires a working mastodon user account) -* Maybe a settings page or a custom config file * Shortcode insertion via a nice user interface in the editor * Properly implemented shortcode asset loading via a separate class / plugin @@ -89,7 +92,7 @@ All available shortcode attributes: A. First test if there are any shortcode-interferring plugins. That could also be the original mastodon-embed. Aside of that, there was a mistake in the documentation before version 2.2.3, incorrectly stating the shortcode tag is 'mastodon_embed', while in reality it's **mastodon**. = Q. "Center"ing on a specific toot does not work = -A. This currently only works with directly embedding the toot (set 'no_iframe' to '1'), not with the iframe method. Probably, the latter is never going to work, thanks to XSS / same-site policies in modern browsers. +A. This only works with directly embedding the toot, not with the iframe method. Probably, the latter is never going to work, thanks to XSS / same-site policies in modern browsers. = Q. I have a question = A. Chances are, someone else has asked it. Either check out the support forum at WP or take a look at the official issue tracker: @@ -97,6 +100,10 @@ http://github.com/ginsterbusch/mastodon-embed/issues == Changelog == += 2.5 = + +* "direct embed" function is the default behaviour + = 2.4.3 = * Replaced 'center' parameter with 'no_center', thus reversing its functionality (kinda); ie. center function is now enabled by default, but still only works in conjunction with the 'no_iframe' attribute set to '1'