Changeset 1593695

Timestamp:

02/11/2017 03:52:41 AM (9 years ago)

Author:

chrisy

Message:

Add the class attribute

• Add class attribute to the shortcode to enable adding CSS classes to the img tag.
• Make the test graph on the admin page have a transparent background.
• Document emitjs attribute.

Location:

tfo-graphviz/trunk

Files:

• readme.txt (modified) (4 diffs)
• tfo-graphviz-admin.php (modified) (2 diffs)
• tfo-graphviz-method.php (modified) (1 diff)
• tfo-graphviz.php (modified) (2 diffs)

tfo-graphviz/trunk/readme.txt

@@ -1 +1 @@
 === TFO Graphviz ===
 Contributors: chrisy
-Tags: graphviz, flirble, network, diagram, graph, dot, neato, twopi, circo, fdp, visualisation, visualization, layout, hierarchical
+Tags: graphviz, flirble, network, diagram, graph, dot, neato, twopi, circo, fdp, visualisation, visualization, layout, hierarchical, graph, digraph, svg
 Requires at least: 4.2.0
 Tested up to: 4.7.2
@@ -30 +30 @@
 Where `<options>` is anything from this list. All are entirely optional:
 
+* `class="*`&lt;css_class&gt;`*"`
+
+  Adds an extra CSS class name (or names) to the `img` tag of the rendered graph. This is in addition to the
+  `graphviz` class that is already applied.
+
+* `emitjs="yes|no"`
+
+  Override the global setting that controls whether JavaScript is emitted as necessary. Typically this JavaScript is
+  only produced when rendering SVG output and is intended to ensure SVG images work on most browsers. However this can
+  sometimes be undesirable and thus this option gives some control over this.
+
 * `height="*`&lt;image_height&gt;`*"`
 
@@ -152 +163 @@
 = Can I manipulate the rendered graph using CSS in my WordPress theme? =
 
-The `img` elements are tagged with '`class="graphviz"`'.
+The `img` elements are tagged with '`class="graphviz"`'. Additionally, you can add `class="myclass"` to the shortcode to add additional classes to the `img` tag.
+
+= How can I make my graph have a transparent background?
+
+Add the tag `bgcolor="transparent"` to the root graph node. For example placing `graph [bgcolor="transparent"]` near the top like this:
+
+`
+[graphviz]
+digraph test {
+  graph [bgcolor="transparent"]
+  a1 -> a2 -> a3 -> a1;
+}
+[/graphviz]
 
 = Nothing is being rendered, maybe my DOT is broken? =
@@ -244 +267 @@
 == Changelog ==
 
+= 1.16 =
+* Add `class` attribute to the shortcode to enable adding CSS classes to the `img` tag.
+* Make the test graph on the admin page have a transparent background.
+* Document `emitjs` attribute.
+
 = 1.15 =
 * Validate graph language and output format.

tfo-graphviz/trunk/tfo-graphviz-admin.php

@@ -192 +192 @@
         @unlink(TFO_GRAPHVIZ_CONTENT_DIR . '/test.png');
 
-        $graphviz_object = $this->graphviz('digraph test { a1 -> a2 -> a3 -> a1; }', array(
+        $graphviz_object = $this->graphviz('digraph test { graph [bgcolor="transparent"] a1 -> a2 -> a3 -> a1; }', array(
                 'id' => 'test',
                 'lang' => 'dot',
@@ -379 +379 @@
             <td class="syntax">
             <p><?php printf( __( 'Use the shortcode syntax %s to insert graphs into your posts.', 'tfo-graphviz' ),
-            '<code>[graphviz]digraph test { a1 -> a2 -> a3 -> a1; }[/graphviz]</code>'
+            '<code>[graphviz]digraph test { graph [bgcolor="transparent"] a1 -> a2 -> a3 -> a1; }[/graphviz]</code>'
         ); ?></p>
                 <p><?php _e( 'For more information, see the <a href="http://blog.flirble.org/projects/tfo-graphviz/">FAQ</a>' ); ?></p>

tfo-graphviz/trunk/tfo-graphviz-method.php

@@ -43 +43 @@
     function __construct($dot, $atts) {
         $this->dot  = (string) $dot;
-        foreach (array('id', 'lang', 'simple', 'output', 'href', 'imap', 'title', 'size', 'dpi') as $att) {
+        foreach (array('id', 'lang', 'simple', 'output', 'href', 'imap', 'title', 'size', 'dpi', 'emitjs', 'class') as $att) {
             if (array_key_exists($att, $atts))
                 $this->$att = $atts[$att];

tfo-graphviz/trunk/tfo-graphviz.php

@@ -176 +176 @@
                 'dpi' => '',
                 'emitjs' => TFO_GRAPHVIZ_EMITJS,
+                'class' => '',
             ), $_atts);
 
@@ -247 +248 @@
             }
             $alt = esc_attr($gv->title);
-            $ret = "<img src=\"$url\" class=\"graphviz\"";
+            $ret = "<img src=\"$url\" class=\"graphviz";
+            if (!empty($atts['class'])) $ret .= " ".esc_attr($atts['class']);
+            $ret .= "\"";
             if (!empty($alt)) $ret .= " alt=\"$alt\" title=\"$alt\"";
             if (!empty($gv->imap)) $ret .= " usemap=\"#$gv->id\"";