Browse files

added a toggle info panel for bucket theme

added basic abiltity to change color scheme in bucket theme
  • Loading branch information...
1 parent f8e5de3 commit e0a468810218fb335e9f06e56e4d376b52957764 @sconnelley sconnelley committed Oct 24, 2011
View
57 www/embed/bucket/css/screen.css
@@ -131,11 +131,11 @@ h1 a {
box-shadow: 0 0 2px #333;
}
-#mm_tip #mm_tip_title{text-align: left;margin:0;font-weight:600;padding:10px 10px 10px;font-size:16px;}
+#mm_tip #mm_tip_title{text-align: left;margin:0;font-weight:600;padding:10px 10px 0px;font-size:16px;}
#mm_tip #mm_tip_desc {
margin: 0;
- padding: 0 10px 10px;
+ padding: 10px 10px 10px;
text-align: left;
font-size:12px;
font-weight:200;
@@ -177,18 +177,19 @@ h1 a {
position:relative;
border-bottom: 1px solid #ccc;
}
- #menu_wrapper h5 span{
+ #menu_wrapper h5 span#menu_wrapper_toggle{
text-transform:none;
- position:absolute;
- right:10px;
- top:5px;
+ position:relative;
+ /*right:10px;*/
+ top:-1px;
font-size: 10px;
+ padding-left:10px;
}
- #menu_wrapper h5 span a{
+ #menu_wrapper h5 span#menu_wrapper_toggle a{
color:#356A94;
text-decoration:none;
}
- #menu_wrapper h5 span a:hover{
+ #menu_wrapper h5 span#menu_wrapper_toggle a:hover{
text-decoration:underline;
}
li.altrow{
@@ -267,4 +268,44 @@ li.altrow{
#tiptip_content{
line-height:16px;
background:#356A94 !important;
+ }
+/**/
+#info_panel{
+ position:absolute;
+ top: 0;
+ right: 0;
+ background: #DCE8EF;
+ background: rgba(220,232,239,.8);
+ width: 50%;
+ height: auto;
+ z-index: 2001;
+ padding:5px;
+ display:none;
+}
+ #info_panel p{
+ margin: 0;
+ padding: 0px;
+ font-size: 1.15em;
+ font-weight: bold;
+ float: left;
+ width: 93%;
+ }
+ #info_panel a{
+ display:block;
+ float:left;
+ cursor: pointer;
+ text-decoration:none;
+ }
+
+ #info_panel a span{
+ position:relative;
+ padding:0 10px 0 4px;
+
+ top: 40%;
+ font-size: 1.5em;
+ color: red;
+
+ }
+ #info_panel a:hover span{
+ color:#000;
}
View
174 www/embed/bucket/default.js
@@ -23,18 +23,14 @@ $(function() {
try{
mdict = {};
backdict = {};
- colors = d3.scale.category10();
-
- // see colorbrewer.js for more info
- //colors = d3.scale.ordinal().range(colorbrewer.Spectral[9]);
$("#map").css("height","100%");
var mm = com.modestmaps,
ds_tooltip = null;
-
-
+
params = parseQueryString(location.search);
+
if (!params.baseURL) params.baseURL = baseURL;
if(params.provider)params.base = params.provider;
@@ -57,6 +53,9 @@ $(function() {
}
var pos = ($("#title").length > 0) ? $("#title").innerHeight() : 0;
$("#menu_wrapper").css("top",pos+"px");
+ if(bucketColumn){
+ $("#menu_wrapper_title").html(bucketColumn);
+ }
}else{
$("#menu_wrapper").remove();
}
@@ -83,7 +82,12 @@ $(function() {
//pot.map.setZoom(pot.map.getZoom());
}
-
+ var rollover_tmpl,
+ useTemplate=false,
+ infoPanelText = null,
+ bucketPrep = {},
+ bucketCount = 0,
+ bucketList = [];
pot.makeDot = function(feature) {
normalizeFeature(feature);
var props = feature.properties,
@@ -94,6 +98,22 @@ $(function() {
props.__active = true;
var coords = geom[0]['coordinates'];
var pid = "dot_"+props.id;
+
+ if(feature.properties.__rollover_message){
+ useTemplate = true;
+ if(!rollover_tmpl){
+ rollover_tmpl = "<span>"+feature.properties.__rollover_message+"</span>";
+ $.template( "rollover_tmpl", rollover_tmpl );
+ }
+ props.tipMessage = $.tmpl( "<span>"+feature.properties.__rollover_message+"</span>",props);
+ }else if(rollover_tmpl){
+ props.tipMessage = $.tmpl( "rollover_tmpl",props);
+ }
+
+ if(!infoPanelText){
+ if(feature.properties.__description_panel && feature.properties.__description_panel.length > 1) infoPanelText = feature.properties.__description_panel;
+ }
+
var more_front = {
style: over_style,
id:pid,
@@ -115,23 +135,54 @@ $(function() {
var marker = more_front;
// Dots.Potting class only takes one marker,
- // will manually add this one, for now, until I write a Kirby Dot markerLayer
- var c = pot.dotsLayer.addMarker(more_back,loc);
- c.toBack();
- backdict[pid] = c;
-
- if (typeSelector) {
- var label = typeSelector.addLabel(props);
+ // will manually add this one, for now, until a Kirby Dot markerLayer exsists
+ var c = pot.dotsLayer.addMarker(more_back,loc);
+ c.toBack();
+ backdict[pid] = c;
+
+ if(!bucketPrep[bucket_type]){
+ bucketCount++;
+ bucketPrep[bucket_type] = props;
}
+ bucketList.push(props);
+
return marker;
};
-
+
+ var infoPanelContentElm,infoPanelElm,infoPanelCloseElm,infoPanelCloseTxtElm;
//load markers and do things when done
var req = pot.load(null,function(){
+ // create tooltip
+ // pass it the selector to listen for...
+ // pulls rest of params from pot object
+ // uses jQuery live
+ ds_tooltip = new DotToolTip(".dott",useTemplate);
+
if (typeSelector) {
- typeSelector.selectorComplete();
+ if(params.cs && colorbrewer){
+ if(colorbrewer[params.cs]){
+ if(bucketCount <= 3){
+ colors = d3.scale.ordinal().range(colorbrewer[params.cs][3]);
+ }else if(bucketCount >= 9){
+ colors = d3.scale.ordinal().range(colorbrewer[params.cs][9]);
+ }else{
+ colors = d3.scale.ordinal().range(colorbrewer[params.cs][bucketCount]);
+ }
+ }
+ }
+ if(!colors)colors = d3.scale.category10();
+
+ for(i=0;i<bucketList.length;i++){
+ var label = typeSelector.addLabel(bucketList[i]);
+ }
+ bucketPrep = {};
+ bucketList = [];
+
+
+ typeSelector.selectorComplete();
+
var markers = pot.dotsLayer.markers,
len = markers.length,
co = typeSelector.colorScheme;
@@ -147,16 +198,59 @@ $(function() {
}
+
+ if(infoPanelText){
+ infoPanelContentElm = $("#info_panel p"),
+ infoPanelElm = $("#info_panel"),
+ infoPanelCloseElm = $("#info_panel a"),
+ infoPanelCloseTxtElm = $("#info_panel a span");
+
+ var pos = ($("#title").length > 0) ? $("#title").innerHeight() : 0;
+
+ infoPanelElm.css("top",pos+"px").show();
+ infoPanelContentElm.html( infoPanelText );
+ infoPanelCloseElm.css("height",infoPanelElm.innerHeight() + "px");
+ var infopos = (infoPanelElm.length > 0) ? infoPanelElm.offset().top + infoPanelElm.innerHeight() + 20 : 0;
+
+ $("#menu_wrapper").css("top",infopos+"px");
+
+ infoPanelCloseElm.click(function(e){
+ e.preventDefault();
+ if(infoPanelContentElm.is(':visible')){
+ infoPanelContentElm.hide();
+ infoPanelCloseTxtElm.html("&laquo;");
+ infoPanelElm.css("width",$(this).innerWidth()+"px");
+ }else{
+ infoPanelContentElm.show();
+ infoPanelCloseTxtElm.html("&raquo;");
+ infoPanelElm.css("width","50%");
+ adjustPanelSizes();
+ }
+
+ });
+
+ $(window).resize(function(e){
+ adjustPanelSizes();
+ });
+
+ function adjustPanelSizes(){
+ infoPanelCloseElm.css("height", "auto");
+ var newsize = infoPanelElm.innerHeight() + "px";
+ infoPanelCloseElm.css("height", newsize);
+
+ infopos = (infoPanelElm.length > 0) ? infoPanelElm.offset().top + infoPanelElm.innerHeight() + 20 : 0;
+ $("#menu_wrapper").css("top",infopos+"px");
+ }
+ }else{
+ $("#info_panel").remove();
+ }
+
doCluster();
});
- // create tooltip
- // pass it the selector to listen for...
- // pulls rest of params from pot object
- // uses jQuery live
- ds_tooltip = new DotToolTip(".dott");
+
////////////////////////////
// ARE WE IN CONFIG MODE ////////////
@@ -575,7 +669,7 @@ MenuSelector.prototype = {
//////////////////////////
/////////////////////////
-function DotToolTip(selector) {
+function DotToolTip(selector,useTemplate) {
if(!pot){
console.log("Needs a dotspotting pot object....");
return;
@@ -593,6 +687,8 @@ function DotToolTip(selector) {
return;
}
+ if(useTemplate != null || useTemplate != undefined)this.useTemplate = useTemplate;
+
this.map = pot.map;
this.listenFrom = selector;
@@ -617,6 +713,7 @@ DotToolTip.prototype = {
tip_desc: null,
tip_sentence:null,
active:false,
+ useTemplate:false,
createTip: function(){
if(this.checkParams()){
@@ -676,21 +773,28 @@ DotToolTip.prototype = {
showTip: function(){
if(!this.currentProp)return;
- var _title = this.getTipTitle();
- var _desc = this.getTipDesc();
- if(!_title.length && !_desc.length)return;
- if(_title){
- this.tt_title.css("display","block");
- this.tt_title.html(_title);
- }else{
- this.tt_title.css("display","none");
- }
- if(_desc){
+ if(this.currentProp.tipMessage){
this.tt_desc.css("display","block");
- this.tt_desc.html(_desc);
+ this.tt_desc.html(this.currentProp.tipMessage);
+ this.tt_title.css("display","none");
}else{
- this.tt_desc.css("display","none");
+ var _title = this.getTipTitle();
+ var _desc = this.getTipDesc();
+ if(!_title.length && !_desc.length)return;
+ if(_title){
+ this.tt_title.css("display","block");
+ this.tt_title.html(_title);
+ }else{
+ this.tt_title.css("display","none");
+ }
+ if(_desc){
+ this.tt_desc.css("display","block");
+ this.tt_desc.html(_desc);
+ }else{
+ this.tt_desc.css("display","none");
+ }
}
+
dotAddClass(this.currentDot,"over_hover");
this.initialTipPosition();
@@ -729,6 +833,7 @@ DotToolTip.prototype = {
},
updateSize: function(){
+ this.container = this.container || $(pot.selectors.map);
this.cont_offset = this.container.offset();
this.cont_width = this.container.width();
this.cont_height = this.container.height();
@@ -756,6 +861,7 @@ DotToolTip.prototype = {
},
checkParams: function(){
+ if(this.useTemplate)return true;
// look for tooltip parameters
if(!params.tt && !params.tm){
isTip = false;
View
1 www/javascript/dots.potting.config.js
@@ -224,6 +224,7 @@ Dots.Config.prototype = {
});
$(".autoUpdate").change(function(e){
+ console.log(typeof(this));
e.preventDefault();
if(!that.isUpdating){
that.isUpdating = true;
View
52 www/templates/embed_themes/bucket/config_js.txt
@@ -1,3 +1,26 @@
+<script type="text/javascript" src="{$cfg.abs_root_url}embed/javascript/colorbrewer.js"></script>
+<style type="text/css">
+{literal}
+#dotpotting_extras{
+
+}
+#dotpotting_extras p{
+ padding:2px 0;
+ line-height:20px
+}
+
+#dotpotting_extras p span{
+ float:left;
+ display:block;
+}
+#dotpotting_extras p span.colors{
+ width:20px;height:20px;
+}
+#dotpotting_extras p span.colorName{
+ width:70px;
+}
+{/literal}
+</style>
{literal}
<script>
var ds_config;
@@ -20,11 +43,18 @@
'helper': 'Column to be used as the title for tooltip'
},
{
- 'label': 'Tooltip Message:',
+ 'label': 'Tooltip Msg:',
'type': 'select',
'id': 'tm',
'default': '',
'helper': 'Column to be used as the body for tooltip'
+ },
+ {
+ 'label': 'Color Scheme:',
+ 'type': 'text',
+ 'id': 'cs',
+ 'default': '',
+ 'helper': 'Copy name of scheme from list below'
}
];
@@ -61,6 +91,26 @@
$("#config_opt_bucket").append('<option value="'+_fields[f]+'">'+_fields[f]+'</option>');
}
}
+
+ // colors
+ var colordiv = $("#dotpotting_extras");
+ var colorList = $("<select/>");
+ if(colorbrewer){
+ for(var color in colorbrewer){
+ var colorRow = $("<p/>");
+
+ for(var i = 0;i<colorbrewer[color][3].length;i++){
+ var colorBlock = $("<span/>");
+ colorBlock.css("background-color",colorbrewer[color][3][i]).addClass("colors");
+ colorRow.append(colorBlock);
+ }
+ colorRow.prepend("<span class='colorName'>"+color+"</span>");
+ colorRow.addClass("clearfix");
+
+ colordiv.append(colorRow);
+ }
+ }
+ //colordiv.append(colorList);
});
View
3 www/templates/embed_themes/bucket/extras_detail.txt
@@ -0,0 +1,3 @@
+<h1>COLOR SCHEMES:</h1>
+<p>Copy the letter code of the color scheme you would like to use into the "Color Scheme" field above: <span style="font-size:small;color:#356A94;">Colors by <a style="font-size:small;color:#356A94;" href="http://colorbrewer.org/">Cynthia Brewer</a></p>
+<div id="dotpotting_extras"></div>
View
8 www/templates/embed_themes/bucket/map.txt
@@ -10,6 +10,7 @@
<link rel="stylesheet" href="{$cfg.abs_root_url}embed/css/tipTip.css">
<script type="text/javascript" src="{$cfg.abs_root_url}javascript/modernizr.js"></script>
<script type="text/javascript" src="{$cfg.abs_root_url}embed/javascript/jquery-1.5.min.js"></script>
+ <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="{$cfg.abs_root_url}embed/javascript/d3.min.js"></script>
<script type="text/javascript" src="{$cfg.abs_root_url}embed/javascript/modestmaps.js"></script>
<script type="text/javascript" src="{$cfg.abs_root_url}embed/javascript/modestmaps.markers.js"></script>
@@ -46,9 +47,14 @@
</div>
</div>
<div id="menu_wrapper">
- <h5>Categories <span><a href="" id="ct_show_all">Show All</a> | <a href="" id="ct_hide_all">Hide All</a></span></h5>
+ <h5><span id="menu_wrapper_title">Categories </span><span id="menu_wrapper_toggle"><a href="" id="ct_show_all">Show All</a> | <a href="" id="ct_hide_all">Hide All</a></span></h5>
<ul id="menu_types"></ul>
</div>
+ <div id="info_panel">
+ <a href=""><span>&raquo;</span></a>
+ <p></p>
+
+ </div>
<script type="text/javascript" src="{$cfg.abs_root_url}embed/bucket/default.js" defer="defer"></script>

0 comments on commit e0a4688

Please sign in to comment.