Special handling for inputs when using Smallipop

Special support for form elements

Special support for form elements

Smallipop will appear when form elements are focused and From 75242304b937ca2504c924fc1fb5e5977d8ba78f Mon Sep 17 00:00:00 2001 From: Sebastian Helzle Date: Sun, 14 Jul 2013 14:15:10 +0200 Subject: [PATCH 2/9] Fixed first click prevention when triggerOnClick is used or touch events. Some refactoring. --- index.html | 2 ++ lib/jquery.smallipop.js | 12 ++++++------ src/coffee/jquery.smallipop.coffee | 8 ++++---- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 306b119..fa8b44b 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ + + diff --git a/lib/jquery.smallipop.js b/lib/jquery.smallipop.js index 8909913..e2776c4 100644 --- a/lib/jquery.smallipop.js +++ b/lib/jquery.smallipop.js @@ -1,5 +1,5 @@ /*! -Smallipop (06/21/2013) +Smallipop (07/12/2013) Copyright (c) 2011-2013 Small Improvements (http://www.small-improvements.com) Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. @@ -14,7 +14,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice return factory(jQuery); } })(function($) { - var $document, $overlay, $window, classAlignLeft, classAlignRight, classBase, classBottom, classContent, classHint, classInitialized, classInstance, classLeft, classRight, classTheme, classTour, classTourClose, classTourCloseIcon, classTourContent, classTourFooter, classTourNext, classTourOverlay, classTourPrev, classTourProgress, cssAnimationsEnabled, currentTour, dataBeingShown, dataIsTour, dataPopupHovered, dataPosition, dataShown, dataTimerHide, dataTimerShow, dataTriggerHovered, dataXDistance, dataYDistance, dataZIndex, destroy, eventBlur, eventClick, eventFocus, eventKeyUp, eventMouseOut, eventMouseOver, eventResize, eventScroll, eventTouchEnd, fadeInPopup, fadeInPopupFinished, filterAlignmentClass, filterBaseClass, filterClass, forceRefreshPosition, getInstance, getOverlay, getTrigger, hideSmallipop, hideTourOverlay, instances, isElementFixed, killTimers, lastId, lastScrollCheck, nextInstanceId, onWindowKeyUp, onWindowScroll, popupTemplate, queueRefreshPosition, reAlignmentClass, reBaseClass, refreshPosition, refreshQueueTimer, resetTourZIndices, runTour, scrollTimer, setContent, showPopup, showSmallipop, showWhenVisible, sip, touchEnabled, tourClose, tourNext, tourPrev, tourShow, tours, triggerMouseout, triggerMouseover; + var $document, $overlay, $window, classAlignLeft, classAlignRight, classBase, classBottom, classContent, classHint, classInitialized, classInstance, classLeft, classRight, classTheme, classTour, classTourClose, classTourCloseIcon, classTourContent, classTourFooter, classTourNext, classTourOverlay, classTourPrev, classTourProgress, cssAnimationsEnabled, currentTour, dataBeingShown, dataIsTour, dataPopupHovered, dataPosition, dataShown, dataTimerHide, dataTimerShow, dataTriggerHovered, dataXDistance, dataYDistance, dataZIndex, destroy, eventBlur, eventClick, eventFocus, eventKeyUp, eventMouseOut, eventMouseOver, eventResize, eventScroll, eventTouchEnd, fadeInPopup, fadeInPopupFinished, filterAlignmentClass, filterBaseClass, filterClass, forceRefreshPosition, getInstance, getOverlay, getTrigger, hideSmallipop, hideTourOverlay, instances, isElementFixed, killTimers, lastId, lastScrollCheck, nextInstanceId, onClickTrigger, onWindowKeyUp, onWindowScroll, popupTemplate, queueRefreshPosition, reAlignmentClass, reBaseClass, refreshPosition, refreshQueueTimer, resetTourZIndices, runTour, scrollTimer, setContent, showPopup, showWhenVisible, sip, touchEnabled, tourClose, tourNext, tourPrev, tourShow, tours, triggerMouseout, triggerMouseover; classBase = 'smallipop'; classHint = classBase + '-hint'; classInstance = classBase + '-instance'; @@ -230,13 +230,13 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice } return _results; }; - showSmallipop = function(e) { + onClickTrigger = function(e) { var triggerData, _ref; triggerData = $(this).data(classBase); if (!triggerData) { return; } - if (triggerData.popupInstance.data(dataShown) !== triggerData.id && ((_ref = !triggerData.type) === 'checkbox' || _ref === 'radio')) { + if (triggerData.popupInstance.data(dataShown) !== triggerData.id && ((_ref = !triggerData.type) !== 'checkbox' && _ref !== 'radio')) { if (e != null) { e.preventDefault(); } @@ -729,7 +729,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice if (typeof options === 'string') { switch (options.toLowerCase()) { case 'show': - showSmallipop.call(this.first().get(0)); + triggerMouseover.call(this.first().get(0)); break; case 'hide': hideSmallipop(this.first().get(0)); @@ -804,7 +804,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice triggerEvents[eventMouseOut] = triggerMouseout; } if (triggerOptions.triggerOnClick || touchTrigger) { - triggerEvents[eventClick] = showSmallipop; + triggerEvents[eventClick] = onClickTrigger; } else { triggerEvents[eventClick] = triggerMouseout; triggerEvents[eventMouseOver] = triggerMouseover; diff --git a/src/coffee/jquery.smallipop.coffee b/src/coffee/jquery.smallipop.coffee index 078e62a..edbcd21 100644 --- a/src/coffee/jquery.smallipop.coffee +++ b/src/coffee/jquery.smallipop.coffee @@ -232,12 +232,12 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice triggerOptions.onAfterHide?() - showSmallipop= (e) -> + onClickTrigger = (e) -> triggerData = $(@).data classBase return unless triggerData if triggerData.popupInstance.data(dataShown) isnt triggerData.id \ - and not triggerData.type in ['checkbox', 'radio'] + and not triggerData.type not in ['checkbox', 'radio'] e?.preventDefault() triggerMouseover.call @ @@ -734,7 +734,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice # Handle direct method calls if typeof(options) is 'string' switch options.toLowerCase() - when 'show' then showSmallipop.call @first().get(0) + when 'show' then triggerMouseover.call @first().get(0) when 'hide' then hideSmallipop @first().get(0) when 'destroy' then destroy @ when 'tour' then runTour @first(), hint @@ -814,7 +814,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice # Check whether the trigger should activate smallipop by click or hover if triggerOptions.triggerOnClick or touchTrigger - triggerEvents[eventClick] = showSmallipop + triggerEvents[eventClick] = onClickTrigger else triggerEvents[eventClick] = triggerMouseout triggerEvents[eventMouseOver] = triggerMouseover From 9d5142b9b123aeaee95f9fd614e2185fa4362d0c Mon Sep 17 00:00:00 2001 From: Sebastian Helzle Date: Thu, 5 Sep 2013 18:18:49 +0200 Subject: [PATCH 3/9] Working on new version --- index.html | 2 +- lib/jquery.smallipop.js | 4 ++-- pages/forms.html | 4 +++- pages/methods.html | 4 +++- pages/options.html | 4 +++- pages/tours.html | 4 +++- smallipop.jquery.json | 2 +- src/coffee/jquery.smallipop.coffee | 4 ++-- src/coffee/main.coffee | 2 +- 9 files changed, 19 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index fa8b44b..acb779c 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

Smallipop - A versatile jQuery plugin for displaying beautiful tooltips and interactive tours

- Version 0.6.1 - + Version 0.6.2 - Created by Sebastian Helzle for Small Improvements

-<a id="tipReferenced" data-smallipop-referenced-content="#tipReferencedTarget" title="Referenced content">
+<a id="tipReferenced" data-smallipop-referenced-content="#tipReferencedTarget > *" title="Referenced content">
     Hover me!
 </a>
 <div id="tipReferencedTarget">

From 860af3ea183263a7d111d2dd46913d045571c91b Mon Sep 17 00:00:00 2001
From: Sebastian Helzle 
Date: Sat, 19 Oct 2013 14:58:48 +0200
Subject: [PATCH 9/9] Fixed tooltip font and removed white theme text-shadow.

---
 css/jquery.smallipop.css       | 7 ++-----
 src/scss/_theme_white.scss     | 1 -
 src/scss/jquery.smallipop.scss | 4 ++--
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/css/jquery.smallipop.css b/css/jquery.smallipop.css
index 672adee..c44aa94 100644
--- a/css/jquery.smallipop.css
+++ b/css/jquery.smallipop.css
@@ -21,10 +21,8 @@
   color: #d2dfe7;
   z-index: 9999;
   max-width: 400px;
-}
-.smallipop-instance font {
-  size: 11px;
-  family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
+  font-size: 12px;
+  font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
 }
 .smallipop-instance a {
   color: #98cbea;
@@ -460,7 +458,6 @@
 .smallipop-theme-white {
   background-color: #fcfcfc;
   border-color: #777777;
-  text-shadow: 0 1px 1px #eee;
   color: #444;
   width: 200px;
   max-width: 200px;
diff --git a/src/scss/_theme_white.scss b/src/scss/_theme_white.scss
index 231eee3..f670c0b 100644
--- a/src/scss/_theme_white.scss
+++ b/src/scss/_theme_white.scss
@@ -7,7 +7,6 @@ $white-transparent-border-color: rgba(255, 255, 255, 0.8);
 .smallipop-theme-white {
   background-color: $white-background-color;
   border-color: $white-arrow-border-color;
-  text-shadow: 0 1px 1px #eee;
   color: #444;
   width: 200px;
   max-width: 200px;
diff --git a/src/scss/jquery.smallipop.scss b/src/scss/jquery.smallipop.scss
index 9804411..8daef54 100644
--- a/src/scss/jquery.smallipop.scss
+++ b/src/scss/jquery.smallipop.scss
@@ -41,8 +41,8 @@ $fat-shadow: 0 2px 20px rgba(0, 0, 0, .8);
   color: $default-color;
   z-index: 9999;
   max-width: $max-width;
-  font {
-    size: 11px;
+  font: {
+    size: 12px;
     family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
   }