Skip to content

Change to cleaner theme, improve UX on tooltip insertion #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Abdillah wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Change to cleaner theme, improve UX on tooltip insertion #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions ajax/form.html
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<form>
<label for="RMFtooltip_text">Enter the tile (the text you hover on)</label>
<input type="text" name="RMFtooltip_text" id="RMFtooltip_text" value="text" class="text ui-widget-content ui-corner-all" />
<br />
<label for="RMFtooltip_tip">Enter the tip (the popup text)</label>
<input type="text" name="RMFtooltip_tip" id="RMFtooltip_tip" value="tip" class="text ui-widget-content ui-corner-all" />
<label for="RMFtooltip_tip">Enter the tip text (the popup text)</label>
<input type="text" name="RMFtooltip_tip" id="RMFtooltip_tip" placeholder="Tips" class="text ui-widget-content ui-corner-all" />
</form>
<style>
.ui-dialog {
border-radius: 2px;
border: 1px solid #ddd;
box-shadow: 2px 2px 5px #ddd;
}
.ui-dialog>* {
padding-left: 10px;
padding-right: 10px;
}
.ui-dialog-title {
color: #464646;
Expand All @@ -26,7 +29,15 @@
margin-bottom: 10px;
}
.ui-button-text-only {
width: 25%;
margin: 3px 12.5% 3px !important;
width: calc(49% - 5px);
margin: 0px 1% 5px 1% !important;
}

#RMFtooltip_tip {
width: 100%;
}
</style>
</style>

<script>
jQuery('#RMFtooltip_tip').focus();
</script>
29 changes: 23 additions & 6 deletions readme.txt
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
=== Plugin Name ===
Contributors: ItayXD
Contributors: ItayXD, mirkolofio <mirkolofio@gmail.com>, abdillah <abdillah96.bu@gmail.com>
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

Expand All @@ -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="<your tip>"]<your text>[/tooltip] in tinyMCE.
Expand All @@ -35,15 +35,32 @@ 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.
2. The editor dialog.

== 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 =
Expand Down
51 changes: 38 additions & 13 deletions responsive-tooltip-admin-page.php
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
<?php
//-------------- Register the menu page ------------------------
function RMFtooltip_admin_menu() {
add_options_page("Responsive Mobile-Friendly Tooltip Settings", "Responsive Mobile-Friendly Tooltip", "manage_options", "RMFtooltip-options", "RMFtooltip_admin_page");
add_options_page("Responsive Mobile-Friendly Tooltip Settings", "Responsive Tooltip", "manage_options", "RMFtooltip-options", "RMFtooltip_admin_page");
}
add_action('admin_menu', 'RMFtooltip_admin_menu');
//--Creating the page
function RMFtooltip_admin_page () { ?>
<script type="text/javascript">
function chkchng(){ //Disable input fields as needed
if(jQuery('#chkbx_use_custom_css').is(":checked")) {
jQuery('#chkbx_replace_css').prop('disabled', false);
// : jQuery('#chkbx_replace_css').prop('disabled', false);
jQuery('#textarea_css').prop('disabled', false);
} else if (!jQuery('#chkbx_use_custom_css').is(":checked")) {
jQuery('#chkbx_replace_css').prop('disabled', true);
// : jQuery('#chkbx_replace_css').prop('disabled', true);
jQuery('#textarea_css').prop('disabled', true);
}
}
</script>
<!--script src=<?php /*echo file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.js');*/ ?> type="text/javascript" ></script-->
<div class="wrap">
<?php screen_icon(); ?>
<h2>Responsive Mobile-Friendly Tooltip Settings</h2>
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -91,9 +94,10 @@ function chkbx_use_custom_css_func () {
</tr>
<?php
}
add_settings_field('chkbx_replace_css', '', 'chkbx_replace_css_func', 'RMFtooltip-options', 'RMFtooltip_style_settings'); //Create second checkbox
/* add_settings_field('chkbx_replace_css', '', 'chkbx_replace_css_func', 'RMFtooltip-options', 'RMFtooltip_style_settings'); //Create second checkbox
function chkbx_replace_css_func () {
global $RMFtooltip_style_settings; ?>
<!--
<tr valign="top">
<th scope="row">
<label for="chkbx_replace_css">Replace original CSS?</label>
Expand All @@ -103,8 +107,9 @@ function chkbx_replace_css_func () {
<p class="description">Check if want to replace the default CSS rules rather than add to them</p>
</td>
</tr>
-->
<?php
}
} */
add_settings_field('textarea_css', '', 'textarea_css_func', 'RMFtooltip-options', 'RMFtooltip_style_settings'); //Creates the textarea
function textarea_css_func () {
global $RMFtooltip_style_settings; ?>
Expand All @@ -113,10 +118,30 @@ function textarea_css_func () {
<label for="textarea_css">Your CSS code</label>
</th>
<td>
<textarea id="textarea_css" class="large-text" name="RMFtooltip_style_settings[textarea_css]" cols="50" rows="15" placeholder="Enter your css code here" <?php disabled( $RMFtooltip_style_settings[chkbx_use_custom_css], 'off'); ?> ><?php echo esc_textarea( $RMFtooltip_style_settings[textarea_css] ); ?></textarea>
<textarea id="textarea_css" class="large-text code" name="RMFtooltip_style_settings[textarea_css]" cols="50" rows="15" placeholder="Enter your css code here" <?php disabled( $RMFtooltip_style_settings[chkbx_use_custom_css], 'off'); ?> <?php echo esc_textarea( $RMFtooltip_style_settings[textarea_css] ); ?> >
<?php echo file_get_contents(plugin_dir_path(__FILE__) . 'responsive-tooltip.css'); ?>
</textarea>
</td>
</tr>
<?php
}

add_settings_field('tooltip_demo', '', 'tooltip_demo_init', 'RMFtooltip-options', 'RMFtooltip_style_settings'); //Creates the demo area
function tooltip_demo_init () {
global $RMFtooltip_style_settings;

RMFtooltip_stylesheet_js(); ?>
<tr valign="top">
<th scope="row">
<label for="textarea_css">Demo Tooltip</label>
</th>
<td>
<div style="border: 1px solid #000; padding: 20px; width: calc(100% - 50px);">
Hover on text to show a <abbr title="A responsive tooltip :)" rel="tooltip">Responsive Tooltip</abbr>.
</div>
</td>
</tr>
<?php
}
}
add_action('admin_init', 'RMFtooltip_admin_init');
add_action('admin_init', 'RMFtooltip_admin_init');
68 changes: 61 additions & 7 deletions responsive-tooltip-tinyMCE.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
(function() {
tinymce.create('tinymce.plugins.RMFtooltip', {
init : function(ed, url) {
var ttip_btn = null;
var dlg = null;

ttip_btn = jQuery("[aria-label='ToolTip']");

ed.addButton('RMFtooltip', {
title : 'ToolTip',
image : url+'/RMFtooltipbutton.png',
onclick : function() {
onclick : function() {
i = jQuery('<div title="Create your tooltip" ></div>');
if (window.RMFtooltip_cache) {
i.html(window.RMFtooltip_cache);
Expand All @@ -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;
Expand All @@ -53,4 +107,4 @@
}
});
tinymce.PluginManager.add('RMFtooltip', tinymce.plugins.RMFtooltip);
})();
})();
Loading