Completely drop footnotes and use tooltips instead

This commit is contained in:
Rouslan Placella 2012-06-06 12:42:39 +01:00
parent 30d7d92e02
commit 796012fcc5
15 changed files with 51 additions and 476 deletions

View File

@ -194,7 +194,7 @@ $(function() {
$("table.insertRowTable").addClass("ajax");
$("#buttonYes").addClass("ajax");
$div = $("#insert_table_dialog");
PMA_convertFootnotesToTooltips($div);
PMA_showHints($div);
}
PMA_ajaxRemoveMessage($msgbox);
}); // end $.get()

View File

@ -1673,7 +1673,7 @@ function PMA_createTableDialog( $div, url , target)
buttons: button_options
}); // end dialog options
}
PMA_convertFootnotesToTooltips($div);
PMA_showHints($div);
PMA_ajaxRemoveMessage($msgbox);
}); // end $.get()
@ -2922,10 +2922,6 @@ $(function() {
});
});
$(function() {
PMA_convertFootnotesToTooltips();
});
/**
* Ensures indexes names are valid according to their type and, for a primary
* key, lock index name to 'PRIMARY'
@ -2961,55 +2957,22 @@ function checkIndexName(form_id)
} // end of the 'checkIndexName()' function
/**
* function to convert the footnotes to tooltips
* Function to display tooltips that were
* generated on the PHP side by PMA_showHint()
*
* @param jquery-Object $div a div jquery object which specifies the
* domain for searching footnootes. If we
* ommit this parameter the function searches
* the footnotes in the whole body
* @param object $div a div jquery object which specifies the
* domain for searching for tooltips. If we
* omit this parameter the function searches
* in the whole body
**/
function PMA_convertFootnotesToTooltips($div)
function PMA_showHints($div)
{
// Hide the footnotes from the footer (which are displayed for
// JavaScript-disabled browsers) since the tooltip is sufficient
if ($div == undefined || ! $div instanceof jQuery || $div.length == 0) {
$div = $("body");
}
$footnotes = $div.find(".footnotes");
$footnotes.hide();
$footnotes.find('span').each(function() {
$(this).children("sup").remove();
});
// The border and padding must be removed otherwise a thin yellow box remains visible
$footnotes.css("border", "none");
$footnotes.css("padding", "0px");
// Replace the superscripts with the help icon
$div.find("sup.footnotemarker").hide();
$div.find("img.footnotemarker").show();
$div.find("img.footnotemarker").each(function() {
var img_class = $(this).attr("class");
/** img contains two classes, as example "footnotemarker footnote_1".
* We split it by second class and take it for the id of span
*/
img_class = img_class.split(" ");
for (i = 0; i < img_class.length; i++) {
if (img_class[i].split("_")[0] == "footnote") {
var span_id = img_class[i].split("_")[1];
}
}
/**
* Now we get the #id of the span with span_id variable. As an example if we
* initially get the img class as "footnotemarker footnote_2", now we get
* #2 as the span_id. Using that we can find footnote_2 in footnotes.
* */
var tooltip_text = $footnotes.find("span#footnote_" + span_id).html();
$(this).qtip({
content: tooltip_text,
$div.find('.pma_hint').each(function () {
$(this).children('img').qtip({
content: $(this).children('span').html(),
show: { delay: 0 },
hide: { delay: 1000 },
style: { background: '#ffffcc' }
@ -3017,6 +2980,10 @@ function PMA_convertFootnotesToTooltips($div)
});
}
$(function() {
PMA_showHints();
});
/**
* This function handles the resizing of the content frame
* and adjusts the top menu according to the new size of the frame

View File

@ -218,7 +218,7 @@ $(function() {
}
}); //dialog options end
displayPasswordGenerateButton();
PMA_convertFootnotesToTooltips($div);
PMA_showHints($div);
PMA_ajaxRemoveMessage($msgbox);
$div.find("input[autofocus]").focus();
@ -354,7 +354,7 @@ $(function() {
}); //dialog options end
displayPasswordGenerateButton();
PMA_ajaxRemoveMessage($msgbox);
PMA_convertFootnotesToTooltips($div);
PMA_showHints($div);
}); // end $.get()
});

View File

@ -437,7 +437,7 @@ $(function() {
if (data != null) {
tab.find('.tabInnerContent').html(data);
}
PMA_convertFootnotesToTooltips();
PMA_showHints();
break;
case 'statustabs_queries':
if (data != null) {

View File

@ -301,7 +301,7 @@ $(function() {
});
checkIndexType();
checkIndexName("index_frm");
PMA_convertFootnotesToTooltips($div);
PMA_showHints($div);
// Add a slider for selecting how many columns to add to the index
$div.find('.slider').slider({
animate: true,
@ -542,7 +542,7 @@ $(function() {
$div = $("#add_columns");
/*changed the z-index of the enum editor to allow the edit*/
$("#enum_editor").css("z-index", "1100");
PMA_convertFootnotesToTooltips($div);
PMA_showHints($div);
// set focus on first column name input
$div.find("input.textfield").eq(0).focus();
}
@ -620,7 +620,7 @@ function changeColumns(action,url)
/*changed the z-index of the enum editor to allow the edit*/
$("#enum_editor").css("z-index", "1100");
$div = $("#change_column_dialog");
PMA_convertFootnotesToTooltips($div);
PMA_showHints($div);
}
PMA_ajaxRemoveMessage($msgbox);
}); // end $.get()

View File

@ -10,7 +10,6 @@ if (! defined('PHPMYADMIN')) {
}
require_once 'libraries/Scripts.class.php';
require_once 'libraries/Footnotes.class.php';
/**
* Class used to output the footer
@ -19,13 +18,6 @@ require_once 'libraries/Footnotes.class.php';
*/
class PMA_Footer
{
/**
* PMA_Footnotes instance
*
* @access private
* @var object
*/
private $_footnotes;
/**
* PMA_Scripts instance
*
@ -44,7 +36,7 @@ class PMA_Footer
private $_isAjax;
/**
* Whether to only close the BODY and HTML tags
* or also include scripts, footnotes, errors and links
* or also include scripts, errors and links
*
* @access private
* @var bool
@ -66,7 +58,6 @@ class PMA_Footer
public function __construct()
{
$this->_isEnabled = true;
$this->_footnotes = new PMA_Footnotes();
$this->_scripts = new PMA_Scripts();
$this->_isMinimal = false;
$this->_addDefaultScripts();
@ -282,16 +273,6 @@ class PMA_Footer
$this->_isMinimal = true;
}
/**
* Returns the PMA_Footnotes object
*
* @return PMA_Footnotes object
*/
public function getFootnotes()
{
return $this->_footnotes;
}
/**
* Renders the footer
*
@ -322,13 +303,6 @@ class PMA_Footer
$retval .= $this->_getSelfLink($url_params);
}
$retval .= $this->_getDebugMessage();
}
if (! $this->_isMinimal) {
// display Footnotes and error messages even in ajax reqests
// FIXME: nootnotes should be sent as JSON
$retval .= $this->_footnotes->getDisplay();
}
if (! $this->_isAjax && ! $this->_isMinimal) {
$retval .= $this->_getErrorMessages();
$retval .= $this->_scripts->getDisplay();
// Include possible custom footers
@ -337,8 +311,7 @@ class PMA_Footer
include CUSTOM_FOOTER_FILE;
$retval .= ob_end_clean();
}
}
if (! $this->_isAjax) {
} else if (! $this->_isAjax) {
$retval .= "</body></html>";
}
}

View File

@ -1,153 +0,0 @@
<?php
/* vim: set expandtab sw=4 ts=4 sts=4: */
/**
* Contains the PMA_Footnote and the PMA_Footnotes classes
*
* @package PhpMyAdmin
*/
if (! defined('PHPMYADMIN')) {
exit;
}
/**
* Used by PMA_Footer, this class manages footnotes
*
* @package PhpMyAdmin
*/
class PMA_Footnotes
{
/**
* An array of footnotes
*
* @access private
* @var array
*/
private $_footnotes;
/**
* Generates new PMA_Footnotes objects
*
* @return PMA_Footnotes object
*/
public function __construct()
{
$this->_footnotes = array();
}
/**
* Setter for the ID attribute in the BODY tag
*
* @param mixed $message The message to be used for the footnote.
* Can be a string or a PMA_Message object.
*
* @return string The marker to be displayed near the element
* that is being referenced by the footnote
*/
public function add($message)
{
if ($message instanceof PMA_Message) {
$key = $message->getHash();
$message = $message->getDisplay();
} else {
$key = md5($message);
}
if (! isset($this->_footnotes[$key])) {
$id = count($this->_footnotes) + 1;
$this->_footnotes[$key] = new PMA_Footnote(
$id,
$message
);
}
return $this->_footnotes[$key]->getMarker();
}
/**
* Renders the footnotes
*
* @return string
*/
public function getDisplay()
{
$retval = '';
if (count($this->_footnotes)) {
$retval .= '<div class="footnotes">';
foreach ($this->_footnotes as $footnote) {
$retval .= $footnote->getDisplay();
}
$retval .= '</div>';
}
return $retval;
}
}
/**
* Each object of this class represents a footnote
* Used by PMA_Footnotes
*
* @package PhpMyAdmin
*/
class PMA_Footnote
{
/**
* Footnote identifier
*
* @var int
* @access private
*/
private $_id;
/**
* The message to be used for the footnote
*
* @var string
* @access private
*/
private $_message;
/**
* Generates new PMA_Footnotes objects
*
* @param int $id Footnote identifier
* @param string $message The message to be used for the footnote
*
* @return PMA_Footnote object
*/
public function __construct($id, $message)
{
$this->_id = $id;
$this->_message = $message;
}
/**
* Returns the marker to be displayed near the element
* that is being referenced by this footnote
*
* @return string
*/
public function getMarker()
{
$retval = '<sup class="footnotemarker">' . $this->_id . '</sup>';
$retval .= PMA_getImage(
'b_help.png',
'',
array('class' => 'footnotemarker footnote_' . $this->_id)
);
return $retval;
}
/**
* Renders the footnote
*
* @return string
*/
public function getDisplay()
{
$retval = '<span id="footnote_' . $this->_id . '">';
$retval .= '<sup>' . $this->_id . '</sup> ';
$retval .= $this->_message;
$retval .= '</span><br />';
return $retval;
}
}
?>

View File

@ -27,15 +27,15 @@
* $message = PMA_Message::success('strSomeLocaleMessage');
*
* // create another message, a hint, with a localized string which expects
* // two parameters: $strSomeFootnote = 'Read the %smanual%s'
* $hint = PMA_Message::notice('strSomeFootnote');
* // two parameters: $strSomeTooltip = 'Read the %smanual%s'
* $hint = PMA_Message::notice('strSomeTooltip');
* // replace %d with the following params
* $hint->addParam('[a@./Documentation.html#cfg_Example@_blank]');
* $hint->addParam('[/a]');
* // add this hint as a footnote
* // add this hint as a tooltip
* $hint = PMA_showHint($hint);
*
* // add the retrieved footnote reference to the original message
* // add the retrieved tooltip reference to the original message
* $message->addMessage($hint);
*
* // create another message ...

View File

@ -545,12 +545,6 @@ if (PMA_isValid($_REQUEST['sql_query'])) {
//$_REQUEST['server']; // checked later in this file
//$_REQUEST['lang']; // checked by LABEL_loading_language_file
/**
* footnotes to be displayed ot the page bottom
* @global array $footnotes
*/
$GLOBALS['footnotes'] = array();
/******************************************************************************/
/* loading language file LABEL_loading_language_file */

View File

@ -528,21 +528,23 @@ function PMA_showPHPDocu($target)
} // end of the 'PMA_showPHPDocu()' function
/**
* returns HTML for a footnote marker and add the messsage to the footnotes
* Returns HTML code for a tooltip
*
* @param string $message the error message
* @param bool $bbcode whether to interpret BB code
* @param string $type message types
* @param string $message the message for the tooltip
*
* @return string html code for a footnote marker
* @return string
*
* @access public
*/
function PMA_showHint($message)
{
$response = PMA_Response::getInstance();
$footnotes = $response->getFooter()->getFootnotes();
return $footnotes->add($message);
$retval = '<span class="pma_hint">';
$retval .= PMA_getImage('b_help.png');
$retval .= '<span class="hide">';
$retval .= $message;
$retval .= '</span>';
$retval .= '</span>';
return $retval;
}
/**

View File

@ -118,8 +118,7 @@ div.error h4 {
div.success,
div.notice,
div.error,
div.footnotes {
div.error {
margin: .5em 0 1.3em 0;
border: 1px solid;
background-repeat: no-repeat;
@ -137,8 +136,7 @@ div.footnotes {
.success a,
.notice a,
.error a,
.footnotes a {
.error a {
text-decoration: underline;
}
@ -158,15 +156,13 @@ div.success {
border-color: #00FF00;
}
.notice,
.footnotes {
.notice {
color: #000;
background-color: #e8eef1;
}
h1.notice,
div.notice,
div.footnotes {
div.notice {
border-color: #3a6c7e;
background-image: url(../themes/pmahomme/img/s_notice.png);
background-repeat: no-repeat;

View File

@ -1,189 +0,0 @@
<?php
/* vim: set expandtab sw=4 ts=4 sts=4: */
/**
* Test for PMA_showHint() function from common.lib.php
*
* @package PhpMyAdmin-test
*/
/**
* Include to test.
*/
require_once 'libraries/common.lib.php';
class PMA_showHint_test extends PHPUnit_Framework_TestCase
{
/**
* @var array temporary variable for globals array
*/
protected $tmpGlobals;
/**
* @var array temporary variable for session array
*/
protected $tmpSession;
/**
* storing globals and session
*/
public function setUp()
{
$this->tmpGlobals = $GLOBALS;
$this->tmpSession = $_SESSION;
}
/**
* recovering globals and session
*/
public function tearDown()
{
$GLOBALS = $this->tmpGlobals;
$_SESSION = $this->tmpSession;
}
/**
* PMA_showHint with defined GLOBALS
*/
public function testShowHintReturnValue()
{
$key = md5('test');
$nr = 1234;
$instance = 1;
$GLOBALS['footnotes'][$key]['nr'] = $nr;
$GLOBALS['footnotes'][$key]['instance'] = $instance;
$this->assertEquals(
sprintf(
'<sup class="footnotemarker" id="footnote_sup_%d_%d">%d</sup>',
$nr, $instance + 1, $nr
),
PMA_showHint('test')
);
}
/**
* PMA_showHint with defined GLOBALS formatted as BB
*/
public function testShowHintReturnValueBbFormat()
{
$key = md5('test');
$nr = 1234;
$instance = 1;
$GLOBALS['footnotes'][$key]['nr'] = $nr;
$GLOBALS['footnotes'][$key]['instance'] = $instance;
$this->assertEquals(
sprintf('[sup]%d[/sup]', $nr),
PMA_showHint('test', true)
);
}
/**
* PMA_showHint with not defined GLOBALS
*/
public function testShowHintSetting()
{
$key = md5('test');
$nr = 1;
$instance = 1;
$this->assertEquals(sprintf('<sup class="footnotemarker" id="footnote_sup_%d_%d">%d</sup>', $nr, $instance, $nr), PMA_showHint('test', false, 'notice'));
$expArray = array(
'note' => 'test',
'type' => 'notice',
'nr' => count($GLOBALS['footnotes']),
'instance' => 1,
);
$this->assertEquals($expArray, $GLOBALS['footnotes'][$key]);
}
/**
* PMA_showHint with not defined GLOBALS formatted as BB
* @depends testShowHintSetting
*/
public function testShowHintSettingBbFormat()
{
$key = md5('test');
$nr = 1;
$instance = 1;
$this->assertEquals(sprintf('[sup]%d[/sup]', $nr), PMA_showHint('test', true, 'notice'));
$expArray = array(
'note' => 'test',
'type' => 'notice',
'nr' => count($GLOBALS['footnotes']),
'instance' => 1,
);
$this->assertEquals($expArray, $GLOBALS['footnotes'][$key]);
}
/**
* PMA_showHint with defined GLOBALS using PMA_Message object
*/
public function testShowHintPmaMessageReturnValue()
{
$nr = 1;
$instance = 1;
$oMock = $this->getMock(
'PMA_Message',
array('setMessage', 'setNumber', 'getHash', 'getLevel')
);
$oMock->setMessage('test');
$oMock->setNumber($nr);
$key = $oMock->getHash();
$GLOBALS['footnotes'][$key]['nr'] = $nr;
$GLOBALS['footnotes'][$key]['instance'] = $instance;
$this->assertEquals(
sprintf(
'<sup class="footnotemarker" id="footnote_sup_%d_%d">%d</sup>',
$nr, $instance + 1, $nr
),
PMA_showHint($oMock)
);
}
/**
* PMA_showHint with not defined GLOBALS using PMA_Message object
*/
public function testShowHintPmaMessageSetting()
{
$nr = 1;
$instance = 1;
$oMock = $this->getMock(
'PMA_Message',
array('setMessage', 'setNumber', 'getHash', 'getLevel', 'getNumber')
);
$oMock->setMessage('test');
$oMock->setNumber($nr);
$this->assertEquals(
sprintf(
'<sup class="footnotemarker" id="footnote_sup_%d_%d">%d</sup>',
$nr, $instance, $nr
),
PMA_showHint($oMock, false)
);
$key = $oMock->getHash();
$expArray = array(
'note' => $oMock,
'type' => $oMock->getLevel(),
'nr' => count($GLOBALS['footnotes']),
'instance' => 1,
);
$this->assertEquals($expArray, $GLOBALS['footnotes'][$key]);
}
}
?>

View File

@ -427,16 +427,12 @@ img.lightbulb {
}
/* leave some space between icons and text */
.icon, img.footnotemarker {
.icon {
vertical-align: middle;
margin-right: 0.3em;
margin-left: 0.3em;
}
img.footnotemarker {
display: none;
}
/* no extra space in table cells */
td .icon {
margin: 0;
@ -459,8 +455,7 @@ div.error h1 {
div.success,
div.notice,
div.error,
div.footnotes {
div.error {
margin: 0.3em 0 0 0;
border: 2px solid;
background-repeat: no-repeat;
@ -494,13 +489,12 @@ div.success {
border-color: #00FF00;
}
.notice, .footnotes {
.notice {
color: #000000;
background-color: #FFFFDD;
}
h1.notice,
div.notice,
div.footnotes {
div.notice {
border-color: #FFD700;
background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath(); ?>s_notice.png);
background-repeat: no-repeat;

View File

@ -652,11 +652,6 @@ img.lightbulb {
.syntax_quote_backtick {
}
/* leave some space between icons and text */
img.footnotemarker {
display: none;
}
/* no extra space in table cells */
td .icon {
margin: 0;
@ -679,8 +674,7 @@ div.error h1 {
div.success,
div.notice,
div.error,
div.footnotes {
div.error {
margin: .5em 0 1.3em 0;
border: 1px solid;
background-repeat: no-repeat;
@ -703,8 +697,7 @@ div.footnotes {
.success a,
.notice a,
.error a,
.footnotes a {
.error a {
text-decoration: underline;
}
@ -728,15 +721,13 @@ div.success {
border-color: #00FF00;
}
.notice,
.footnotes {
.notice {
color: #000;
background-color: #e8eef1;
}
h1.notice,
div.notice,
div.footnotes {
div.notice {
border-color: #3a6c7e;
background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath(); ?>s_notice.png);
background-repeat: no-repeat;

View File

@ -17,7 +17,7 @@ if (is_readable($_SESSION['PMA_Theme']->getPath() . '/sprites.lib.php')) {
?>
/* Icon sprites */
.icon, .footnotemarker {
.icon {
margin: 0 .3em;
padding: 0 !important;
width: 16px;