Skip to content
Browse files

Popover, and added DASH

  • Loading branch information...
1 parent eec379f commit 99f18c52e797bf83c37c1688051551d84f789bf7 @specialorange committed Nov 3, 2012
View
79 _css/popover.css
@@ -0,0 +1,79 @@
+/**
+ * jQuery.popover example stylesheet.
+ * By Davey IJzermans
+ * http://daveyyzermans.nl
+ *
+ * License: public domain
+ */
+
+.popover {
+ position: absolute;
+ top: 0; left: 0;
+ max-height: 50%;
+ width: 25%;
+ margin-right: 10px;
+ display: none;
+ -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
+}
+.popover.wider {
+ width: 340px;
+}
+.popover.large {
+ width: 470px;
+ max-height: 350px;
+}
+.popover .arrow, .popover .top-arrow {
+ position: absolute;
+ top: 0; left: 50%;
+ margin: -10px 0 0 -3px;
+ width: 0; height: 0;
+ border-top: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid #F16529;
+}
+.popover .bottom-arrow {
+ top: 100%; left: 50%;
+ margin: 0 0 0 -3px;
+ border-top: 5px solid #F16529;
+ border-bottom: 5px solid transparent;
+}
+.popover .left-arrow {
+ top: 50%; left: -10px;
+ margin: -3px 0 0;
+ border-right: 5px solid #F16529;
+ border-bottom: 5px solid transparent;
+}
+.popover .right-arrow {
+ top: 50%; left: 100%;
+ margin: -3px 0 0;
+ border-left: 5px solid #F16529;
+ border-bottom: 5px solid transparent;
+}
+.popover .wrap {
+ background: white;
+ border: 1px solid #F16529;
+ border-radius: 4px;
+ max-height: 50%;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+}
+.popover .title {
+ background: #F16529 url(popover_gradient.png) repeat-x;
+ color: black;
+ font-size: 1.3em;
+ text-align: center;
+ padding: 8px 0 0 0;
+ height: 27px;
+}
+.popover .content {
+ padding: 15px;
+ max-height: 175px;
+ overflow: auto;
+ line-height: 1.3em;
+ font-size: 0.9em;
+}
+.popover.large .content {
+ max-height: 285px;
+}
View
BIN _css/popover_gradient.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
8 _js/libs/popover/.gitignore
@@ -0,0 +1,8 @@
+*.class
+*.pyc
+*.pyo
+.sublime-project
+.sublime-workspace
+.DS_Store
+dev.html
+dev*.html
View
20 _js/libs/popover/MIT-LICENSE.txt
@@ -0,0 +1,20 @@
+Copyright (c) 2012 Davey IJzermans
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
49 _js/libs/popover/README.markdown
@@ -0,0 +1,49 @@
+# jQuery.popover
+
+Easy to use and customizable popover plugin for jQuery. For a demo and
+documentation, visit http://daveyijzermans.nl/jquery/popover/demo.html
+
+## Changelog
+
+### v1.1.2
+- Some code style tweaks
+- Box shadow in stylesheet
+- Moved preventDefault to setTrigger method
+
+### v1.1.1
+- Fixed hideAll method
+
+### v1.1.0
+- Fixed hideOnHTMLClick on iDevices
+
+### v1.0.9
+- Fixed url parameter
+
+### v1.0.8
+- Added automatic reposition.
+- Changed offset logic, see docs.
+
+### v1.0.7
+- Added focus-trigger.
+
+### v1.0.6
+- Some z-index tweaks to make the popover appear on top of each other instead of the order they were instantiated.
+
+### v1.0.5
+- Added preventChildrenPropagation parameter.
+
+### v1.0.4
+- The preventDefault parameter now does what it's supposed to. preventDefault on the element the popover's invoked on instead of the popover itself.
+
+### v1.0.3
+- Again some small changes to the hover trigger.
+- Hovering the popover now makes it stay.
+
+### v1.0.2
+- Added 'anchor' parameter, for attaching the popover to another element
+
+### v1.0.1
+- Fixed hover trigger
+
+### v1.0.0
+- Initial release
View
121 _js/libs/popover/_page.css
@@ -0,0 +1,121 @@
+/**
+ * CSS reset by Eric Meyer
+ * http://meyerweb.com/eric/tools/css/reset/
+ * v2.0 | 20110126
+ * License: none (public domain)
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+
+/**
+ * Demo page styling
+ */
+body {
+ margin: 80px 10%;
+ font-family: Arial;
+ font-size: 15px;
+ line-height: 1.3em;
+ min-width: 1000px;
+}
+h1 {
+ font-size: 2.5em;
+}
+h2 {
+ font-size: 2em;
+}
+h3 {
+ font-size: 1.6em;
+}
+h4 {
+ font-size: 1.1em;
+}
+h1, h2, h3, h4, h5, h6 {
+ font-weight: bold;
+ margin: 0.7em 0;
+}
+p {
+ margin: 1em 0;
+}
+strong {
+ font-weight: bold;
+}
+em {
+ font-style: italic;
+}
+ul, ol {
+ list-style: square;
+ margin: 0 2em;
+}
+ul ul, ul ol, ol ul, ol ol {
+ margin: 0 0 0 1.5em;
+}
+.sandbox {
+ margin: 0.7em 0;
+ padding: 1em;
+ background: #f9f9f9;
+}
+code {
+ font-family: Courier;
+ background: #f9f9f9;
+}
+pre {
+ margin: 1em 0; padding: 1em;
+ background: #f9f9f9;
+ overflow: auto;
+}
+.sandbox, pre {
+ border-radius: 5px;
+}
+table, tr, td, th {
+ border: 1px solid #ddd;
+}
+th {
+ background: #f9f9f9;
+ font-weight: bold;
+}
+th, td {
+ padding: 5px;
+}
View
2 _js/libs/popover/ajax.html
@@ -0,0 +1,2 @@
+Aww yeah!
+<img src="http://www.myfacewhen.net/uploads/961-aww-yeah.jpg" width="300" />
View
588 _js/libs/popover/demo.html
@@ -0,0 +1,588 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+
+ <title>jQuery.popover demo page</title>
+ <link rel="stylesheet" href="_page.css" type="text/css" media="screen" />
+ <link rel="stylesheet" href="popover.css" type="text/css" media="screen" />
+
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.popover-1.1.2.js"></script>
+ <script type="text/javascript">
+ /* <![CDATA[ */
+ jQuery(document).ready(function($) {
+ $("#ex1").popover({
+ trigger: 'click'
+ });
+ $("#ex2").popover({
+ title: "Hello",
+ content: "Finally, I can speak!"
+ });
+ $("#ex3a").popover({
+ title: "<_<",
+ content: "Damn.",
+ trigger: 'none'
+ });
+ $("#ex3b").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex3a").popover('show');
+ });
+ $("#bubble_expl").popover({
+ title: "Bubble up",
+ content: "When you click a link on a web page, not only do you click that link, you also click it's parent. You clicked this linked, but also it's parent &lt;p&gt;-tag, and it's parent the &lt;body&gt;-tag and, it's parent the &lt;html&gt;-tag. The popover('hide') event is bound to the &lt;html&gt;-element, so this will trigger as well, causing the popover to fade out immediately. By using the stopPropagation() method we prevent this.",
+ classes: 'large'
+ });
+ $("#ex4a").popover({
+ title: "Guess what this is...",
+ content: "Pa's wijze lynx bezag vroom het fikse aquaduct.",
+ trigger: 'none'
+ });
+ $("#ex4b").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex4a").popover('show');
+ });
+ $("#ex4c").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex4a").popover('hide');
+ });
+ $("#ex4d").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex4a").popover('fadeOut');
+ });
+ $("#ex4e").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex4a")
+ .popover('destroy')
+ .text("Nooo! What have you done?!");
+ });
+ $("#ex5a").popover({
+ title: "Hmm...",
+ content: "And programming is your friendship!"
+ });
+ $("#ex5b, #ex5c").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex5a").popover(
+ 'title',
+ $(this).text()+" is your friend"
+ ).popover('show');
+ });
+ $("#ex6a").popover({
+ title: "Dynamic content",
+ content: "At least a popover that makes some sense..."
+ });
+ $("#ex6b").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex6a").popover(
+ 'content',
+ "At least a popover that makes some sense... Don't get used to it."
+ ).popover('show');
+ });
+ $("#ex7a").popover({
+ title: "What's this",
+ content: "...",
+ classes: "wider"
+ });
+ $("#ex7b").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex7a").popover(
+ 'ajax',
+ "ajax.html"
+ ).popover('title', "It's AJAX content!").popover('show');
+ });
+
+ /**
+ * Collapse code blocks
+ */
+ var code_min_height = 150;
+ $('pre').each(function() {
+ $this = $(this);
+ var org_height = $this.height();
+ var toggld = false;
+ if(org_height > code_min_height)
+ $this.height(code_min_height);
+ $this.bind('click', function() {
+ $this = $(this);
+ if(toggld) {
+ $this.stop(true, true).animate({ height: code_min_height });
+ toggld = false;
+ } else {
+ $this.stop(true, true).animate({ height: org_height });
+ toggld = true;
+ }
+ })
+ });
+
+ /**
+ * Table of contents
+ */
+ toc_paragraph = function(p) {
+ var ret = $('<li><a href="'+p.href+'">'+p.title+'</a></li>');
+ $.each(p.items, function(i, val) {
+ if(ret.children('ul').length === 0)
+ ret.append('<ul />');
+ ret.children('ul').append(toc_paragraph(val));
+ });
+ return ret;
+ }
+ generate_toc = function() {
+ var toc = {};
+ var toc_el = $('#table_of_contents');
+ $('a[name]').each(function() {
+ $this = $(this);
+ var item = {};
+ var name = $this.attr('name');
+ var href = "#" + name;
+ var title = $this.attr('title');
+ if(typeof title === "undefined")
+ title = $this.next().text();
+ item.href = href;
+ item.title = title;
+ item.items = {};
+
+ var split = $this.attr('name').split('_');
+ if(split.length > 1)
+ toc[split[0]].items[name] = item;
+ else
+ toc[name] = item;
+ });
+ toc_el.empty();
+
+ $.each(toc, function(i, val) {
+ toc_el.append(toc_paragraph(val));
+ });
+ }
+ generate_toc();
+ });
+ /* ]]> */
+ </script>
+ </head>
+ <body>
+ <h1>jQuery.popover</h1>
+ <p>Easy to use and customizable popover plugin for jQuery.</p>
+ <p>Take a look at <a href="http://wp.me/p12l3P-gT">this blog post</a> for more details.</p>
+
+ <a name="toc"></a>
+ <h2>Table of Contents</h2>
+ <ul id="table_of_contents"></ul>
+
+ <a name="usage"></a>
+ <h2>Usage</h2>
+
+ <a name="usage_initialization"></a>
+ <h3>Initialization</h3>
+ <p>With default settings, calling $(element).popover(); will initalize an empty popover on the element.</p>
+
+ <div class="sandbox">
+ <a href="#" id="ex1">I have a popover, but you can't see me. Yet.</a>
+ </div>
+
+ <p>When you click the link above, the popover is shown. This is achieved by using <code>{ trigger: 'click' }</code> in the parameters. <em>You can hide the popover by clicking anywhere there's not a popover.</em> The source code for the above example is:</p>
+ <pre><code>$("#ex1").popover({
+ trigger: 'click'
+});</code></pre>
+ <p>When this code was executed, the popover was created but not shown. A <code>click</code> event was bound to the <code>a</code>-tag with which the popover is &#147;connected&#148;. When that element is clicked, the popover is shown.
+
+ <p>But hows an empty popover any fun? Let's try this:</p>
+
+ <div class="sandbox">
+ <a href="#" id="ex2">Please, let me speak!</a>
+ </div>
+
+ <p>Now we've put some content in our popover using the parameters <code>{ title: &quot;Hello&quot;, content: &quot;Finally, I can speak!&quot; }</code>, like so:</p>
+
+ <pre><code>$(&quot;#ex2&quot;).popover({
+ title: &quot;Hello&quot;,
+ content: &quot;Finally, I can speak!&quot;
+});</code></pre>
+
+ <p>Note that I've ommited <code>{ trigger: 'click' }</code> in this example. It's the default setting for popovers.</p>
+
+ <a name="usage_manual"></a>
+ <h3>Pulling the trigger manually</h3>
+ <p>You can show, hide and fade out an initialized popover manually by calling <code>popover('show')</code>, <code>popover('hide')</code> and <code>popover('fadeOut')</code> on the element the popover was initialized over.</p>
+
+ <div class="sandbox">
+ <span id="ex3a">Nope, can't be triggered, bro.</span>
+ <a href="#" id="ex3b">Oh yes you can!</a>
+ </div>
+
+ <p>The code for this example is as follows. <em>Click a code box to expand it.</em></p>
+
+ <pre><code>$(&quot;#ex3a&quot;).popover({
+ title: &quot;&amp;lt;_&amp;lt;&quot;,
+ content: &quot;Damn.&quot;,
+ trigger: 'none'
+});
+$(&quot;#ex3b&quot;).click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(&quot;#ex3a&quot;).popover('show');
+});</code></pre>
+
+ <p>You must must call <code>event.preventDefault()</code> and <code>event. stopPropagation()</code> on the triggeree (?) / element that triggers the popover, otherwise <code>click</code>-event will <a href="#" id="bubble_expl">bubble up</a> to the document and the popover will immediately be hidden.</p>
+ <p>You can call <code>popover('fadeOut')</code> and <code>popover('hide')</code> to hide popovers with and without a fade animation.</p>
+
+ <a name="usage_hiding"></a>
+ <h3>Hide and destroy</h3>
+ <p>Use <code>popover('hide')</code>, <code>popover('fadeOut')</code> and <code>popover('destory')</code> to hide, fade out and destroy popovers. Call these methods on the element where the popover was initialized over.</p>
+
+ <div class="sandbox">
+ <span id="ex4a">I have a popover.</span><br />
+ <a href="#" id="ex4b">Show</a> | <a href="#" id="ex4c">Hide</a> | <a href="#" id="ex4d">Fade out</a> | <a href="#" id="ex4e">Destroy</a>
+ </div>
+
+ <p>These methods can be seen as the <abbr title="Application Programming Interface">API</abbr> for jQuery.popover. Here the code for this example:</p>
+
+ <pre><code>$(&quot;#ex4a&quot;).popover({
+ title: &quot;Guess what this is...&quot;,
+ content: &quot;Pa's wijze lynx bezag vroom het fikse aquaduct.&quot;,
+ trigger: 'none'
+});
+$(&quot;#ex4b&quot;).click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(&quot;#ex4a&quot;).popover('show');
+});
+$(&quot;#ex4c&quot;).click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(&quot;#ex4a&quot;).popover('hide');
+});
+$(&quot;#ex4d&quot;).click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(&quot;#ex4a&quot;).popover('fadeOut');
+});
+$(&quot;#ex4e&quot;).click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(&quot;#ex4a&quot;)
+ .popover('destroy')
+ .text(&quot;Nooo! What have you done?!&quot;);
+});</code></pre>
+
+ <p>It could probably be a bit shorter, but I'll let you figure that out.</p>
+
+ <a name="usage_modifying"></a>
+ <h3>Modifying on the fly</h3>
+
+ <a name="usage_modifying_title"></a>
+ <h4>Title</h4>
+ <p>You can change the title on the fly with by using <code>popover('title', "Text")</code>.</p>
+
+ <div class="sandbox">
+ <span id="ex5a">PHP or Ruby?</span>
+ <a href="#" id="ex5b">PHP</a> | <a href="#" id="ex5c">Ruby</a>
+ </div>
+
+ <pre><code>$("#ex5a").popover({
+ title: "Hmm...",
+});
+$("#ex5b, #ex5c").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#ex5a").popover(
+ 'title',
+ $(this).text()+" is your friend"
+ ).popover('show');
+});</code></pre>
+
+ <a name="usage_modifying_content"></a>
+ <h4>Content</h4>
+ <p>You can change the title on the fly with by using <code>popover('content', "Text")</code>.</p>
+
+ <div class="sandbox">
+ <span id="ex6a">Click here first | </span>
+ <a href="#" id="ex6b">change content</a>
+ </div>
+
+ <pre><code>$(&quot;#ex6a&quot;).popover({
+ title: &quot;Dynamic content&quot;,
+ content: &quot;At least a popover that makes some sense...&quot;
+});
+$(&quot;#ex6b&quot;).click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(&quot;#ex6a&quot;).popover(
+ 'content',
+ &quot;At least a popover that makes some sense... Don't get used to it.&quot;
+ ).popover('show');
+});</code></pre>
+
+ <a name="usage_modifying_ajax"></a>
+ <h4>Loading AJAX content</h4>
+ <p>You can load a webpage as content via AJAX by using <code>popover('ajax', "http://example.com/" [, options])</code>.</p>
+
+ <div class="sandbox">
+ <span id="ex7a">Click here first | </span>
+ <a href="#" id="ex7b">load ajax content</a>
+ </div>
+
+ <p>Please note this only works when running on a webserver.</p>
+
+ <pre><code>$(&quot;#ex7a&quot;).popover({
+ title: &quot;What's this&quot;,
+ content: &quot;...&quot;,
+ classes: &quot;wider&quot;
+});
+$(&quot;#ex7b&quot;).click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $(&quot;#ex7a&quot;).popover(
+ 'ajax',
+ &quot;ajax.html&quot;
+ ).popover('title', &quot;It's AJAX content!&quot;).popover('show');
+});</code></pre>
+
+ <p>Alternatively, you can set an URL in the initialization parameters to load an URL immediately on setup, like so:</p>
+
+ <pre><code>$(&quot;#selector&quot;).popover({
+ url: &quot;test.html&quot;
+ });</code></pre>
+
+ <a name="parameters"></a>
+ <h3>Parameters</h3>
+ <p>You may've noticed the <code>{ classes: "wider" }</code> parameter in the previous example. The value of the <code>classes</code>-parameter is applied to the popover by jQuery's <code>addClass()</code> method. You can use this to add classes for different sizes of popovers.</p>
+
+ <p>There are other parameters you can pass to the <code>popover()</code> method. Following is a list of them.</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Option</th>
+ <th>Preffered type</th>
+ <th>Description</th>
+ <th>Default</th>
+ <th>Since</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>verticalOffset</td>
+ <td>int</td>
+ <td><a name="parameters_verticalOffset" title="verticalOffset"></a>Offset the popover by y px vertically (movement depends on position of popover. If <code>position == 'bottom'</code>, positive numbers are down)</td>
+ <td><code>10</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>horizontalOffset</td>
+ <td>int</td>
+ <td><a name="parameters_horizontalOffset" title="horizontalOffset"></a>Offset the popover by x px horizontally (movement depends on position of popover. If <code>position == 'right'</code>, positive numbers are right)</td>
+ <td><code>10</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>bool|string</td>
+ <td><a name="parameters_title" title="title"></a>Contents of the heading. Set to false for no title.</td>
+ <td><code>false</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>content</td>
+ <td>bool|string</td>
+ <td><a name="parameters_content" title="content"></a>Contents of the body of the popover. Set to false for no body.</td>
+ <td><code>false</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>url</td>
+ <td>bool|string</td>
+ <td><a name="parameters_url" title="url"></a>Automatically load an URL into the content field on initialization, if set to an url.</td>
+ <td><code>false</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>classes</td>
+ <td>string</td>
+ <td><a name="parameters_classes" title="classes"></a>Add stylesheet classes to the popover box on initalization, for example "large".</td>
+ <td><code>&quot;&quot;</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>position</td>
+ <td>string</td>
+ <td><a name="parameters_position" title="position"></a>Determine place of the popover. Set to &quot;auto&quot; for automatic placement. <em>Yet to be implemented</em></td>
+ <td><code>&quot;auto&quot;</code></td>
+ <td>1.0.8</td>
+ </tr>
+ <tr>
+ <td>fadeSpeed</td>
+ <td>int</td>
+ <td><a name="parameters_fadeSpeed" title="fadeSpeed"></a>How fast to fade this popover out when fading out.</td>
+ <td><code>160</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td><a name="parameters_trigger" title="trigger"></a>How to trigger the popover. &quot;click&quot; activates the popover when the linked-to element is clicked, &quot;hover&quot; when it's hovered on, &quot;focus&quot; shows it when focused and hides the popover when unfocused/blurred, and everything else sets it to manual.</td>
+ <td><code>&quot;click&quot;</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>preventDefault</td>
+ <td>bool</td>
+ <td><a name="parameters_preventDefault" title="preventDefault"></a>Execute <code>event.preventDefault()</code> method on the element the popover is called on. Set this to false if you want the element (for example an <code>a</code>-element) to still execute code already bound with <code>.click()</code>.</td>
+ <td><code>true</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>stopChildrenPropagation</td>
+ <td>bool</td>
+ <td><a name="parameters_stopChildrenPropagation" title="stopChildrenPropagation"></a>Execute <code>event.preventPropagation()</code> method on all children of the popover, so <code>click</code> events won't bubble up and hide the popover.</td>
+ <td><code>true</code></td>
+ <td>v1.0.5</td>
+ </tr>
+ <tr>
+ <td>hideOnHTMLClick</td>
+ <td>bool</td>
+ <td><a name="parameters_hideOnHTMLClick" title="hideOnHTMLClick"></a>Hide all popovers when clicked outside of them.</td>
+ <td><code>true</code></td>
+ <td>v1.0.0</td>
+ </tr>
+ <tr>
+ <td>animateChange</td>
+ <td>bool</td>
+ <td><a name="parameters_animateChange" title="animateChange"></a>Animate a popover reposition. <em>Yet to be implemented.</em></td>
+ <td><code>true</code></td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td>autoReposition</td>
+ <td>bool</td>
+ <td><a name="parameters_autoReposition" title="autoReposition"></a>Automatically reposition popover on popover change and window resize.</td>
+ <td><code>true</code></td>
+ <td>v1.0.8</td>
+ </tr>
+ <tr>
+ <td>anchor</td>
+ <td>bool|string|jQuery</td>
+ <td><a name="parameters_anchor" title="anchor"></a>Use this parameter to anchor the popover to a different element than it's invoked on. This is useful when using <code>{ trigger: 'hover' }</code>.</td>
+ <td><code>false</code></td>
+ <td>v1.0.2</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <a name="parameters_prototype" title="Default prototype"></a>
+ <p>For convienience, here is this plugin's defaults prototype.</p>
+
+ <pre><code>var defaults = {
+ verticalOffset: 10,
+ horizontalOffset: 10,
+ title: false,
+ content: false,
+ url: false,
+ classes: '',
+ position: 'auto',
+ fadeSpeed: 160,
+ trigger: 'click',
+ preventDefault: true,
+ stopChildrenPropagation:
+ hideOnHTMLClick: true,
+ animateChange: true,
+ autoReposition: true,
+ anchor: false: false
+}</code></pre>
+
+ <a name="methods"></a>
+ <h3>Methods</h3>
+
+ <p>Following is a reference of all methods you can call. Every method returns a jQuery result set, to maintain chainability.</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th>Returns</th>
+ <th>Description</th>
+ <th>Usage</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>init</td>
+ <td>jQuery</td>
+ <td><a name="methods_init" title="init"></a>(default method) Initializes a popover on elements. Reads defaults (see above), combines them with parameters and makes and links the popover.</td>
+ <td><code>$("#selector").popover(["init", ] { title: "Test" });</code></td>
+ </tr>
+ <tr>
+ <td>destroy</td>
+ <td>jQuery</td>
+ <td><a name="methods_destroy" title="destroy"></a>Removes the linked popover(s) from the DOM, as well as it's data/settings.</td>
+ <td><code>$("#selector").popover('destroy');</code></td>
+ </tr>
+ <tr>
+ <td>show</td>
+ <td>jQuery</td>
+ <td><a name="methods_show" title="show"></a>Show a linked popover, if it exists.</td>
+ <td><code>$("#selector").popover('show');</code></td>
+ </tr>
+ <tr>
+ <td>hide</td>
+ <td>jQuery</td>
+ <td><a name="methods_hide" title="hide"></a>Hide a linked popover, if it exists.</td>
+ <td><code>$("#selector").popover('hide');</code></td>
+ </tr>
+ <tr>
+ <td>fadeOut</td>
+ <td>jQuery</td>
+ <td><a name="methods_fadeOut" title="fadeOut"></a>Fade out a linked popover, if it exists, in as many milliseconds you set the fadeSpeed parameter to on initialization, or how many as you passed to the method.</td>
+ <td><code>$("#selector").popover('fadeOut' [, 1000]);</code></td>
+ </tr>
+ <tr>
+ <td>hideAll</td>
+ <td>jQuery</td>
+ <td><a name="methods_hideAll" title="hideAll"></a>Hide all initialized popovers.</td>
+ <td><code>$("#selector").popover('hideAll');</code></td>
+ </tr>
+ <tr>
+ <td>fadeOutAll</td>
+ <td>jQuery</td>
+ <td><a name="methods_fadeOutAll" title="fadeOutAll"></a>Fade out all initialized popovers. The duration is set by using the parameter <code>fadeSpeed</code> when initiaizing, or passing this to the method.</td>
+ <td><code>$("#selector").popover('fadeOutAll' [, 1000]);</code></td>
+ </tr>
+ <tr>
+ <td>setTrigger</td>
+ <td>jQuery</td>
+ <td><a name="methods_setTrigger" title="setTrigger"></a>Sets a popover's trigger method (see <a href="#parameters_trigger">this</a> for information on triggers). Also unbinds the previous trigger(s).</td>
+ <td><code>$("#selector").popover('setTrigger', 'hover');</code></td>
+ </tr>
+ <tr>
+ <td>setOption</td>
+ <td>jQuery</td>
+ <td><a name="methods_setOption" title="setOption"></a>Sets an option to the specified value.</td>
+ <td><code>$("#selector").popover('setOption', 'fadeSpeed', 500);</code></td>
+ </tr>
+ <tr>
+ <td>getData</td>
+ <td>mixed</td>
+ <td><a name="methods_getData" title="getData"></a>Get a popover's data. If multiple elements are targeted, the function returns an array of objects.</td>
+ <td><code>$("#selector").popover('getData');</code></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <a name="download"></a>
+ <h3>Download</h3>
+
+ <p>You can download jQuery.popover by cloning it from Github:</p>
+
+ <p><code>git clone git@github.com:klaas4/jQuery.popover.git</code></p>
+
+ <p>Or simply download the <a href="https://github.com/klaas4/jQuery.popover/zipball/master">zip-package</a>.</p>
+
+ <p>Please also check out my blog at <a href="http://daveyyzermans.nl/">http://daveyyzermans.nl/</a>, and if you want, shoot me an e-mail.</p>
+ </body>
+</html>
View
539 _js/libs/popover/jquery.popover-1.1.2.js
@@ -0,0 +1,539 @@
+/**
+ * jQuery.popover plugin v1.1.2
+ * By Davey IJzermans
+ * See http://wp.me/p12l3P-gT for details
+ * http://daveyyzermans.nl/
+ *
+ * Released under MIT License.
+ */
+
+;(function($) {
+ //define some default plugin options
+ var defaults = {
+ verticalOffset: 10, //offset the popover by y px vertically (movement depends on position of popover. If position == 'bottom', positive numbers are down)
+ horizontalOffset: 10, //offset the popover by x px horizontally (movement depends on position of popover. If position == 'right', positive numbers are right)
+ title: false, //heading, false for none
+ content: false, //content of the popover
+ url: false, //set to an url to load content via ajax
+ classes: '', //classes to give the popover, i.e. normal, wider or large
+ position: 'auto', //where should the popover be placed? Auto, top, right, bottom, left or absolute (i.e. { top: 4 }, { left: 4 })
+ fadeSpeed: 160, //how fast to fade out popovers when destroying or hiding
+ trigger: 'click', //how to trigger the popover: click, hover or manual
+ preventDefault: true, //preventDefault actions on the element on which the popover is called
+ stopChildrenPropagation: true, //prevent propagation on popover children
+ hideOnHTMLClick: true, //hides the popover when clicked outside of it
+ animateChange: true, //animate a popover reposition
+ autoReposition: true, //automatically reposition popover on popover change and window resize
+ anchor: false //anchor the popover to a different element
+ }
+ var popovers = [];
+ var _ = {
+ calc_position: function(popover, position) {
+ var data = popover.popover("getData");
+ var options = data.options;
+ var $anchor = options.anchor ? $(options.anchor) : popover;
+ var el = data.popover;
+
+ var coordinates = $anchor.offset();
+ var y1, x1;
+
+ if (position == 'top') {
+ y1 = coordinates.top - el.outerHeight();
+ x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
+ } else if (position == 'right') {
+ y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
+ x1 = coordinates.left + $anchor.outerWidth();
+ } else if (position == 'left') {
+ y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
+ x1 = coordinates.left - el.outerWidth();
+ } else {
+ //bottom
+ y1 = coordinates.top + $anchor.outerHeight();
+ x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
+ }
+
+ x2 = x1 + el.outerWidth();
+ y2 = y1 + el.outerHeight();
+ ret = {
+ x1: x1,
+ x2: x2,
+ y1: y1,
+ y2: y2
+ };
+
+ return ret;
+ },
+ pop_position_class: function(popover, position) {
+ var remove = "popover-top popover-right popover-left";
+ var arrow = "top-arrow"
+ var arrow_remove = "right-arrow bottom-arrow left-arrow";
+
+ if (position == 'top') {
+ remove = "popover-right popover-bottom popover-left";
+ arrow = 'bottom-arrow';
+ arrow_remove = "top-arrow right-arrow left-arrow";
+ } else if (position == 'right') {
+ remove = "popover-yop popover-bottom popover-left";
+ arrow = 'left-arrow';
+ arrow_remove = "top-arrow right-arrow bottom-arrow";
+ } else if (position == 'left') {
+ remove = "popover-top popover-right popover-bottom";
+ arrow = 'right-arrow';
+ arrow_remove = "top-arrow bottom-arrow left-arrow";
+ }
+
+ popover
+ .removeClass(remove)
+ .addClass('popover-' + position)
+ .find('.arrow')
+ .removeClass(arrow_remove)
+ .addClass(arrow);
+ }
+ };
+ var methods = {
+ /**
+ * Initialization method
+ * Merges parameters with defaults, makes the popover and saves data
+ *
+ * @param object
+ * @return jQuery
+ */
+ init : function(params) {
+ return this.each(function() {
+ var options = $.extend({}, defaults, params);
+
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if ( ! data) {
+ var popover = $('<div class="popover" />')
+ .addClass(options.classes)
+ .append('<div class="arrow" />')
+ .append('<div class="wrap"></div>')
+ .appendTo('body')
+ .hide();
+
+ if (options.stopChildrenPropagation) {
+ popover.children().bind('click.popover', function(event) {
+ event.stopPropagation();
+ });
+ }
+
+ if (options.anchor) {
+ if ( ! options.anchor instanceof jQuery) {
+ options.anchor = $(options.anchor);
+ }
+ }
+
+ var data = {
+ target: $this,
+ popover: popover,
+ options: options
+ };
+
+ if (options.title) {
+ $('<div class="title" />')
+ .html(options.title instanceof jQuery ? options.title.html() : options.title)
+ .appendTo(popover.find('.wrap'));
+ }
+ if (options.content) {
+ $('<div class="content" />')
+ .html(options.content instanceof jQuery ? options.content.html() : options.content)
+ .appendTo(popover.find('.wrap'));
+ }
+
+ $this.data('popover', data);
+ popovers.push($this);
+
+ if (options.url) {
+ $this.popover('ajax', options.url);
+ }
+
+ $this.popover('reposition');
+ $this.popover('setTrigger', options.trigger);
+
+ if (options.hideOnHTMLClick) {
+ var hideEvent = "click.popover";
+ if ("ontouchstart" in document.documentElement)
+ hideEvent = 'touchstart.popover';
+ $('html').unbind(hideEvent).bind(hideEvent, function(event) {
+ $('html').popover('fadeOutAll');
+ });
+ }
+
+ if (options.autoReposition) {
+ var repos_function = function(event) {
+ $this.popover('reposition');
+ };
+ $(window)
+ .unbind('resize.popover').bind('resize.popover', repos_function)
+ .unbind('scroll.popover').bind('scroll.popover', repos_function);
+ }
+ }
+ });
+ },
+ /**
+ * Reposition the popover
+ *
+ * @return jQuery
+ */
+ reposition: function() {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var popover = data.popover;
+ var options = data.options;
+ var $anchor = options.anchor ? $(options.anchor) : $this;
+ var coordinates = $anchor.offset();
+
+ var position = options.position;
+ if ( ! (position == 'top' || position == 'right' || position == 'left' || position == 'auto')) {
+ position = 'bottom';
+ }
+ var calc;
+
+ if (position == 'auto') {
+ var positions = ["bottom", "left", "top", "right"];
+ var scrollTop = $(window).scrollTop();
+ var scrollLeft = $(window).scrollLeft();
+ var windowHeight = $(window).outerHeight();
+ var windowWidth = $(window).outerWidth();
+
+ $.each (positions, function(i, pos) {
+ calc = _.calc_position($this, pos);
+
+ var x1 = calc.x1 - scrollLeft;
+ var x2 = calc.x2 - scrollLeft + options.horizontalOffset;
+ var y1 = calc.y1 - scrollTop;
+ var y2 = calc.y2 - scrollTop + options.verticalOffset;
+
+ if (x1 < 0 || x2 < 0 || y1 < 0 || y2 < 0)
+ //popover is left off of the screen or above it
+ return true; //continue
+
+ if (y2 > windowHeight)
+ //popover is under the window viewport
+ return true; //continue
+
+ if (x2 > windowWidth)
+ //popover is right off of the screen
+ return true; //continue
+
+ position = pos;
+ return false;
+ });
+
+ if (position == 'auto') {
+ //position is still auto
+ return;
+ }
+ }
+
+ calc = _.calc_position($this, position);
+ var top = calc.top;
+ var left = calc.left;
+ _.pop_position_class(popover, position);
+
+ var marginTop = 0;
+ var marginLeft = 0;
+ if (position == 'bottom') {
+ marginTop = options.verticalOffset;
+ }
+ if (position == 'top') {
+ marginTop = -options.verticalOffset;
+ }
+ if (position == 'right') {
+ marginLeft = options.horizontalOffset;
+ }
+ if (position == 'left') {
+ marginLeft = -options.horizontalOffset;
+ }
+
+ var css = {
+ left: calc.x1,
+ top: calc.y1,
+ marginTop: marginTop,
+ marginLeft: marginLeft
+ };
+
+ if (data.initd && options.animateChange) {
+ popover.css(css);
+ } else {
+ data.initd = true;
+ popover.css(css);
+ }
+ $this.data('popover', data);
+ }
+ });
+ },
+ /**
+ * Remove a popover from the DOM and clean up data associated with it.
+ *
+ * @return jQuery
+ */
+ destroy: function() {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ $this.unbind('.popover');
+ $(window).unbind('.popover');
+ data.popover.remove();
+ $this.removeData('popover');
+ });
+ },
+ /**
+ * Show the popover
+ *
+ * @return jQuery
+ */
+ show: function() {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var popover = data.popover;
+ $this.popover('reposition');
+ popover.clearQueue().css({ zIndex: 950 }).show();
+ }
+ });
+ },
+ /**
+ * Hide the popover
+ *
+ * @return jQuery
+ */
+ hide: function() {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ data.popover.hide().css({ zIndex: 949 });
+ }
+ });
+ },
+ /**
+ * Fade out the popover
+ *
+ * @return jQuery
+ */
+ fadeOut: function(ms) {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var popover = data.popover;
+ var options = data.options;
+ popover.delay(100).css({ zIndex: 949 }).fadeOut(ms ? ms : options.fadeSpeed);
+ }
+ });
+ },
+ /**
+ * Hide all popovers
+ *
+ * @return jQuery
+ */
+ hideAll: function() {
+ return $.each (popovers, function(i, pop) {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var popover = data.popover;
+ popover.hide();
+ }
+ });
+ },
+ /**
+ * Fade out all popovers
+ *
+ * @param int
+ * @return jQuery
+ */
+ fadeOutAll: function(ms) {
+ return $.each (popovers, function(i, pop) {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var popover = data.popover;
+ var options = data.options;
+ popover.css({ zIndex: 949 }).fadeOut(ms ? ms : options.fadeSpeed);
+ }
+ });
+ },
+ /**
+ * Set the event trigger for the popover. Also cleans the previous binding.
+ *
+ * @param string
+ * @return jQuery
+ */
+ setTrigger: function(trigger) {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var popover = data.popover;
+ var options = data.options;
+ var $anchor = options.anchor ? $(options.anchor) : $this;
+
+ if (trigger === 'click') {
+ $anchor.unbind('click.popover').bind('click.popover', function(event) {
+ if (options.preventDefault) {
+ event.preventDefault();
+ }
+ event.stopPropagation();
+ $this.popover('show');
+ });
+ popover.unbind('click.popover').bind('click.popover', function(event) {
+ event.stopPropagation();
+ });
+ } else {
+ $anchor.unbind('click.popover');
+ popover.unbind('click.popover')
+ }
+
+ if (trigger === 'hover') {
+ $anchor.add(popover).bind('mousemove.popover', function(event) {
+ $this.popover('show');
+ });
+ $anchor.add(popover).bind('mouseleave.popover', function(event) {
+ $this.popover('fadeOut');
+ });
+ } else {
+ $anchor.add(popover).unbind('mousemove.popover').unbind('mouseleave.popover');
+ }
+
+ if (trigger === 'focus') {
+ $anchor.add(popover).bind('focus.popover', function(event) {
+ $this.popover('show');
+ });
+ $anchor.add(popover).bind('blur.popover', function(event) {
+ $this.popover('fadeOut');
+ });
+ $anchor.bind('click.popover', function(event) {
+ event.stopPropagation();
+ });
+ } else {
+ $anchor.add(popover).unbind('focus.popover').unbind('blur.popover').unbind('click.popover');
+ }
+ }
+ });
+ },
+ /**
+ * Rename the popover's title
+ *
+ * @param string
+ * @return jQuery
+ */
+ title: function(text) {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var title = data.popover.find('.title');
+ var wrap = data.popover.find('.wrap');
+ if (title.length === 0) {
+ title = $('<div class="title" />').appendTo(wrap);
+ }
+ title.html(text);
+ }
+ });
+ },
+ /**
+ * Set the popover's content
+ *
+ * @param html
+ * @return jQuery
+ */
+ content: function(html) {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var content = data.popover.find('.content');
+ var wrap = data.popover.find('.wrap');
+ if (content.length === 0) {
+ content = $('<div class="content" />').appendTo(wrap);
+ }
+ content.html(html);
+ }
+ });
+ },
+ /**
+ * Read content with AJAX and set popover's content.
+ *
+ * @param string
+ * @param object
+ * @return jQuery
+ */
+ ajax: function(url, ajax_params) {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ var ajax_defaults = {
+ url: url,
+ success: function(ajax_data) {
+ var content = data.popover.find('.content');
+ var wrap = data.popover.find('.wrap');
+ if (content.length === 0) {
+ content = $('<div class="content" />').appendTo(wrap);
+ }
+ content.html(ajax_data);
+ }
+ }
+ var ajax_options = $.extend({}, ajax_defaults, ajax_params);
+ $.ajax(ajax_options);
+ }
+ });
+ },
+ setOption: function(option, value) {
+ return this.each(function() {
+ var $this = $(this);
+ var data = $this.popover('getData');
+
+ if (data) {
+ data.options[option] = value;
+ $this.data('popover', data);
+ }
+ });
+ },
+ getData: function() {
+ var ret = [];
+ this.each(function() {
+ var $this = $(this);
+ var data = $this.data('popover');
+
+ if (data) ret.push(data);
+ });
+
+ if (ret.length == 0) {
+ return;
+ }
+ if (ret.length == 1) {
+ ret = ret[0];
+ }
+ return ret;
+ }
+ };
+
+ $.fn.popover = function(method) {
+ if (methods[method]) {
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ } else if ( typeof method === 'object' || !method) {
+ return methods.init.apply(this, arguments);
+ } else {
+ $.error('Method ' + method + ' does not exist on jQuery.popover');
+ }
+ }
+})(jQuery);
View
77 _js/libs/popover/popover.css
@@ -0,0 +1,77 @@
+/**
+ * jQuery.popover example stylesheet.
+ * By Davey IJzermans
+ * http://daveyyzermans.nl
+ *
+ * License: public domain
+ */
+
+.popover {
+ position: absolute;
+ top: 0; left: 0;
+ max-height: 240px;
+ width: 220px;
+ display: none;
+ -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
+}
+.popover.wider {
+ width: 340px;
+}
+.popover.large {
+ width: 470px;
+ max-height: 350px;
+}
+.popover .arrow, .popover .top-arrow {
+ position: absolute;
+ top: 0; left: 50%;
+ margin: -10px 0 0 -3px;
+ width: 0; height: 0;
+ border-top: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid #121212;
+}
+.popover .bottom-arrow {
+ top: 100%; left: 50%;
+ margin: 0 0 0 -3px;
+ border-top: 5px solid #121212;
+ border-bottom: 5px solid transparent;
+}
+.popover .left-arrow {
+ top: 50%; left: -10px;
+ margin: -3px 0 0;
+ border-right: 5px solid #121212;
+ border-bottom: 5px solid transparent;
+}
+.popover .right-arrow {
+ top: 50%; left: 100%;
+ margin: -3px 0 0;
+ border-left: 5px solid #121212;
+ border-bottom: 5px solid transparent;
+}
+.popover .wrap {
+ background: white;
+ border: 3px solid #121212;
+ border-radius: 4px;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+}
+.popover .title {
+ background: #121212 url(popover_gradient.png) repeat-x;
+ color: white;
+ font-size: 1.3em;
+ text-align: center;
+ padding: 8px 0 0 0;
+ height: 27px;
+}
+.popover .content {
+ padding: 15px;
+ max-height: 175px;
+ overflow: auto;
+ line-height: 1.3em;
+ font-size: 0.9em;
+}
+.popover.large .content {
+ max-height: 285px;
+}
View
BIN _js/libs/popover/popover_gradient.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
20 _js/libs/popover2/MIT-LICENSE.txt
@@ -0,0 +1,20 @@
+Copyright (c) 2011 Crowd Favorite (http://crowdfavorite.com)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
94 _js/libs/popover2/README.markdown
@@ -0,0 +1,94 @@
+# CF Popover
+
+A lightweight framework for positioning popovers against triggers links. It's a pretty thin wrapper for jQuery UI Position, which does most of the heavy lifting.
+
+JavaScript
+
+ $('.trigger').popover();
+
+HTML:
+
+ <a class="trigger" href="#popover1">Open Popover</a>
+ <div id="popover1">Popover FTW!</div>
+
+CSS:
+
+ #popover1 {
+ position:absolute;
+ }
+
+## Requirements
+
+- jQuery 1.6+
+- jQuery UI 1.8+
+
+It would probably work with earlier versions, but we haven't tested that.
+
+## What it Does
+
+- Visually positions the popover against the trigger element, regardless of where they are in the source order.
+- Toggles the Popover with a fade effect when you click the trigger
+- When clicking outside of the popover area, hides the popover.
+- Repositions the popover after a window resize to make sure it stays pinned to the right place.
+- Adds `.before` and `.after` empty elements to the popover. You can use these to create comic-bubble pointers using background images, or that type of thing.
+
+## How to Use It
+
+Include the script and it's requirements.
+
+Popover markup consist of two parts:
+
+- The popover element which must have an ID
+- A trigger link, with an anchor to the ID of the popover element.
+
+Sample markup:
+
+ <a class="trigger" href="#popover1">Open Popover</a>
+ <div id="popover1">Popover FTW!</div>
+
+The popover element can live anywhere on the page. The script will automatically position the popover against the trigger.
+
+You will also typically want to add `position: absolute;` to your popover element, otherwise jQuery UI Position will try to use relative positioning.
+
+ #popover1 {
+ position: absolute;
+ }
+
+Or better yet, use a generic class:
+
+ .popover {
+ position: absolute;
+ }
+
+Invoke the script on the trigger elements:
+
+ $('.trigger').popover();
+
+The popover script will find the associated popover for a trigger by looking at the value of the `href` attribute.
+
+You can also pass options. This would make the popover appear at the right-top edge of the trigger:
+
+ $('.trigger').popover({
+ my: 'left bottom', // of popover
+ at: 'right top', // of trigger
+ });
+
+### Options
+
+- `my`: position of popover. Can be [anything UI Position accepts](http://jqueryui.com/demos/position/).
+- `at`: position of popover against trigger. Can be [anything UI Position accepts](http://jqueryui.com/demos/position/).
+- `offset`: any tweaks you would like to make to the position. Can be [anything UI Position accepts](http://jqueryui.com/demos/position/).
+- `collision`: the type of collision logic to run. Default "flop flop" -- a custom positioning plugin similar to "flip". Adds a `flopped-x` or `flopped-y` class to the popover when collision is in action. Can be [anything UI Position accepts](http://jqueryui.com/demos/position/).
+- `using`: a functional option for tweaking positioning of the popover. Can be [anything UI Position accepts](http://jqueryui.com/demos/position/).
+- `popover`: by default, the popover is found via the trigger's href attribute. If you absolutely have to, you can override this by setting the popover property. Pass in a selector, jQuery object or anything else `$()` accepts.
+
+### Advanced Use
+
+You can access methods and data for a popover after it's been initialized via the data API.
+
+ $('.trigger').data('popover').hide(); // .hidePopover(event) can be used, but will stop propagation of the event
+ $('.trigger').data('popover').opts.my // value of 'my' option for this instance
+
+Duck-typing the constructor function for popovers is possible by changing:
+
+ $.fn.popover.Popover
View
196 _js/libs/popover2/demo.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>CF Popover</title>
+
+ <style type="text/css" media="screen">
+ /* Stripped-down CSS Normalize. Just here for the purpose
+ of looking good (it's not needed for the plugin to work.)
+ -------------------------------------------------- */
+ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+ html {
+ height: 100%;
+ }
+ body {
+ min-height: 100%;
+ }
+
+ body { margin: 0; font-size: 13px; line-height: 1.231; }
+
+ body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+ a { color: #00e; }
+ a:visited { color: #551a8b; }
+ a:hover { color: #06e; }
+ a:focus { outline: thin dotted; }
+
+ /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+ a:hover, a:active { outline: 0; }
+
+ ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+ dd { margin: 0 0 0 40px; }
+ nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+ #container {
+ margin: 30px auto;
+ width: 800px;
+ }
+
+ .section {
+ margin: 60px 0;
+ }
+ .section h2 {
+ margin: 40px 0;
+ }
+
+ /* Popover styles
+ -------------------------------------------------- */
+ /* Required style */
+ .popover {
+ position: absolute;
+ }
+
+ /* Aesthetic styles */
+ .popover {
+ background: #333;
+ color: #fff;
+ -moz-border-radius: 5px; /* FF1+ */
+ -webkit-border-radius: 5px; /* Saf3+, Chrome */
+ -khtml-border-radius: 5px; /* Konqueror */
+ border-radius: 5px; /* Standard. IE9 */
+ padding: 10px;
+ width: 200px;
+ }
+
+ #popover2 .after {
+ border-bottom: 10px solid transparent;
+ border-left: 15px solid #333;
+ content: '';
+ bottom: -10px;
+ height: 0;
+ margin-left: -5px;
+ left: 50%;
+ position: absolute;
+ width: 0;
+ }
+
+ #popover5 .after,
+ #popover3.flopped-x .after {
+ border-bottom: 10px solid transparent;
+ border-left: 0;
+ border-right: 15px solid #333;
+ content: '';
+ bottom: -10px;
+ height: 0;
+ right: 10px;
+ position: absolute;
+ width: 0;
+ }
+
+ #popover3 .after,
+ #popover5.flopped-x .after {
+ border-bottom: 10px solid transparent;
+ border-right: 0;
+ border-left: 15px solid #333;
+ content: '';
+ bottom: -10px;
+ height: 0;
+ left: 10px;
+ position: absolute;
+ width: 0;
+ }
+
+ #popover4 .after {
+ border-top: 10px solid transparent;
+ border-left: 15px solid #333;
+ content: '';
+ top: -10px;
+ height: 0;
+ margin-left: -5px;
+ left: 50%;
+ position: absolute;
+ width: 0;
+ }
+ </style>
+
+ <!-- Include the libraries -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+ <script src="jquery.ui.position.min.js"></script>
+ <script src="jquery.cf.popover.js"></script>
+
+ <!-- Invoke the popovers -->
+ <script type="text/javascript">
+ jQuery(function ($) {
+ $('#trigger1').popover();
+
+ $('#trigger2').popover({
+ my: 'center bottom',
+ at: 'center top',
+ offset: '0 -12px'
+ });
+
+ $('#trigger3').popover({
+ my: 'left bottom',
+ at: 'right top',
+ offset: '-5px -5px'
+ });
+
+ $('#trigger5').popover({
+ my: 'right bottom',
+ at: 'left top',
+ offset: '-5px -5px'
+ });
+
+ $('#trigger4').popover({
+ my: 'center top',
+ at: 'center bottom',
+ offset: '0 12px'
+ });
+ });
+ </script>
+</head>
+
+<body>
+ <div id="container">
+ <h1>Popover</h1>
+
+ <div class="section">
+ <h2>Simple Popover</h2>
+
+ <a id="trigger1" href="#popover1">Open Popover</a>
+ <div id="popover1" class="popover">I'm a Popover</div>
+ </div>
+
+ <div class="section">
+ <h2>Using .after element</h2>
+
+ <a id="trigger2" href="#popover2">Open Popover</a>
+ <div id="popover2" class="popover">I'm a Popover</div>
+ </div>
+
+ <div class="section">
+ <h2>Upper right-hand corner</h2>
+
+ <a id="trigger3" href="#popover3">Open Popover</a>
+ <div id="popover3" class="popover">I'm a Popover</div>
+ </div>
+
+ <div class="section">
+ <h2>Upper left-hand corner</h2>
+
+ <a id="trigger5" href="#popover5">Open Popover</a>
+ <div id="popover5" class="popover">I'm a Popover</div>
+ </div>
+
+ <div class="section">
+ <h2>Center/Bottom</h2>
+
+ <a id="trigger4" href="#popover4">Open Popover</a>
+ <div id="popover4" class="popover">I'm a Popover</div>
+ </div>
+
+ <p>A <a href="http://crowdfavorite.com">Crowd Favorite</a> production.</p>
+ </div><!--! end of #container -->
+</html>
View
241 _js/libs/popover2/jquery.cf.popover.js
@@ -0,0 +1,241 @@
+/*!
+ * CF Popover v1.2
+ * A lightweight framework for positioning iPad-style popover elements against triggers.
+ *
+ * Copyright 2011-2012, Crowd Favorite (http://crowdfavorite.com)
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+;(function ($) {
+ /* Proxy this once to save computation */
+ var uiPosition = $.ui.position;
+
+ /**
+ * Constructor function for popovers
+ */
+ var Popover = function ($trigger, opts) {
+ this.opts = $.extend({}, this.opts, opts);
+ this.$trigger = $($trigger.get(0));
+
+ this.$popover = $(( this.opts.popover || this.$trigger.attr('href') ));
+ this.$popover = $(this.$popover.get(0));
+
+ if (!this.$popover.hasClass('popover-before-after-applied')) {
+ this.$popover.addClass('popover-before-after-applied')
+ .prepend('<span role="presentation" class="before"/>')
+ .append('<span role="presentation" class="after"/>')
+ .hide();
+ }
+ };
+
+ Popover.prototype = {
+ timeout: null,
+ $win: $(window),
+
+ opts: {
+ my: 'center bottom',
+ at: 'center top',
+ offset: '0 0',
+ collision: 'flop flop',
+ popover: null,
+ thereCanBeOnlyOne: true
+ },
+
+ /**
+ * Custom collision handling for popovers (access via "flop" keyword)
+ * Identical to "flip", but adds class to element being flipped to let
+ * you know when it has been changed from default position.
+ * Functions get bound to this.$popover in the constructor.
+ * Used as a monkey patch below.
+ */
+ flop: {
+ left: function (position, data) {
+ var cPosition = data.collisionPosition,
+ $popover = $(this);
+
+ // Modifies position and data by reference
+ var out = uiPosition.flip.left(position, data);
+
+ if (position.left !== undefined) {
+ $popover.toggleClass('flopped-x', cPosition.left !== position.left);
+ }
+
+ return out;
+ },
+ top: function (position, data) {
+ var cPosition = data.collisionPosition,
+ $popover = $(this);
+
+ // Modifies position and data by reference
+ var out = uiPosition.flip.top(position, data);
+
+ if (position.top !== undefined) {
+ $popover.toggleClass('flopped-y', cPosition.top !== position.top);
+ }
+
+ return out;
+ }
+ },
+
+ positionPopover: function(position, data) {
+ var $popover = $(this);
+
+ if (data) {
+ var opener = $popover.data('opener'),
+ popover = $(opener).data('popover');
+
+ if (popover && popover.opts && popover.opts.my) {
+ var my = popover.opts.my.split(' ');
+ if (my.length > 0) {
+ $popover.toggleClass('flopped-x', data.horizontal !== my[0]);
+ $popover.toggleClass('flopped-y', data.vertical !== (my.length > 1 ? my[1] : my[0]));
+ }
+ }
+ }
+
+ $popover.css(position);
+ },
+
+ bindEvents: function () {
+ this.$trigger.click($.proxy(function (e) {
+ if (this.popoverIsOpen()) {
+ this.hidePopover(e);
+ }
+ else {
+ this.showPopover(e);
+ };
+ if (this.opts.thereCanBeOnlyOne) {
+ $('body').trigger('popover-hide-all');
+ };
+ }, this));
+
+ $('body').click($.proxy(function (e) {
+ if (this.popoverIsOpen()) {
+ if (!$(this.$popover).has($(e.target)).size() && !$(this.$popover).filter($(e.target)).size()) {
+ this.hide();
+ }
+ };
+ }, this)).bind('popover-hide-all', $.proxy(function() {
+ if (this.popoverIsOpen() && !this.currentTrigger()) {
+ this.hide(true);
+ };
+ }, this));
+
+ this.$win.resize($.proxy(this.pinToTargetDebounced, this));
+ },
+
+ /* is the popover the this trigger open? */
+ popoverIsOpen: function() {
+ var opener = (this.$trigger.length == this.$trigger.filter(this.$popover.data('opener')).length);
+ return (this.$popover.is(':visible') && opener);
+ },
+
+ /* is this trigger the last trigger clicked? */
+ currentTrigger: function() {
+ return (this.$trigger.length == this.$trigger.filter($.fn.popover.lastTrigger).length);
+ },
+
+ /* Method for showing the popover */
+ show: function (e) {
+ $.fn.popover.lastTrigger = this.$trigger;
+ this.$popover.fadeIn('medium', $.proxy(function () {
+ this.$trigger.trigger('popover-show-animation-complete');
+ }, this)).data('opener', this.$trigger);
+ this.pinToTarget();
+ this.$trigger.trigger('popover-show');
+ },
+
+ /* Method for hiding the popover */
+ hide: function (immediate) {
+ var callback = $.proxy(function () {
+ this.$trigger.trigger('popover-hide-animation-complete');
+ }, this);
+ if (immediate) {
+ this.$popover.hide(0, callback);
+ }
+ else {
+ this.$popover.fadeOut('fast', callback);
+ };
+ this.$trigger.trigger('popover-hide');
+ },
+
+ toggle: function(immediate) {
+ if (this.popoverIsOpen()) {
+ this.hide(immediate);
+ }
+ else {
+ this.show();
+ }
+ },
+
+ /* Event handler for showing popover */
+ showPopover: function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.show(e);
+ },
+
+ /* Event handler for hiding popover */
+ hidePopover: function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.hide();
+ },
+
+ /* Calculate and position against trigger */
+ pinToTarget: function () {
+ if (!this.popoverIsOpen()) {
+ return;
+ }
+ var $popover = this.$popover,
+ posOpts = $.extend({
+ of: this.$trigger,
+ using: this.positionPopover
+ }, this.opts),
+
+ /* Monkey-patch in our custom collision handling */
+ flop = {
+ /* Bind our custom collision handling to the popover element */
+ left: $.proxy(this.flop.left, this.$popover),
+ top: $.proxy(this.flop.top, this.$popover)
+ };
+
+ uiPosition.flop = flop;
+ $popover.position(posOpts);
+ uiPosition.flop = undefined;
+ },
+
+ /* Debounced to prevent hitting lots of times while resizing happens.
+ Will fire a maximum of 20x per second. Useful for binding to the window
+ resize event. */
+ pinToTargetDebounced: function () {
+ clearTimeout(this.timeout);
+ this.timeout = setTimeout($.proxy(this.pinToTarget, this), 50);
+ }
+ };
+
+ var fn = $.fn;
+
+ fn.popover = function (opts) {
+ var Popover = fn.popover.Popover;
+
+ this.each(function() {
+ var $this = $(this);
+ var popover = new Popover($this, opts);
+ popover.bindEvents();
+
+ /* Store Popover instance for easy method access.
+ See: http://alexsexton.com/?p=51
+
+ Example: $('.trigger').data('popover').hidePopover(); */
+ $this.data('popover', popover);
+ });
+
+ return this;
+ };
+
+ fn.popover.lastTrigger = null;
+
+ /* Expose constructor function for folks to duck-type when necessary */
+ fn.popover.Popover = Popover;
+})(jQuery);
View
9 _js/libs/popover2/jquery.cf.popover.min.js
@@ -0,0 +1,9 @@
+/*!
+ * CF Popover v1.1
+ * A lightweight framework for positioning iPad-style popover elements against triggers.
+ *
+ * Copyright 2011-2012, Crowd Favorite (http://crowdfavorite.com)
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+(function(d){var a=d.ui.position;var c=function(e,f){this.opts=d.extend({},this.opts,f);this.$trigger=d(e.get(0));this.$popover=d((this.opts.popover||this.$trigger.attr("href")));this.$popover=d(this.$popover.get(0));if(!this.$popover.hasClass("popover-before-after-applied")){this.$popover.addClass("popover-before-after-applied").prepend('<span role="presentation" class="before"/>').append('<span role="presentation" class="after"/>').hide()}};c.prototype={timeout:null,$win:d(window),opts:{my:"center bottom",at:"center top",offset:"0 0",collision:"flop flop",popover:null,thereCanBeOnlyOne:true},flop:{left:function(f,i){var e=i.collisionPosition,h=d(this);var g=a.flip.left(f,i);if(f.left!==undefined){h.toggleClass("flopped-x",e.left!==f.left)}return g},top:function(f,i){var e=i.collisionPosition,h=d(this);var g=a.flip.top(f,i);if(f.top!==undefined){h.toggleClass("flopped-y",e.top!==f.top)}return g}},positionPopover:function(e,i){var g=d(this);if(i){var f=g.data("opener"),h=d(f).data("popover");if(h&&h.opts&&h.opts.my){var j=h.opts.my.split(" ");if(j.length>0){g.toggleClass("flopped-x",i.horizontal!==j[0]);g.toggleClass("flopped-y",i.vertical!==(j.length>1?j[1]:j[0]))}}}g.css(e)},bindEvents:function(){this.$trigger.click(d.proxy(function(f){if(this.popoverIsOpen()){this.hidePopover(f)}else{this.showPopover(f)}if(this.opts.thereCanBeOnlyOne){d("body").trigger("popover-hide-all")}},this));d("body").click(d.proxy(function(f){if(this.popoverIsOpen()){if(!d(this.$popover).has(d(f.target)).size()&&!d(this.$popover).filter(d(f.target)).size()){this.hide()}}},this)).bind("popover-hide-all",d.proxy(function(){if(this.popoverIsOpen()&&!this.currentTrigger()){this.hide(true)}},this));this.$win.resize(d.proxy(this.pinToTargetDebounced,this))},popoverIsOpen:function(){var e=(this.$trigger.length==this.$trigger.filter(this.$popover.data("opener")).length);return(this.$popover.is(":visible")&&e)},currentTrigger:function(){return(this.$trigger.length==this.$trigger.filter(d.fn.popover.lastTrigger).length)},show:function(f){d.fn.popover.lastTrigger=this.$trigger;this.$popover.fadeIn("medium",d.proxy(function(){this.$trigger.trigger("popover-show-animation-complete")},this)).data("opener",this.$trigger);this.pinToTarget();this.$trigger.trigger("popover-show")},hide:function(e){var f=d.proxy(function(){this.$trigger.trigger("popover-hide-animation-complete")},this);if(e){this.$popover.hide(0,f)}else{this.$popover.fadeOut("fast",f)}this.$trigger.trigger("popover-hide")},toggle:function(e){if(this.popoverIsOpen()){this.hide(e)}else{this.show()}},showPopover:function(f){f.preventDefault();f.stopPropagation();this.show(f)},hidePopover:function(f){f.preventDefault();f.stopPropagation();this.hide()},pinToTarget:function(){if(!this.popoverIsOpen()){return}var e=this.$popover,g=d.extend({of:this.$trigger,using:this.positionPopover},this.opts),f={left:d.proxy(this.flop.left,this.$popover),top:d.proxy(this.flop.top,this.$popover)};a.flop=f;e.position(g);a.flop=undefined},pinToTargetDebounced:function(){clearTimeout(this.timeout);this.timeout=setTimeout(d.proxy(this.pinToTarget,this),50)}};var b=d.fn;b.popover=function(f){var e=b.popover.Popover;this.each(function(){var h=d(this);var g=new e(h,f);g.bindEvents();h.data("popover",g)});return this};b.popover.lastTrigger=null;b.popover.Popover=c})(jQuery);
View
9 _js/libs/popover2/jquery.ui.position.min.js
@@ -0,0 +1,9 @@
+/*
+ * jQuery UI Position 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Position
+ */(function(a,b){a.ui=a.ui||{};var c=/left|center|right/,d=/top|center|bottom/,e="center",f=a.fn.position,g=a.fn.offset;a.fn.position=function(b){if(!b||!b.of)return f.apply(this,arguments);b=a.extend({},b);var g=a(b.of),h=g[0],i=(b.collision||"flip").split(" "),j=b.offset?b.offset.split(" "):[0,0],k,l,m;return h.nodeType===9?(k=g.width(),l=g.height(),m={top:0,left:0}):h.setTimeout?(k=g.width(),l=g.height(),m={top:g.scrollTop(),left:g.scrollLeft()}):h.preventDefault?(b.at="left top",k=l=0,m={top:b.of.pageY,left:b.of.pageX}):(k=g.outerWidth(),l=g.outerHeight(),m=g.offset()),a.each(["my","at"],function(){var a=(b[this]||"").split(" ");a.length===1&&(a=c.test(a[0])?a.concat([e]):d.test(a[0])?[e].concat(a):[e,e]),a[0]=c.test(a[0])?a[0]:e,a[1]=d.test(a[1])?a[1]:e,b[this]=a}),i.length===1&&(i[1]=i[0]),j[0]=parseInt(j[0],10)||0,j.length===1&&(j[1]=j[0]),j[1]=parseInt(j[1],10)||0,b.at[0]==="right"?m.left+=k:b.at[0]===e&&(m.left+=k/2),b.at[1]==="bottom"?m.top+=l:b.at[1]===e&&(m.top+=l/2),m.left+=j[0],m.top+=j[1],this.each(function(){var c=a(this),d=c.outerWidth(),f=c.outerHeight(),g=parseInt(a.curCSS(this,"marginLeft",!0))||0,h=parseInt(a.curCSS(this,"marginTop",!0))||0,n=d+g+(parseInt(a.curCSS(this,"marginRight",!0))||0),o=f+h+(parseInt(a.curCSS(this,"marginBottom",!0))||0),p=a.extend({},m),q;b.my[0]==="right"?p.left-=d:b.my[0]===e&&(p.left-=d/2),b.my[1]==="bottom"?p.top-=f:b.my[1]===e&&(p.top-=f/2),p.left=Math.round(p.left),p.top=Math.round(p.top),q={left:p.left-g,top:p.top-h},a.each(["left","top"],function(c,e){a.ui.position[i[c]]&&a.ui.position[i[c]][e](p,{targetWidth:k,targetHeight:l,elemWidth:d,elemHeight:f,collisionPosition:q,collisionWidth:n,collisionHeight:o,offset:j,my:b.my,at:b.at})}),a.fn.bgiframe&&c.bgiframe(),c.offset(a.extend(p,{using:b.using}))})},a.ui.position={fit:{left:function(b,c){var d=a(window),e=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft();b.left=e>0?b.left-e:Math.max(b.left-c.collisionPosition.left,b.left)},top:function(b,c){var d=a(window),e=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop();b.top=e>0?b.top-e:Math.max(b.top-c.collisionPosition.top,b.top)}},flip:{left:function(b,c){if(c.at[0]===e)return;var d=a(window),f=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft(),g=c.my[0]==="left"?-c.elemWidth:c.my[0]==="right"?c.elemWidth:0,h=c.at[0]==="left"?c.targetWidth:-c.targetWidth,i=-2*c.offset[0];b.left+=c.collisionPosition.left<0?g+h+i:f>0?g+h+i:0},top:function(b,c){if(c.at[1]===e)return;var d=a(window),f=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop(),g=c.my[1]==="top"?-c.elemHeight:c.my[1]==="bottom"?c.elemHeight:0,h=c.at[1]==="top"?c.targetHeight:-c.targetHeight,i=-2*c.offset[1];b.top+=c.collisionPosition.top<0?g+h+i:f>0?g+h+i:0}}},a.offset.setOffset||(a.offset.setOffset=function(b,c){/static/.test(a.curCSS(b,"position"))&&(b.style.position="relative");var d=a(b),e=d.offset(),f=parseInt(a.curCSS(b,"top",!0),10)||0,g=parseInt(a.curCSS(b,"left",!0),10)||0,h={top:c.top-e.top+f,left:c.left-e.left+g};"using"in c?c.using.call(b,h):d.css(h)},a.fn.offset=function(b){var c=this[0];return!c||!c.ownerDocument?null:b?this.each(function(){a.offset.setOffset(this,b)}):g.call(this)})})(jQuery)
View
65 index.html
@@ -6,6 +6,7 @@
<title>An Interactive Resume Builder</title>
<link rel="stylesheet" href="_css/semanticcss.css">
<link rel="stylesheet" href="_css/tableSort.css">
+ <link rel="stylesheet" href="_css/popover.css">
<!-- <link rel="stylesheet" href="_css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="_css/bootstrap-responsive.min.css"> -->
<!-- <link rel="stylesheet" href="_css/style.css"> -->
@@ -20,12 +21,11 @@
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
- </head>
- <body>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="_js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="_js/libs/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="_js/libs/jquery-ui-1.7.1.custom.min.js"></script>
+ <script type="text/javascript" src="_js/libs/popover/jquery.popover-1.1.2.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='_js/libs/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
@@ -36,6 +36,21 @@
</script>
<!-- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> -->
<!-- <script type="text/javascript" src="_js/libs/selectToUISlider.jQuery.js"></script> -->
+
+ <script type="text/javascript">
+ /* <![CDATA[ */
+ jQuery(document).ready(function($) {
+ $("#popover").click(function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ $("#popover").popover('show');
+ });
+ });
+ /* ]]> */
+ </script>
+
+ </head>
+ <body>
<div id="header-container">
<header style="text-align: center;" class="clearfix">
<div>
@@ -72,14 +87,8 @@
<form class="form">
<fieldset id="i_section_information" class="i section information">
<div>
- <span style="float: left"><h1>Information</h1></span>
- <label id="fs_heading_information" class="fs btn i information" style="font-weight: bold;"><span style="float: right; border:1px solid">X</span></label>
+ <span id="popover" style="float: left"><h1 style="text-align:center; font-weight:normal">Information</h1></span>
</div>
- <p style="clear: both; text-indent: 10px;">This interactive resume allows you to generate a resume that is tailored to information you need. Click a heading or subsection to un/hide. If you hide an element (via the left or right side), the right side will be become <span style="color: white;">unfilled</span>. Click it again, and it will become visible and return to normal.</p>
- <p style="text-indent: 10px;">The Work Experience section can be limited by a date range, and narrowed by job roles.</p>
- <p style="text-indent: 10px;">The Skills Table contains certifications, compliances, and technologies I am experienced in, all selectable. The multi-column sortation (hold 'Shift' while clicking columns) will allow you to view the information in the order you need.</p>
- <p style="text-indent: 10px;">All abbreviations and unique categories can be hovered over for full length terminology or brief explanation, while major ideas, programs or technologies provide a <span style="border-bottom: 2px black dotted;">link</span> to provide more information.</p>
- <p style="text-indent: 10px;">Traditional pre-formatted paper resumes are available in the 'Traditional Resumes' section. Templates with my personal predefined scope are available by selecting the template type in the drop down menu above.</p>
</fieldset>
</form>
</aside>
@@ -219,11 +228,22 @@
<section id="gc_section_we" class="gc section workexperience"><h1>Work Experience</h1>
+ <section class="company"><h1>DASH Systems</h1>
+ <section class="position"><h1>Developer</h1>
+ <time class="start" datetime="2012-10">Oct 2012</time>
+ <time class="end" datetime=""></time>
+ <p>As a developer for DASH, I work on client facing websites to update or develop online solutions for their specific business needs.</p>
+ <ul>
+ <li class="dev">I work predominately in a ColdFusion environment to support small and large scale projects, using a suite of programs and tools to learn and implement challenging requests.</li>
+ </ul>
+ </section>
+ </section>
+
<section class="company"><h1>Democratic National Convention</h1>
<section class="position"><h1>Event Manager</h1>
- <time class="start" datetime="2012-7">Jul 2012</time>
+ <time class="start" datetime="2012-07">Jul 2012</time>
<time class="end" datetime="2012-09">Sep 2012</time>
- <p>The 2012 Democratic National Convention is in Charlotte, NC, my hometown. Given the rare opportunity, I was excited to be a part of the select few overseeing the success of the event, as well as providing the true southern hospitality to those attending.</p>
+ <p>The 2012 Democratic National Convention is in Charlotte, NC, my hometown. Given the rare opportunity, I was excited to be a part of the select few overseeing the success of the event, as well as providing the true southern hospitality to those attending, by overseeing the entire staff for hospitality, transportation, and communication.</p>
<ul>
<li class="pm cs">Research and design transportation routes to support the media, staff, and guests</li>
<li class="pm mgr">Coordinate volunteers and staff training, materials, and presentations</li>
@@ -965,6 +985,21 @@
template(keyval);
}
};
+
+//Information Popover
+ $("#popover").popover({
+ title: "Information",
+ content: "This interactive resume allows you to generate a resume that is tailored to information you need. Click a heading or subsection to un/hide. If you hide an element \(via the left or right side\), the right side will be become \<span style=\"color: white; background-color: \#F16529\"\>&nbsp;unfilled \<\/span\>. Click it again, and it will become \<span style=\"color: black; background-color: \#F16529\"\>\&nbsp;filled \<\/span\> on the right and visible on the left.\<br\>\<br\>The Work Experience section can be limited by a date range, and narrowed by job roles.\<br\>\<br\>The Skills Table contains certifications, compliances, and technologies I am experienced in, all selectable. The multi-column sortation \(hold \'Shift\' while clicking columns\) will allow you to view the information in the order you need.\&l