| +div.policy { | ||
| + clear: both; | ||
| + padding-top: 15px; | ||
| +} | ||
| + | ||
| +div.tally-panel, div.policy-views, div.policy-votes, div.policy-tags { | ||
| + float: left; | ||
| +} | ||
| + | ||
| +div.tally-panel { | ||
| + font-size: 9pt; | ||
| + text-align: center; | ||
| +} | ||
| + | ||
| +div.policy-votes, div.policy-views { | ||
| + margin-right: 1em; | ||
| +} | ||
| + | ||
| +h1.policy-title, div.policy-tags { | ||
| + padding-left: 5px; | ||
| + font-size: 16pt; | ||
| +} | ||
| + | ||
| +div.policy-tag { | ||
| + display: inline; | ||
| +} | ||
| + | ||
| +#interests { | ||
| + clear: both; | ||
| + position: absolute; | ||
| + top: 1em; | ||
| + right: 1em; | ||
| +} | ||
| + | ||
| +#interests div.policy-tag { | ||
| + display: block; | ||
| + margin: 1em; | ||
| +} | ||
| + | ||
| +#interests input[type="submit"] { | ||
| + color: #182945; | ||
| +} | ||
| + | ||
| +.interest-extreme { | ||
| + color: #EE0E0E !important; | ||
| +} | ||
| + | ||
| +.interest-high { | ||
| + color: #EE540E !important; | ||
| +} | ||
| + | ||
| +.interest-moderate { | ||
| + color: #996851 !important; | ||
| +} | ||
| + | ||
| +.interest-slight { | ||
| + color: #998176 !important; | ||
| +} | ||
| + | ||
| +.interest-low { | ||
| + color: #999 !important; | ||
| +} | ||
| + | ||
| +h1.policy-title { | ||
| + float: left; | ||
| + padding-right: 1em; | ||
| +} | ||
| + | ||
| +div.policy-summary { | ||
| + clear: both; | ||
| +} | ||
| + | ||
| +div.policy-overview { | ||
| + border-top: 1px solid black; | ||
| + border-bottom: 1px solid black; | ||
| + overflow: hidden; | ||
| + width: 100%; | ||
| +} | ||
| + | ||
| +div.policy-votes, div.policy-overview-text { | ||
| + float: left; | ||
| + padding-bottom: 500em; | ||
| + margin-bottom: -500em; | ||
| +} | ||
| + | ||
| +div.policy-votes { | ||
| + width: 8%; | ||
| +} | ||
| + | ||
| +div.policy-overview-text { | ||
| + width: 78%; | ||
| + margin-right: -1px; | ||
| +} | ||
| + | ||
| +div.policy-tags { | ||
| + float: right; | ||
| + border: 1px solid black; | ||
| +} | ||
| + | ||
| +div.policy-tag { | ||
| + margin: 1em; | ||
| +} | ||
| + | ||
| +div.policy-proposals { | ||
| + float: left; | ||
| +} | ||
| + | ||
| +div.policy-feedback { | ||
| + float: right; | ||
| +} | ||
| + | ||
| +/* http://www.colourlovers.com/web/trends/websites/7856/LivingSocial */ | ||
| + | ||
| +body { | ||
| + margin: 1em; | ||
| + font-family: Arial, sans-serif; | ||
| + color: #182945; | ||
| +} | ||
| + | ||
| +h1.policy-title { | ||
| + display: inline; | ||
| +} | ||
| + | ||
| +a.policy-title { | ||
| + color: #46A5E5; | ||
| + text-decoration: none; | ||
| +} | ||
| + | ||
| +div.policy-tag { | ||
| + margin-right: 0.5em; | ||
| + padding: 3px; | ||
| + font-size: 10pt; | ||
| + border-radius: 4px; | ||
| + border: 1px solid #182945; | ||
| + background-color: #FBF6CE; | ||
| +} | ||
| + | ||
| +div.activation { | ||
| + color: #444; | ||
| +} | ||
| + | ||
| +#interests { | ||
| + border: 2px solid #182945; | ||
| + border-radius: 4px; | ||
| + padding: 0.5em; | ||
| +} | ||
| + | ||
| +#interests div.interests-title { | ||
| + text-align: center; | ||
| + color: #444; | ||
| +} | ||
| + | ||
| +#interests span.delete { | ||
| + background-color: #182945; | ||
| + color: #E8E8F0; | ||
| + border-radius: 50%; | ||
| + padding-left: 3px; | ||
| + padding-right: 3px; | ||
| + font-weight: bold; | ||
| +} | ||
| + | ||
| +<!DOCTYPE html> | ||
| +<html lang="en"> | ||
| +<head> | ||
| + <meta charset="utf-8"> | ||
| + <title>World Politics: A System for Rational, Moderated Debate</title> | ||
| + | ||
| + <link rel="stylesheet" media="screen" href="css/interest.css"> | ||
| + <link rel="stylesheet" media="screen" href="css/theme.css"> | ||
| + | ||
| + <link rel="stylesheet" media="screen" href="tour/tour.css" /> | ||
| + | ||
| + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| + <meta name="author" content="Dave Jarvis"> | ||
| + <meta name="description" content="A website for engaging the public about upcoming policies."> | ||
| + <meta name="robots" content="all"> | ||
| +</head> | ||
| +<body id="world-politics"> | ||
| + | ||
| +<div id="header"> | ||
| +</div> | ||
| + | ||
| +<div id="main" class="main"> | ||
| + <div id="policies" class="policies"> | ||
| + <div class="policy"> | ||
| + <div class="tally-panel"> | ||
| + <div class="policy-votes interest-extreme"> | ||
| + <div class="vote-tally">80k</div> | ||
| + <div class="vote-text">votes</div> | ||
| + </div> | ||
| + <div class="policy-views interest-extreme"> | ||
| + <div class="view-tally">190k</div> | ||
| + <div class="view-text">views</div> | ||
| + </div> | ||
| + <div class="activation"> | ||
| + <div class="activation-date">01-Jan-2014</div> | ||
| + <div class="activation-time">11:30am EST</div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy-summary"> | ||
| + <div class="policy-title"> | ||
| + <a href="summary.html" class="policy-title"><h1 class="policy-title">Water Sustainability Act</h1></a> | ||
| + </div> | ||
| + <div class="policy-tags"> | ||
| + <div class="policy-tag">Act</div> | ||
| + <div class="policy-tag">BC</div> | ||
| + <div class="policy-tag">Environment</div> | ||
| + <div class="policy-tag">Water</div> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy"> | ||
| + <div class="tally-panel"> | ||
| + <div class="policy-votes interest-slight"> | ||
| + <div class="vote-tally">300</div> | ||
| + <div class="vote-text">votes</div> | ||
| + </div> | ||
| + <div class="policy-views interest-moderate"> | ||
| + <div class="view-tally">1k</div> | ||
| + <div class="view-text">views</div> | ||
| + </div> | ||
| + <div class="activation"> | ||
| + <div class="activation-date">12-Feb-2014</div> | ||
| + <div class="activation-time">3:15pm EST</div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy-summary"> | ||
| + <div class="policy-title"> | ||
| + <h1 class="policy-title">Digital Freedom Act</h1> | ||
| + </div> | ||
| + <div class="policy-tags"> | ||
| + <div class="policy-tag">Act</div> | ||
| + <div class="policy-tag">Copyright</div> | ||
| + <div class="policy-tag">Criminal Code</div> | ||
| + <div class="policy-tag">Digital Rights</div> | ||
| + <div class="policy-tag">Internet</div> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy"> | ||
| + <div class="tally-panel"> | ||
| + <div class="policy-votes interest-low"> | ||
| + <div class="vote-tally">85</div> | ||
| + <div class="vote-text">votes</div> | ||
| + </div> | ||
| + <div class="policy-views interest-slight"> | ||
| + <div class="view-tally">100</div> | ||
| + <div class="view-text">views</div> | ||
| + </div> | ||
| + <div class="activation"> | ||
| + <div class="activation-date">21-Apr-2014</div> | ||
| + <div class="activation-time">1:45pm EST</div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy-summary"> | ||
| + <div class="policy-title"> | ||
| + <h1 class="policy-title">Omnibus Crime Bill</h1> | ||
| + </div> | ||
| + <div class="policy-tags"> | ||
| + <div class="policy-tag">Bill</div> | ||
| + <div class="policy-tag">Criminal Code</div> | ||
| + <div class="policy-tag">Education</div> | ||
| + <div class="policy-tag">Environment</div> | ||
| + <div class="policy-tag">Internet</div> | ||
| + <div class="policy-tag">Women's Rights</div> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy"> | ||
| + <div class="tally-panel"> | ||
| + <div class="policy-votes interest-extreme"> | ||
| + <div class="vote-tally">182k</div> | ||
| + <div class="vote-text">votes</div> | ||
| + </div> | ||
| + <div class="policy-views interest-extreme"> | ||
| + <div class="view-tally">420k</div> | ||
| + <div class="view-text">views</div> | ||
| + </div> | ||
| + <div class="activation"> | ||
| + <div class="activation-date">22-Jul-2014</div> | ||
| + <div class="activation-time">4:20pm EST</div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy-summary"> | ||
| + <div class="policy-title"> | ||
| + <h1 class="policy-title">Marijuana Legalization Act</h1> | ||
| + </div> | ||
| + <div class="policy-tags"> | ||
| + <div class="policy-tag">Act</div> | ||
| + <div class="policy-tag">Criminal Code</div> | ||
| + <div class="policy-tag">Drug</div> | ||
| + <div class="policy-tag">Medicine</div> | ||
| + <div class="policy-tag">Marijuana</div> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy"> | ||
| + <div class="tally-panel"> | ||
| + <div class="policy-votes interest-moderate"> | ||
| + <div class="vote-tally">2k</div> | ||
| + <div class="vote-text">votes</div> | ||
| + </div> | ||
| + <div class="policy-views interest-high"> | ||
| + <div class="view-tally">20k</div> | ||
| + <div class="view-text">views</div> | ||
| + </div> | ||
| + <div class="activation"> | ||
| + <div class="activation-date">15-Aug-2014</div> | ||
| + <div class="activation-time">12:25pm EST</div> | ||
| + </div> | ||
| + </div> | ||
| + <div class="policy-summary"> | ||
| + <div class="policy-title"> | ||
| + <h1 class="policy-title">First Nations Land Use Bill</h1> | ||
| + </div> | ||
| + <div class="policy-tags"> | ||
| + <div class="policy-tag">Bill</div> | ||
| + <div class="policy-tag">Environment</div> | ||
| + <div class="policy-tag">First Nations</div> | ||
| + <div class="policy-tag">Pipeline</div> | ||
| + <div class="policy-tag">Property</div> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| + | ||
| + <div id="interests" class="interests"> | ||
| + <div class="interests-title">Interests</div> | ||
| + <div class="policy-tags"> | ||
| + <div class="policy-tag"><span class="delete">✗</span> Criminal Code</div> | ||
| + <div class="policy-tag"><span class="delete">✗</span> Environment</div> | ||
| + <div class="policy-tag"><span class="delete">✗</span> Education</div> | ||
| + </div> | ||
| + <div id="interest-add"> | ||
| + <input type="text" value="" maxlength="16" size="16" /> | ||
| + <input type="submit" value="✔" /> | ||
| + </div> | ||
| + </div> | ||
| +</div> | ||
| + | ||
| +<div id="footer"> | ||
| + <p> </p> | ||
| + <p> </p> | ||
| +</div> | ||
| + | ||
| +<script type="text/javascript" | ||
| + src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
| +<script type="text/javascript" src="tour/tour.js"></script> | ||
| +<script type="text/javascript" src="js/interest.js"></script> | ||
| +</body> | ||
| +</html> | ||
| + | ||
| +var index = 0; | ||
| +var tours = [ | ||
| + { | ||
| + "a": 85, | ||
| + "e": "body", | ||
| + "t": 'This site demonstrates a policy discussion concept. Click each bubble to advance the tour.' | ||
| + }, | ||
| + { | ||
| + "a": 180, | ||
| + "e": "div.main", | ||
| + "t": 'The front page lists upcoming policies.' | ||
| + }, | ||
| + { | ||
| + "a": 115, | ||
| + "d": 15, | ||
| + "e": "div.vote-tally:first", | ||
| + "t": 'Policies include the number of people who have voted on it.' | ||
| + }, | ||
| + { | ||
| + "a": 115, | ||
| + "d": 15, | ||
| + "e": "div.view-tally:first", | ||
| + "t": 'Policies include the number of people who have visited its summary page.' | ||
| + }, | ||
| + { | ||
| + "a": 95, | ||
| + "d": -165, | ||
| + "e": "div.policy-title:first", | ||
| + "t": 'Policy titles link to a summary page.' | ||
| + }, | ||
| + { | ||
| + "a": 215, | ||
| + "e": "div.policy-tags:first", | ||
| + "t": 'Policies are assigned multiple categories (called tags).' | ||
| + }, | ||
| + { | ||
| + "a": 215, | ||
| + "e": "div.interests", | ||
| + "t": 'Users filter policies by subscribing to tags that they find interesting.' | ||
| + }, | ||
| + { | ||
| + "a": 120, | ||
| + "e": "div.activation:last", | ||
| + "t": 'Policies can have an activation date.' | ||
| + }, | ||
| + { | ||
| + "a": 85, | ||
| + "d": 120, | ||
| + "e": "a.policy-title:first", | ||
| + "t": 'Click the policy title to view its summary page.' | ||
| + }, | ||
| +]; | ||
| + | ||
| +function nextTour() { | ||
| + $(tours[index].e).grumble({ | ||
| + text: tours[index].t, | ||
| + angle: tours[index].a, | ||
| + distance: tours[index].d, | ||
| + hideOnClick: true, | ||
| + onHide: function( grumble, button ) { | ||
| + index++; | ||
| + | ||
| + if( index < tours.length ) { | ||
| + nextTour(); | ||
| + } | ||
| + } | ||
| + }); | ||
| +} | ||
| + | ||
| +$(document).ready( function() { | ||
| + nextTour(); | ||
| +}); | ||
| +var index = 0; | ||
| +var tours = [ | ||
| + { | ||
| + "a": 85, | ||
| + "d": 120, | ||
| + "e": "a.policy-title:first", | ||
| + "t": 'Click the policy title to view its summary page.' | ||
| + }, | ||
| +]; | ||
| + | ||
| +function nextTour() { | ||
| + $(tours[index].e).grumble({ | ||
| + text: tours[index].t, | ||
| + angle: tours[index].a, | ||
| + distance: tours[index].d, | ||
| + hideOnClick: true, | ||
| + onHide: function( grumble, button ) { | ||
| + index++; | ||
| + | ||
| + if( index < tours.length ) { | ||
| + nextTour(); | ||
| + } | ||
| + } | ||
| + }); | ||
| +} | ||
| + | ||
| +$(document).ready( function() { | ||
| + nextTour(); | ||
| +}); | ||
| +<!DOCTYPE html> | ||
| +<html lang="en"> | ||
| +<head> | ||
| + <meta charset="utf-8"> | ||
| + <title>World Politics: A System for Rational, Moderated Debate</title> | ||
| + | ||
| + <link rel="stylesheet" media="screen" href="css/summary.css"> | ||
| + <link rel="stylesheet" media="screen" href="css/theme.css"> | ||
| + | ||
| + <link rel="stylesheet" media="screen" href="tour/tour.css" /> | ||
| + | ||
| + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| + <meta name="author" content="Dave Jarvis"> | ||
| + <meta name="description" content="A website for engaging the public about upcoming policies."> | ||
| + <meta name="robots" content="all"> | ||
| +</head> | ||
| +<body id="world-politics"> | ||
| + | ||
| +<div id="header"> | ||
| +</div> | ||
| + | ||
| +<div id="main" class="main"> | ||
| + <div class="policy-header"> | ||
| + <h1 id="policy-title" class="policy-title">Water Sustainability Act</h1> | ||
| + <div id="policy-vote-calc"> | ||
| + <div id="policy-vote-calc-pro" class="policy-vote-calc-pro"> | ||
| + 92.6% | ||
| + </div> | ||
| + <div id="policy-vote-calc-con" class="policy-vote-calc-con"> | ||
| + 7.4% | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| + | ||
| + <div id="policy-summary" class="policy-summary"> | ||
| + <div id="policy-overview" class="policy-overview"> | ||
| + <div id="policy-votes" class="policy-votes"> | ||
| + <div id="tally-vote-pro" class="tally-vote-pro"> | ||
| + 74,089 | ||
| + </div> | ||
| + <div id="tally-vote-con" class="tally-vote-con"> | ||
| + 5,911 | ||
| + </div> | ||
| + </div> | ||
| + <div id="policy-overview-text" class="policy-overview-text"> | ||
| +<p> | ||
| +We all need water – for drinking, washing, cooking, and growing food. Water supports every aspect of a healthy environment, a growing economy, and prosperous communities. | ||
| +</p> | ||
| +<p> | ||
| +While British Columbia has almost 300 unique watersheds (fish-bearing rivers, spectacular lakes, and exceptional wetlands), the water supply is finite. Under growing population pressures, a changing climate, and expanding development, we must ensure that fresh, clean water is sustainably managed – for today's needs and for future generations. | ||
| +</p> | ||
| +<p> | ||
| +The Water Sustainability Act replaces the existing <a href="http://www.bclaws.ca/Recon/document/ID/freeside/00_96483_01">Water Act</a>, to benefit communities, families, the environment, and our economy. | ||
| +</p> | ||
| + </div> | ||
| + <div class="policy-tags"> | ||
| + <div class="policy-tag">Act</div> | ||
| + <div class="policy-tag">BC</div> | ||
| + <div class="policy-tag">Environment</div> | ||
| + <div class="policy-tag">Water</div> | ||
| + </div> | ||
| + </div> | ||
| + <div id="policy-overview-links" class="policy-overview-links"> | ||
| + <div id="policy-proposals" class="policy-proposals"> | ||
| + <a href="http://engage.gov.bc.ca/watersustainabilityact/files/2013/10/WSA_overview_web.pdf">Legislation Overview</a> | | ||
| + <a href="http://engage.gov.bc.ca/watersustainabilityact/files/2013/10/WSA_legislative-proposal_web-doc.pdf">Complete Legislation</a> | ||
| + </div> | ||
| + <div id="policy-feedback" class="policy-feedback"> | ||
| + <a href="discuss.html">discuss</a> | | ||
| + <a href="">share</a> | | ||
| + <a href="">edit</a> | | ||
| + <a href="">flag</a> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| +</div> | ||
| + | ||
| +<div id="footer"> | ||
| +</div> | ||
| + | ||
| +<script type="text/javascript" | ||
| + src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
| +<script type="text/javascript" src="tour/tour.js"></script> | ||
| +<script type="text/javascript" src="js/summary.js"></script> | ||
| +</body> | ||
| +</html> | ||
| + | ||
| +/** (c) 2011 James Cryer, Huddle (www.huddle.com) */ | ||
| +/** http://jamescryer.github.com/grumble.js/ */ | ||
| + | ||
| +(function($, window){ | ||
| + | ||
| + var defaults = { | ||
| + type: '', | ||
| + text: '', | ||
| + top: 0, | ||
| + left: 0, | ||
| + angle: 45, | ||
| + size: 50, | ||
| + distance: 50, | ||
| + template: '<div class="grumble" style="display:none;filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\')"> </div>', | ||
| + textTemplate: '<div class="grumble-text" style="display:none;"><div class="outer"><div class="inner">{text}</div></div></div>', | ||
| + context: null | ||
| + }; | ||
| + | ||
| + window.GrumbleBubble = function(options){ | ||
| + | ||
| + this.options = $.extend({},defaults,options); | ||
| + this.context = $(this.options.context || $('body')); | ||
| + this.css = {}; | ||
| + this.create(); | ||
| + }; | ||
| + | ||
| + window.GrumbleBubble.prototype = { | ||
| + | ||
| + create: function(){ | ||
| + var tmpl = window.GrumbleBubble.prototype.tmpl; | ||
| + this.bubble = $( tmpl(this.options.template) ); | ||
| + this.text = $( tmpl(this.options.textTemplate, { text:this.options.text })); | ||
| + this.prepare(); | ||
| + }, | ||
| + | ||
| + /* | ||
| + the rotation is adjusted because the background image defaults to what would look like 45 degrees | ||
| + I dont like this, the code should be agnostic of the image and style | ||
| + */ | ||
| + setBubbleRotation: function(){ | ||
| + this.rotateDeg = this.options.angle - 45; | ||
| + if( this.rotateDeg < 0 ){ | ||
| + this.rotateDeg += 360; | ||
| + } | ||
| + }, | ||
| + | ||
| + prepare: function(){ | ||
| + var isAlreadyInserted = this.bubble.get(0).parentNode; | ||
| + | ||
| + this.setBubbleRotation(); | ||
| + | ||
| + this.applyStyles(); | ||
| + | ||
| + if( isAlreadyInserted !== this.context){ | ||
| + this.append(); | ||
| + } | ||
| + | ||
| + this.rotate(); | ||
| + }, | ||
| + | ||
| + applyStyles: function(){ | ||
| + | ||
| + this.setPosition(); | ||
| + | ||
| + this.css.width = this.options.size; | ||
| + this.css.height = this.options.size; | ||
| + | ||
| + this.text | ||
| + .css(this.css) | ||
| + .addClass('grumble-text'+this.options.size); | ||
| + | ||
| + this.bubble | ||
| + .css(this.css) | ||
| + .addClass(this.options.type+'grumble'+this.options.size); | ||
| + | ||
| + // remember calculated position for use by external components | ||
| + this.realLeft = this.css.left; | ||
| + this.realTop = this.css.top; | ||
| + }, | ||
| + | ||
| + setPosition: function(){ | ||
| + var ratio = this.options.angle/-360, | ||
| + xRadius = Math.cos(ratio*2*Math.PI), | ||
| + yRadius = Math.sin(ratio*2*Math.PI), | ||
| + halfSize = this.options.size/2, | ||
| + sizeSquared = this.options.size*this.options.size, | ||
| + halfedHypotenuse = Math.sqrt(sizeSquared + sizeSquared)/2, | ||
| + top = (this.options.top+halfSize) - xRadius * (this.options.distance + halfedHypotenuse), | ||
| + left = (this.options.left-halfSize) - yRadius * (this.options.distance + halfedHypotenuse); | ||
| + | ||
| + this.css.top = top - this.options.size; | ||
| + this.css.left = left; | ||
| + }, | ||
| + | ||
| + append: function(){ | ||
| + var body = this.context; | ||
| + this.bubble.appendTo(body); | ||
| + this.text.appendTo(body); | ||
| + }, | ||
| + | ||
| + rotate: function(){ | ||
| + if(navigator.appName === 'Microsoft Internet Explorer' && window.document.documentMode < 10){ | ||
| + this.ieRotate(); | ||
| + } else { | ||
| + this.cssRotate(); | ||
| + } | ||
| + }, | ||
| + | ||
| + cssRotate: function(){ | ||
| + this.bubble.css({ | ||
| + '-moz-transform': 'rotate('+this.rotateDeg+'deg)', | ||
| + '-webkit-transform': 'rotate('+this.rotateDeg+'deg)', | ||
| + '-o-transform': 'rotate('+this.rotateDeg+'deg)', | ||
| + 'transform': 'rotate('+this.rotateDeg+'deg)' | ||
| + }); | ||
| + }, | ||
| + | ||
| + ieRotate: function(){ | ||
| + var deg = this.rotateDeg, | ||
| + deg2radians = Math.PI * 2 / 360, | ||
| + rad = deg * deg2radians, | ||
| + costheta = Math.cos(rad), | ||
| + sintheta = Math.sin(rad), | ||
| + element = this.bubble.get(0), | ||
| + width, height; | ||
| + | ||
| + // use Matrix filter | ||
| + element.filters.item(0).M11 = costheta; | ||
| + element.filters.item(0).M12 = -sintheta; | ||
| + element.filters.item(0).M21 = sintheta; | ||
| + element.filters.item(0).M22 = costheta; | ||
| + | ||
| + width = this.bubble.width(); | ||
| + height = this.bubble.height(); | ||
| + | ||
| + // adjust position, IE rotates from center but also increases the width and height | ||
| + this.bubble.css({ | ||
| + left: this.css.left - ((width - this.options.size)/2), | ||
| + top: this.css.top - ((height - this.options.size)/2) | ||
| + }); | ||
| + }, | ||
| + | ||
| + adjust: function(options){ | ||
| + $.extend(this.options,options); | ||
| + this.prepare(); | ||
| + }, | ||
| + | ||
| + tmpl: function(template, obj, escapeContent) { | ||
| + for (var key in obj) { | ||
| + if (obj[key] === null) obj[key] = ''; | ||
| + if (typeof (obj[key]) === 'object' && obj[key].length) { obj[key] = obj[key].join(', '); } | ||
| + template = template.replace(new RegExp('{' + key + '}', 'g'), escapeContent ? escape(obj[key]) : obj[key]); | ||
| + } | ||
| + return template; | ||
| + } | ||
| + | ||
| + }; | ||
| +}($, window)); | ||
| +/** (c) 2011 James Cryer, Huddle (www.huddle.com) */ | ||
| +/** http://jamescryer.github.com/grumble.js/ */ | ||
| + | ||
| +.grumble{ | ||
| + position:absolute; | ||
| + background-image: url(bubble-sprite.png); | ||
| + background-repeat: no-repeat; | ||
| + z-index: 99999; | ||
| + } | ||
| + | ||
| + .grumble-text { | ||
| + position:absolute; | ||
| + text-align:center; | ||
| + z-index: 99999; | ||
| + display: table; | ||
| + overflow:hidden; | ||
| + /*text-transform:uppercase;*/ | ||
| + font-size: 14px; | ||
| + line-height: 14px; | ||
| + } | ||
| + .ie7 .grumble-text, | ||
| + .ie6 .grumble-text { | ||
| + display:block; | ||
| + } | ||
| + .grumble-text .outer { | ||
| + display: table-cell; | ||
| + vertical-align: middle; | ||
| + color:white; | ||
| + } | ||
| + .ie7 .grumble-text .outer, | ||
| + .ie6 .grumble-text .outer { | ||
| + display: block; | ||
| + width: 85%; | ||
| + position: absolute; | ||
| + top: 48%; | ||
| + left: 0; | ||
| + } | ||
| + .ie7 .inner, | ||
| + .ie6 .inner { | ||
| + position: relative; | ||
| + top: -50% | ||
| + } | ||
| + | ||
| + .grumble-text50 .outer{padding:6px;} | ||
| + .grumble-text100 .outer{padding:8px;} | ||
| + .grumble-text150 .outer{padding:10px;} | ||
| + .grumble-text200 .outer{padding:12px;} | ||
| + | ||
| + .grumble50 {background-position: 0 0;} | ||
| + .grumble100 {background-position: 0 -50px; } | ||
| + .grumble150 {background-position: 0 -150px;} | ||
| + .grumble200 {background-position: 0 -300px; } | ||
| + | ||
| + .alt-grumble50 {background-position: -200px 0;} | ||
| + .alt-grumble100 { background-position: -200px -50px; } | ||
| + .alt-grumble150 {background-position: -200px -150px;} | ||
| + .alt-grumble200 {background-position: -200px -300px; } | ||
| + | ||
| + .grumble-button { | ||
| + position: absolute; | ||
| + width: 20px; | ||
| + height: 12px; | ||
| + | ||
| + -moz-border-radius: 3px; | ||
| + border-radius: 3px; | ||
| + | ||
| + background: #FF5C00; | ||
| + color: #fff; | ||
| + text-align:center; | ||
| + font-size: .8em; | ||
| + line-height: .9em; | ||
| + | ||
| + -moz-box-shadow: 1px 1px 1px #ccc; | ||
| + -webkit-box-shadow: 1px 1px 1px #ccc; | ||
| + box-shadow: 1px 1px 1px #ccc; | ||
| + | ||
| + cursor: pointer; | ||
| + | ||
| + z-index: 99999; | ||
| + } | ||
| +(function(a,k){var m={type:"",text:"",top:0,left:0,angle:45,size:50,distance:50,template:'<div class="grumble" style="display:none;filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\')"> </div>',textTemplate:'<div class="grumble-text" style="display:none;"><div class="outer"><div class="inner">{text}</div></div></div>',context:null};k.GrumbleBubble=function(d){this.options=a.extend({},m,d);this.context=a(this.options.context||a("body"));this.css={};this.create()};k.GrumbleBubble.prototype= | ||
| +{create:function(){var d=k.GrumbleBubble.prototype.tmpl;this.bubble=a(d(this.options.template));this.text=a(d(this.options.textTemplate,{text:this.options.text}));this.prepare()},setBubbleRotation:function(){this.rotateDeg=this.options.angle-45;this.rotateDeg<0&&(this.rotateDeg+=360)},prepare:function(){var d=this.bubble.get(0).parentNode;this.setBubbleRotation();this.applyStyles();d!==this.context&&this.append();this.rotate()},applyStyles:function(){this.setPosition();this.css.width=this.options.size; | ||
| +this.css.height=this.options.size;this.text.css(this.css).addClass("grumble-text"+this.options.size);this.bubble.css(this.css).addClass(this.options.type+"grumble"+this.options.size);this.realLeft=this.css.left;this.realTop=this.css.top},setPosition:function(){var d=this.options.angle/-360,a=this.options.size/2,j=this.options.size*this.options.size,j=Math.sqrt(j+j)/2,f=this.options.left-a-Math.sin(d*2*Math.PI)*(this.options.distance+j);this.css.top=this.options.top+a-Math.cos(d*2*Math.PI)*(this.options.distance+ | ||
| +j)-this.options.size;this.css.left=f},append:function(){var d=this.context;this.bubble.appendTo(d);this.text.appendTo(d)},rotate:function(){navigator.appName==="Microsoft Internet Explorer"&&k.document.documentMode<10?this.ieRotate():this.cssRotate()},cssRotate:function(){this.bubble.css({"-moz-transform":"rotate("+this.rotateDeg+"deg)","-webkit-transform":"rotate("+this.rotateDeg+"deg)","-o-transform":"rotate("+this.rotateDeg+"deg)",transform:"rotate("+this.rotateDeg+"deg)"})},ieRotate:function(){var d= | ||
| +this.rotateDeg*(Math.PI*2/360),a=Math.cos(d),d=Math.sin(d),j=this.bubble.get(0);j.filters.item(0).M11=a;j.filters.item(0).M12=-d;j.filters.item(0).M21=d;j.filters.item(0).M22=a;a=this.bubble.width();d=this.bubble.height();this.bubble.css({left:this.css.left-(a-this.options.size)/2,top:this.css.top-(d-this.options.size)/2})},adjust:function(d){a.extend(this.options,d);this.prepare()},tmpl:function(a,h,j){for(var f in h)h[f]===null&&(h[f]=""),typeof h[f]==="object"&&h[f].length&&(h[f]=h[f].join(", ")), | ||
| +a=a.replace(RegExp("{"+f+"}","g"),j?escape(h[f]):h[f]);return a}}})($,window);(function(a,k){function m(a,d){var g,c;d?(c=Number(a.css("margin-top").replace("px",""))||0,g=a.position(),g.top+=c+d.scrollTop()+a.height()):(g=a.offset(),g.top+=a.height());g.left+=a.width()/2;return g}function d(f,h,g){var c=a('<div style="position:absolute;visibility:hidden;width:'+f+'px;">'+g+"</div>").appendTo(a(document.body)),j=c.outerHeight()*2+f*0.2,b=a.inArray(f,h);c.remove();return j>=f&&h[++b]?d(h[b],h,g):f}var h=[],j=navigator.appName==="Microsoft Internet Explorer"&&window.document.documentMode< | ||
| +10;a.fn.grumble=function(f,p){return typeof f==="string"?(this.trigger({type:f+".bubble",adjustments:p}),this):this.each(function(){var g=a(this),c=a.extend({},a.fn.grumble.defaults,f,g.data("grumble")||{}),l=d(c.size,c.sizeRange,c.text),b,e,i,o,n;c.useRelativePositioning&&(n=g.offsetParent());o=m(g,n);c.top=o.top;c.left=o.left;if(a.data(this,"hazGrumble"))return g.grumble("adjust",f),g.grumble("show"),!0;else a.data(this,"hazGrumble",!0);i={init:function(){b=new k({text:c.text,top:c.top,left:c.left, | ||
| +angle:c.angle,size:l,distance:c.distance,type:c.type,context:n});c.hasHideButton&&this.addButton();h.push({grumble:b,button:e,onHide:function(){i.isVisible=!1;a(document.body).unbind("click.bubble");i.doOnBeginHideCallback();i.doOnHideCallback()}});this.showBubble();this.prepareEvents()},addButton:function(){var q=k.prototype.tmpl;e=a(q(c.buttonTemplate,{hideText:c.buttonHideText})).css({left:b.realLeft+l-10,top:b.realTop+l-10}).insertAfter(b.text)},rePositionButton:function(){e&&e.css({left:b.realLeft+ | ||
| +l-10,top:b.realTop+l-10})},createFxQueue:function(){b.bubble.queue("fx");b.text.queue("fx");b.bubble.delay(c.showAfter);b.text.delay(c.showAfter);e&&e.delay(c.showAfter)},showBubble:function(){i.isVisible!=!0&&(c.showAfter&&i.createFxQueue(),j?(b.bubble.queue("fx",function(a){b.bubble.show();a()}),b.text.queue("fx",function(a){b.text.show();a()}),e&&e.queue("fx",function(a){e.show();a()})):(b.bubble.fadeTo("fast",1),b.text.fadeTo("fast",1),e&&e.fadeTo("fast",1)),b.bubble.queue("fx",function(a){i.isVisible= | ||
| +!0;(c.hideOnClick||c.hasHideButton)&&i.hideOnClick();i.doOnShowCallback();a()}),c.hideAfter&&i.hideBubble())},hideBubble:function(){b.bubble.delay(c.hideAfter);b.text.delay(c.hideAfter);b.bubble.queue("fx",function(a){i.doOnBeginHideCallback();a()});j?(b.bubble.queue("fx",function(a){b.bubble.hide();a()}),b.bubble.queue("fx",function(a){b.text.hide();a()}),e&&e.queue("fx",function(a){e.hide();a()})):(b.bubble.fadeOut(),b.text.fadeOut(),e&&e.fadeOut());b.bubble.queue("fx",function(a){i.isVisible=!1; | ||
| +i.doOnHideCallback();a()})},doOnBeginHideCallback:function(){c.onBeginHide(b,e)},doOnHideCallback:function(){c.onHide(b,e)},doOnShowCallback:function(){c.onShow(b,e)},hideOnClick:function(){setTimeout(function(){var c=function(){i.hideBubble(b,e);a(document.body).unbind("click.bubble",c)};a(document.body).bind("click.bubble",c)},1E3)},prepareEvents:function(){a(window).bind("resize.bubble",function(){var a;a=m(g,n);b.adjust({top:a.top,left:a.left});i.rePositionButton()});g.bind("hide.bubble",function(){i.hideBubble(b, | ||
| +e)});g.bind("adjust.bubble",function(a){a.adjustments&&typeof a.adjustments==="object"&&b.adjust(a.adjustments)});g.bind("show.bubble",function(){i.showBubble(b,e)});g.bind("delete.bubble",function(){b.bubble.hide().remove();b.text.hide().remove();e&&e.hide().remove();for(var a=h.length,c=0;c<a;c++)if(b===h[c].grumble){h.splice(c,1);break}g.removeData("hazGrumble")})}};i.init()})};a.fn.grumble.defaults={text:"",angle:45,size:50,sizeRange:[50,100,150,200],distance:0,type:"",useRelativePositioning:!1, | ||
| +showAfter:0,hideAfter:!1,hideOnClick:!1,hasHideButton:!1,buttonTemplate:'<div class="grumble-button" style="display:none" title="{hideText}">x</div>',buttonHideText:"Hide",onHide:function(){},onShow:function(){},onBeginHide:function(){}};a(document).bind("keyup.bubble",function(d){d.keyCode===27&&a.each(h,function(a,d){d.grumble.bubble.clearQueue().hide();d.grumble.text.clearQueue().hide();d.button&&d.button.clearQueue().hide();d.onHide()})})})(jQuery,GrumbleBubble); | ||
| Author | Dave Jarvis <email> |
|---|---|
| Date | 2013-11-09 12:20:48 GMT-0800 |
| Commit | dcc32ba51ab2131b32ca5c265027e154f9764947 |
| Delta | 791 lines added, 0 lines removed, 791-line increase |