From b304447bb14484cd10cbe198353127b97c6f252d Mon Sep 17 00:00:00 2001 From: Hernawan Fa'iz Abdillah Date: Fri, 15 Aug 2014 06:30:58 +0700 Subject: [PATCH] Change to cleaner theme, improve UX on tooltip insertion --- ajax/form.html | 27 ++++-- readme.txt | 29 ++++-- responsive-tooltip-admin-page.php | 51 ++++++++--- responsive-tooltip-tinyMCE.js | 68 ++++++++++++-- responsive-tooltip.css | 146 +++++++++++++++++------------- responsive-tooltip.js | 0 responsive-tooltip.org.css | 146 +++++++++++++++++------------- responsive-tooltip.php | 46 +++++++--- 8 files changed, 340 insertions(+), 173 deletions(-) mode change 100644 => 100755 ajax/form.html mode change 100644 => 100755 readme.txt mode change 100644 => 100755 responsive-tooltip-admin-page.php mode change 100644 => 100755 responsive-tooltip-tinyMCE.js mode change 100644 => 100755 responsive-tooltip.css mode change 100644 => 100755 responsive-tooltip.js mode change 100644 => 100755 responsive-tooltip.org.css mode change 100644 => 100755 responsive-tooltip.php diff --git a/ajax/form.html b/ajax/form.html old mode 100644 new mode 100755 index 41ec7b3..ca170af --- a/ajax/form.html +++ b/ajax/form.html @@ -1,13 +1,16 @@
- - -
- - + +
\ No newline at end of file + + + diff --git a/readme.txt b/readme.txt old mode 100644 new mode 100755 index a53defa..331cad7 --- a/readme.txt +++ b/readme.txt @@ -1,9 +1,9 @@ === Plugin Name === -Contributors: ItayXD +Contributors: ItayXD, mirkolofio , abdillah Tags: Tooltip, tinyMCE, responsive, mobile-friendly Requires at least: 3.0.1 -Tested up to: 3.5.1 -Stable tag: 1.3 +Tested up to: 3.8 +Stable tag: 1.5.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -17,7 +17,7 @@ tooltips are used to present a tiny amount of hidden content (mainly explanatory * It's responsive. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target (top, bottom; left, center, right). * It's mobile-friendly. It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself. * It's HTML formatting capable. Need to write some words in italic or so? No problem, this will work out. -* It's extremely easy to use: A tooltip button in added to the default WordPress editor, all you have to do it click it and fill the pop-up dialog, the rest is taken care of automatically. +* It's extremely easy to use: A tooltip button in added to the default WordPress editor, all you have to do is select a text, click the button and fill the pop-up dialog, the rest is taken care of automatically. ###Advance * The button adds a WordPress short-code, if you want the tip to be HTML formated (avoid block level elements) you can just wrap it with [tooltip tip=""][/tooltip] in tinyMCE. @@ -35,7 +35,7 @@ Thanks to [Osvaldas]( http://osvaldas.info/) who made the Js and the CSS. WordPr == Frequently Asked Questions == -Non I can think of, contact for help. +None I can think of, contact for help. == Screenshots == 1. The tooltip in action. @@ -43,7 +43,24 @@ Non I can think of, contact for help. == Changelog == -= 1.2 = += 1.5.3 = +* improve UX tooltip insertion +* change theme to simple, good-looking style + += 1.5.2 = +* added the ajax folder we.. lost + += 1.5.1 = +* Allow the "hover" attribute to provide nested shortcode available in bubble content +* "invert" attribute is still available but it's deprecated + += 1.5 = +* Allow the "invert" attribute to provide nested shortcode available in bubble content + += 1.4 = +* Nested Shortcodes in tooltip base content (not the bubble content) + += 1.3 = * Bug fix- Dialog underlay. = 1.2 = diff --git a/responsive-tooltip-admin-page.php b/responsive-tooltip-admin-page.php old mode 100644 new mode 100755 index 2c73b9f..3851de3 --- a/responsive-tooltip-admin-page.php +++ b/responsive-tooltip-admin-page.php @@ -1,7 +1,7 @@ +

Responsive Mobile-Friendly Tooltip Settings

@@ -47,12 +48,14 @@ function RMFtooltip_input_processor ($input) { //Process user data } /*----------Save css to file------------*/ if ($input[chkbx_use_custom_css] == 'on') { - if ($input[chkbx_replace_css] == 'on') { - $css_file = $input[textarea_css]; //Writes only the new changes - } else { - $css_file = file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.org.css'); - $css_file .= "\n{$input[textarea_css]}"; //Adds the entered code at the end of the original code - } + $css_file = $input[textarea_css]; //Writes only the new changes + + // : if ($input[chkbx_replace_css] == 'on') { + // : $css_file = $input[textarea_css]; //Writes only the new changes + // : } else { + // : $css_file = file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.org.css'); + // : $css_file .= "\n{$input[textarea_css]}"; //Adds the entered code at the end of the original code + // : } } else { //Else writes the original file $css_file = file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.org.css'); //Writes only the original file } @@ -91,9 +94,10 @@ function chkbx_use_custom_css_func () { + @@ -113,10 +118,30 @@ function textarea_css_func () { - + + + + + + + + + +
+ Hover on text to show a Responsive Tooltip. +
'); if (window.RMFtooltip_cache) { i.html(window.RMFtooltip_cache); @@ -14,30 +19,79 @@ i.html(window.RMFtooltip_cache); }); } - i.dialog({ + // : var sel_node = tinymce.activeEditor.selection.getNode(); + var sel_content = tinymce.activeEditor.selection.getContent({format : 'html'}); + // : + // : if(sel_node.innerHTML.contains(sel_content)) { + // : print("ok") + // : } + + // Hack for this btn pointer + ttip_btn = jQuery("[aria-label='ToolTip']"); + + if(dlg != null) { + dlg.dialog("destroy"); + dlg.empty(); + dlg = null; + + ttip_btn.removeClass('mce-active'); + return; + } else { + ttip_btn.addClass('mce-active'); + } + + dlg = i.dialog({ autoOpen: true, draggable: false, resizable: false, + position: { my: "left-"+(ttip_btn.width()/2)+" top+"+(ttip_btn.height()/2+2), /*at: "right bottom",*/ of: ttip_btn }, modal: true, dialogClass: 'wp-dialog', buttons: { "OK": function() { - RMFtooltip_text = jQuery("#RMFtooltip_text").val(); + // : RMFtooltip_text = jQuery("#RMFtooltip_text").val(); RMFtooltip_tip = jQuery("#RMFtooltip_tip").val(); - if (RMFtooltip_text != null && RMFtooltip_text != '' && RMFtooltip_tip != null && RMFtooltip_tip != ''){ - ed.execCommand('mceInsertContent', false, '[tooltip tip="'+RMFtooltip_tip+'"]'+RMFtooltip_text+'[/tooltip]'); + if (RMFtooltip_tip != null && RMFtooltip_tip != ''){ + // : ed.execCommand('mceInsertContent', false, '[tooltip tip="'+RMFtooltip_tip+'"]'+RMFtooltip_text+'[/tooltip]'); + tinymce.activeEditor.selection.setContent('[tooltip tip="'+RMFtooltip_tip+'"]'+sel_content+'[/tooltip]'); + } else { + jQuery("#RMFtooltip_tip").focus(); + return; } - jQuery( this ).dialog( "close" ); + jQuery( this ).dialog("close"); jQuery(this).empty(); + ttip_btn.removeClass('mce-active'); + ed.focus(); }, Cancel: function() { jQuery( this ).dialog( "destroy" ); jQuery(this).empty(); + dlg = null; + + ttip_btn.removeClass('mce-active'); + ed.focus(); } + }, + close: function( event, ui ) { + window.console.log(event); } }); } }); + + ed.onClick.add(function(ed, e) { + // : window.console.debug('Editor was clicked: ' + e.target.nodeName); + + if(dlg != null) { + dlg.dialog("destroy"); + dlg.empty(); + dlg = null; + + ttip_btn.removeClass('mce-active'); + return; + } + }); + }, createControl : function(n, cm) { return null; @@ -53,4 +107,4 @@ } }); tinymce.PluginManager.add('RMFtooltip', tinymce.plugins.RMFtooltip); -})(); \ No newline at end of file +})(); diff --git a/responsive-tooltip.css b/responsive-tooltip.css old mode 100644 new mode 100755 index 24ffef9..dc1c929 --- a/responsive-tooltip.css +++ b/responsive-tooltip.css @@ -1,62 +1,84 @@ -abbr { - border-bottom: 1px dotted #111111; - cursor: help; - display: inline-block; -} -#tooltip -{ - font-family: Ubuntu, sans-serif; - font-size: 0.875em; - text-align: center; - text-shadow: 0 1px rgba( 0, 0, 0, .5 ); - line-height: 1.5; - color: #fff; - background: #333; - background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) ); - background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); - -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); - box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); - position: absolute; - z-index: 100; - padding: 15px; - pointer-events: none; -} -#tooltip:after -{ - width: 0; - height: 0; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-top: 10px solid #333; - content: ''; - position: absolute; - left: 50%; - bottom: -10px; - margin-left: -10px; -} -#tooltip.top:after -{ - border-top-color: transparent; - border-bottom: 10px solid #333; - border-bottom-color: rgba( 0, 0, 0, .6 ); - top: -20px; - bottom: auto; -} -#tooltip.left:after -{ - left: 10px; - margin: 0; -} -#tooltip.right:after -{ - right: 10px; - left: auto; - margin: 0; -} \ No newline at end of file +/* Text Triggering Tooltip Style */ +abbr { + /* Recommended Code Start */ + display: inline-block; + /* Recommended Code End */ + + border-bottom: 1px dotted #111111; + cursor: help; +} + +/* Tooltip Body Style */ +#tooltip +{ + /* Important Code Start + * Delete not recommended */ + position: absolute; + z-index: 100; + pointer-events: none; + /* Important Code End */ + + /* Editable Start */ + padding: 10px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); + -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); + box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); + + + font-family: Ubuntu, sans-serif; + font-size: 0.875em; + line-height: 1.5; + text-align: center; + text-shadow: 1px 1px rgba( 0, 0, 0, .5 ); + color: #fff; + + background-color: #00ccaa; + /* Editable End*/ +} + +/* Tooltip Arrow Style */ +#tooltip:after +{ + position: absolute; + width: 0px; + height: 0px; + bottom: -10px; + left: 50%; + margin-left: -5px; + + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 15px solid #00ccaa; + + content: ""; +} + +/* Tooltip Arrow Style */ +#tooltip.top:after +{ + top: -20px; + bottom: auto; + + border-top-color: transparent; + border-bottom: 10px solid #00ccaa; + border-bottom-color: rgba( 0, 0, 0, .6 ); +} + +/* Tooltip Arrow Style */ +#tooltip.left:after +{ + left: 10px; + margin: 0; +} + +/* Tooltip Arrow Style */ +#tooltip.right:after +{ + right: 10px; + left: auto; + margin: 0; +} diff --git a/responsive-tooltip.js b/responsive-tooltip.js old mode 100644 new mode 100755 diff --git a/responsive-tooltip.org.css b/responsive-tooltip.org.css old mode 100644 new mode 100755 index 24ffef9..dc1c929 --- a/responsive-tooltip.org.css +++ b/responsive-tooltip.org.css @@ -1,62 +1,84 @@ -abbr { - border-bottom: 1px dotted #111111; - cursor: help; - display: inline-block; -} -#tooltip -{ - font-family: Ubuntu, sans-serif; - font-size: 0.875em; - text-align: center; - text-shadow: 0 1px rgba( 0, 0, 0, .5 ); - line-height: 1.5; - color: #fff; - background: #333; - background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) ); - background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); - -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); - box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); - position: absolute; - z-index: 100; - padding: 15px; - pointer-events: none; -} -#tooltip:after -{ - width: 0; - height: 0; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-top: 10px solid #333; - content: ''; - position: absolute; - left: 50%; - bottom: -10px; - margin-left: -10px; -} -#tooltip.top:after -{ - border-top-color: transparent; - border-bottom: 10px solid #333; - border-bottom-color: rgba( 0, 0, 0, .6 ); - top: -20px; - bottom: auto; -} -#tooltip.left:after -{ - left: 10px; - margin: 0; -} -#tooltip.right:after -{ - right: 10px; - left: auto; - margin: 0; -} \ No newline at end of file +/* Text Triggering Tooltip Style */ +abbr { + /* Recommended Code Start */ + display: inline-block; + /* Recommended Code End */ + + border-bottom: 1px dotted #111111; + cursor: help; +} + +/* Tooltip Body Style */ +#tooltip +{ + /* Important Code Start + * Delete not recommended */ + position: absolute; + z-index: 100; + pointer-events: none; + /* Important Code End */ + + /* Editable Start */ + padding: 10px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); + -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); + box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); + + + font-family: Ubuntu, sans-serif; + font-size: 0.875em; + line-height: 1.5; + text-align: center; + text-shadow: 1px 1px rgba( 0, 0, 0, .5 ); + color: #fff; + + background-color: #00ccaa; + /* Editable End*/ +} + +/* Tooltip Arrow Style */ +#tooltip:after +{ + position: absolute; + width: 0px; + height: 0px; + bottom: -10px; + left: 50%; + margin-left: -5px; + + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 15px solid #00ccaa; + + content: ""; +} + +/* Tooltip Arrow Style */ +#tooltip.top:after +{ + top: -20px; + bottom: auto; + + border-top-color: transparent; + border-bottom: 10px solid #00ccaa; + border-bottom-color: rgba( 0, 0, 0, .6 ); +} + +/* Tooltip Arrow Style */ +#tooltip.left:after +{ + left: 10px; + margin: 0; +} + +/* Tooltip Arrow Style */ +#tooltip.right:after +{ + right: 10px; + left: auto; + margin: 0; +} diff --git a/responsive-tooltip.php b/responsive-tooltip.php old mode 100644 new mode 100755 index aaf8a56..009c76c --- a/responsive-tooltip.php +++ b/responsive-tooltip.php @@ -1,21 +1,35 @@ null, - ), $atts)); - if ($content && $tip) { + 'tip' => null, + 'hover' => null, + 'invert' => false, // deprecated + ), $atts)); + + // deprecated + if ($invert) { + list ($tip, $hover) = array ($hover, $tip); + } + + if ($content && ($tip || $hover)) { + $content = do_shortcode( $content ); + + if ($hover) { // swap tip/content + list ($tip, $content) = array ($content, $hover); + } + $return = "".$content.""; return $return; } @@ -70,14 +84,16 @@ function RMFtooltip_stylesheet_js() { update_option('RMFtooltip_version', $c_version); $RMFtooltip_style_settings = get_option('RMFtooltip_style_settings'); //Genrate user's custom CSS file if ($RMFtooltip_style_settings[chkbx_use_custom_css] == 'on') { - if ($RMFtooltip_style_settings[chkbx_replace_css] == 'on') { - $css_file = $RMFtooltip_style_settings[textarea_css]; //Writes only the new changes - } else { - $css_file = file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.org.css'); - $css_file .= "\n{$RMFtooltip_style_settings[textarea_css]}"; //Adds the entered code at the end of the original code - } + $css_file = $RMFtooltip_style_settings[textarea_css]; //Writes only the new changes + + // : if ($RMFtooltip_style_settings[chkbx_replace_css] == 'on') { + // : $css_file = $RMFtooltip_style_settings[textarea_css]; //Writes only the new changes + // : } else { + // : $css_file = file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.org.css'); + // : $css_file .= "\n{$RMFtooltip_style_settings[textarea_css]}"; //Adds the entered code at the end of the original code + // : } } else { //Else writes the original file $css_file = file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.org.css'); //Writes only the original file } file_put_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.css', $css_file, LOCK_EX); -} \ No newline at end of file +}