From 1f6024f27d8ca5276cf213fad5cb313d77974d5d Mon Sep 17 00:00:00 2001 From: iglocska Date: Tue, 15 Oct 2013 10:28:43 +0200 Subject: [PATCH] UI fixes - popover effect in IE/Chrome not as annoying anymore - only the active select will have a popover, clicking away destroys it - Added popovers to the add attachments instead of the old info fields --- app/View/Attributes/add.ctp | 8 +- app/View/Attributes/add_attachment.ctp | 106 +++++++++++-------------- app/View/Attributes/edit.ctp | 4 +- app/View/Events/add.ctp | 4 +- app/View/Events/edit.ctp | 4 +- 5 files changed, 60 insertions(+), 66 deletions(-) diff --git a/app/View/Attributes/add.ctp b/app/View/Attributes/add.ctp index 270d4f40c..c1fd48cf2 100755 --- a/app/View/Attributes/add.ctp +++ b/app/View/Attributes/add.ctp @@ -134,6 +134,7 @@ $(document).ready(function() { $('#'+e.currentTarget.id).popover('destroy'); }); + $("#AttributeType, #AttributeCategory, #Attribute, #AttributeDistribution").on('mouseover', function(e) { var $e = $(e.target); if ($e.is('option')) { @@ -154,9 +155,12 @@ $(document).ready(function() { var $e = $(e.target); $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', }).popover('show'); + // $('#'+e.currentTarget.id).on('mouseleave', $('#'+e.currentTarget.id).popover('destroy'); + //$('#'+e.currentTarget.id).on('mouseout', $('#'+e.currentTarget.id).popover('destroy')); + }); // workaround for browsers like IE and Chrome that do now have an onmouseover on the 'options' of a select. @@ -166,7 +170,7 @@ $(document).ready(function() { var $e = $(e.target); $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', content: formInfoValues[$e.val()], }).popover('show'); diff --git a/app/View/Attributes/add_attachment.ctp b/app/View/Attributes/add_attachment.ctp index d7037cdc9..2564dd5ba 100755 --- a/app/View/Attributes/add_attachment.ctp +++ b/app/View/Attributes/add_attachment.ctp @@ -4,9 +4,10 @@ Form->hidden('event_id'); - echo $this->Form->input('category', array( - 'after' => $this->Html->div('forminfo', '', array('id' => 'AttributeCategoryDiv')), - )); + echo $this->Form->input('category'); + ?> +
+ $distributionLevels, 'label' => 'Distribution', 'selected' => $initialDistribution, - 'after' => $this->Html->div('forminfo', '', array('id' => 'AttributeDistributionDiv')), )); //'before' => $this->Html->div('forminfo', isset($attrDescriptions['distribution']['formdesc']) ? $attrDescriptions['distribution']['formdesc'] : $attrDescriptions['distribution']['desc']),)); } @@ -122,60 +122,50 @@ foreach ($categoryDefinitions as $category => $def) { } } ?> +$(document).ready(function() { + + $("#AttributeCategory, #AttributeDistribution").on('mouseleave', function(e) { + $('#'+e.currentTarget.id).popover('destroy'); + }); + + $("#AttributeCategory, #AttributeDistribution").on('mouseover', function(e) { + var $e = $(e.target); + if ($e.is('option')) { + $('#'+e.currentTarget.id).popover('destroy'); + $('#'+e.currentTarget.id).popover({ + trigger: 'manual', + placement: 'right', + content: formInfoValues[$e.val()], + }).popover('show'); + } + }); + + $("input, label").on('mouseleave', function(e) { + $('#'+e.currentTarget.id).popover('destroy'); + }); + + $("input, label").on('mouseover', function(e) { + var $e = $(e.target); + $('#'+e.currentTarget.id).popover('destroy'); + $('#'+e.currentTarget.id).popover({ + trigger: 'focus', + placement: 'right', + }).popover('show'); + }); + + // workaround for browsers like IE and Chrome that do now have an onmouseover on the 'options' of a select. + // disadvangate is that user needs to click on the item to see the tooltip. + // no solutions exist, except to generate the select completely using html. + $("#AttributeCategory, #AttributeDistribution").on('change', function(e) { + var $e = $(e.target); + $('#'+e.currentTarget.id).popover('destroy'); + $('#'+e.currentTarget.id).popover({ + trigger: 'focus', + placement: 'right', + content: formInfoValues[$e.val()], + }).popover('show'); + }); -function showFormType(id) { - idDiv = id+'Div'; - // LATER use nice animations - //$(idDiv).hide('fast'); - // change the content - var value = $(id).val(); // get the selected value - //$(idDiv).html(formInfoValues[value]); // search in a lookup table - - // do checkbox un/ticked when the document is changed - if (formZipTypeValues[value] == "true") { - document.getElementById("AttributeMalware").setAttribute("checked", "checked"); - if (formAttTypeValues[value] == "false") document.getElementById("AttributeMalware").setAttribute("disabled", "disabled"); - else document.getElementById("AttributeMalware").removeAttribute("disabled"); - } else { - document.getElementById("AttributeMalware").removeAttribute("checked"); - if (formAttTypeValues[value] == "true") document.getElementById("AttributeMalware").setAttribute("disabled", "disabled"); - else document.getElementById("AttributeMalware").removeAttribute("disabled"); - } -} - -function showFormInfo(id) { - idDiv = id+'Div'; - // LATER use nice animations - //$(idDiv).hide('fast'); - // change the content - var value = $(id).val(); // get the selected value - $(idDiv).html(formInfoValues[value]); // search in a lookup table - - // show it again - $(idDiv).fadeIn('slow'); - - // do checkbox un/ticked when the document is changed - if (formZipTypeValues[value] == "true") { - document.getElementById("AttributeMalware").setAttribute("checked", "checked"); - if (formAttTypeValues[value] == "false") document.getElementById("AttributeMalware").setAttribute("disabled", "disabled"); - else document.getElementById("AttributeMalware").removeAttribute("disabled"); - } else { - document.getElementById("AttributeMalware").removeAttribute("checked"); - if (formAttTypeValues[value] == "true") document.getElementById("AttributeMalware").setAttribute("disabled", "disabled"); - else document.getElementById("AttributeMalware").removeAttribute("disabled"); - } -} - -// hide the formInfo things -$('#AttributeTypeDiv').hide(); -$('#AttributeCategoryDiv').hide(); -$(function(){ - // do checkbox un/ticked when the document is ready - showFormType("#AttributeCategory"); - } -); - -//hide the formInfo things -$('#AttributeDistributionDiv').hide(); +}); Js->writeBuffer(); // Write cached scripts \ No newline at end of file diff --git a/app/View/Attributes/edit.ctp b/app/View/Attributes/edit.ctp index 01a865f34..3c420265d 100755 --- a/app/View/Attributes/edit.ctp +++ b/app/View/Attributes/edit.ctp @@ -139,7 +139,7 @@ $(document).ready(function() { var $e = $(e.target); $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', }).popover('show'); }); @@ -151,7 +151,7 @@ $(document).ready(function() { var $e = $(e.target); $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', content: formInfoValues[$e.val()], }).popover('show'); diff --git a/app/View/Events/add.ctp b/app/View/Events/add.ctp index 4ed824535..fd0061c1b 100755 --- a/app/View/Events/add.ctp +++ b/app/View/Events/add.ctp @@ -94,7 +94,7 @@ $(document).ready(function() { if ($e.is('option')) { $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', content: formInfoValues[e.currentTarget.id][$e.val()], }).popover('show'); @@ -108,7 +108,7 @@ $(document).ready(function() { var $e = $(e.target); $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', content: formInfoValues[e.currentTarget.id][$e.val()], }).popover('show'); diff --git a/app/View/Events/edit.ctp b/app/View/Events/edit.ctp index 1d91c9d2b..69b6e426d 100755 --- a/app/View/Events/edit.ctp +++ b/app/View/Events/edit.ctp @@ -82,7 +82,7 @@ $(document).ready(function() { if ($e.is('option')) { $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', content: formInfoValues[e.currentTarget.id][$e.val()], }).popover('show'); @@ -96,7 +96,7 @@ $(document).ready(function() { var $e = $(e.target); $('#'+e.currentTarget.id).popover('destroy'); $('#'+e.currentTarget.id).popover({ - trigger: 'manual', + trigger: 'focus', placement: 'right', content: formInfoValues[e.currentTarget.id][$e.val()], }).popover('show');