diabook-theme: add "Earth Layers"-box at right_side

This commit is contained in:
tommy tomson 2012-05-07 02:24:43 +02:00
parent 66b9b60792
commit 3d0a0b6abf
6 changed files with 269 additions and 24 deletions

View file

@ -8,6 +8,32 @@
</form> </form>
</div> </div>
<div id="mapcontrol" style="display:none;">
<form id="mapform" action="network" method="post" >
<span style="width: 500px;position: relative;float: right;right:20px;"><p>this ist still under development.
the idea is to provide a map with different layers(e.g. earth population, atomic power plants, wheat growing acreages, sunrise or what you want)
and markers(events, demos, friends, anything, that is intersting for you).
These layer and markers should be importable and deletable by the user.</p>
<p>help on this feature is very appreciated. i am not that good in js so it's a start, but needs tweaks and further dev.
just contact me, if you are intesrested in joining</p>
<p>http://localhost/friendica/profile/thomas</p>
<p>this is build with <b>mapquery</b> http://mapquery.org/ and
<b>openlayers</b>http://openlayers.org/</p>
</span>
<div id="map2" style="height:350px;width:350px;"></div>
<div id="mouseposition" style="width: 350px;"></div>
<div id="zoom">
zoom:<input type="text" id="mapzoom" value=""></input>
</div>
{{inc field_input.tpl with $field=$ELZoom}}{{endinc}}
{{inc field_input.tpl with $field=$ELPosX}}{{endinc}}
{{inc field_input.tpl with $field=$ELPosY}}{{endinc}}
<div class="settings-submit-wrapper">
<input id="mapsub" type="submit" value="$sub" class="settings-submit" name="diabook-settings-map-sub"></input>
</div>
</form>
</div>
<div id="pos_null" style="margin-bottom:-30px;"> <div id="pos_null" style="margin-bottom:-30px;">
</div> </div>
@ -17,6 +43,7 @@
{{ if $page }} {{ if $page }}
<div>$page</div> <div>$page</div>
{{ endif }} {{ endif }}
</div>
<div id="close_profiles"> <div id="close_profiles">
{{ if $comunity_profiles_title }} {{ if $comunity_profiles_title }}
@ -122,13 +149,6 @@ $nv.search
<div id="map" style="height:165px;width:165px;margin-left:3px;margin-top:3px;margin-bottom:1px;"> <div id="map" style="height:165px;width:165px;margin-left:3px;margin-top:3px;margin-bottom:1px;">
</div> </div>
<div style="font-size:9px;margin-left:3px;">Data CC-By-SA by <a href="http://openstreetmap.org/">OpenStreetMap</a></div> <div style="font-size:9px;margin-left:3px;">Data CC-By-SA by <a href="http://openstreetmap.org/">OpenStreetMap</a></div>
<div id="mapcontrol" style="display:none;">
<div id="map2" style="height:350px;width:350px;"></div>
<div id="mouseposition" style="width: 350px;"></div>
<div id="zoom"></div>
</div>
</div>
{{ endif }} {{ endif }}
</div> </div>
</div> </div>

View file

@ -14,8 +14,11 @@ function theme_content(&$a){
$resolution = get_pconfig(local_user(), 'diabook', 'resolution' ); $resolution = get_pconfig(local_user(), 'diabook', 'resolution' );
$color = get_pconfig(local_user(), 'diabook', 'color' ); $color = get_pconfig(local_user(), 'diabook', 'color' );
$TSearchTerm = get_pconfig(local_user(), 'diabook', 'TSearchTerm' ); $TSearchTerm = get_pconfig(local_user(), 'diabook', 'TSearchTerm' );
$ELZoom = get_pconfig(local_user(), 'diabook', 'ELZoom' );
$ELPosX = get_pconfig(local_user(), 'diabook', 'ELPosX' );
$ELPosY = get_pconfig(local_user(), 'diabook', 'ELPosY' );
return diabook_form($a,$font_size, $line_height, $resolution, $color, $TSearchTerm); return diabook_form($a,$font_size, $line_height, $resolution, $color, $TSearchTerm, $ELZoom, $ELPosX, $ELPosY);
} }
function theme_post(&$a){ function theme_post(&$a){
@ -28,6 +31,9 @@ function theme_post(&$a){
set_pconfig(local_user(), 'diabook', 'resolution', $_POST['diabook_resolution']); set_pconfig(local_user(), 'diabook', 'resolution', $_POST['diabook_resolution']);
set_pconfig(local_user(), 'diabook', 'color', $_POST['diabook_color']); set_pconfig(local_user(), 'diabook', 'color', $_POST['diabook_color']);
set_pconfig(local_user(), 'diabook', 'TSearchTerm', $_POST['diabook_TSearchTerm']); set_pconfig(local_user(), 'diabook', 'TSearchTerm', $_POST['diabook_TSearchTerm']);
set_pconfig(local_user(), 'diabook', 'ELZoom', $_POST['diabook_ELZoom']);
set_pconfig(local_user(), 'diabook', 'ELPosX', $_POST['diabook_ELPosX']);
set_pconfig(local_user(), 'diabook', 'ELPosY', $_POST['diabook_ELPosY']);
} }
} }
@ -38,8 +44,11 @@ function theme_admin(&$a){
$resolution = get_config('diabook', 'resolution' ); $resolution = get_config('diabook', 'resolution' );
$color = get_config('diabook', 'color' ); $color = get_config('diabook', 'color' );
$TSearchTerm = get_config('diabook', 'TSearchTerm' ); $TSearchTerm = get_config('diabook', 'TSearchTerm' );
$ELZoom = get_config('diabook', 'ELZoom' );
$ELPosX = get_config('diabook', 'ELPosX' );
$ELPosY = get_config('diabook', 'ELPosY' );
return diabook_form($a,$font_size, $line_height, $resolution, $color, $TSearchTerm); return diabook_form($a,$font_size, $line_height, $resolution, $color, $TSearchTerm, $ELZoom, $ELPosX, $ELPosY);
} }
function theme_admin_post(&$a){ function theme_admin_post(&$a){
@ -49,11 +58,14 @@ function theme_admin_post(&$a){
set_config('diabook', 'resolution', $_POST['diabook_resolution']); set_config('diabook', 'resolution', $_POST['diabook_resolution']);
set_config('diabook', 'color', $_POST['diabook_color']); set_config('diabook', 'color', $_POST['diabook_color']);
set_config('diabook', 'TSearchTerm', $_POST['diabook_TSearchTerm']); set_config('diabook', 'TSearchTerm', $_POST['diabook_TSearchTerm']);
set_config('diabook', 'ELZoom', $_POST['diabook_ELZoom']);
set_config('diabook', 'ELPosX', $_POST['diabook_ELPosX']);
set_config('diabook', 'ELPosY', $_POST['diabook_ELPosY']);
} }
} }
function diabook_form(&$a, $font_size, $line_height, $resolution, $color, $TSearchTerm){ function diabook_form(&$a, $font_size, $line_height, $resolution, $color, $TSearchTerm, $ELZoom, $ELPosX, $ELPosY){
$line_heights = array( $line_heights = array(
"1.3"=>"1.3", "1.3"=>"1.3",
"---"=>"---", "---"=>"---",
@ -100,6 +112,9 @@ function diabook_form(&$a, $font_size, $line_height, $resolution, $color, $TSear
'$resolution' => array('diabook_resolution', t('Set resolution for middle column'), $resolution, '', $resolutions), '$resolution' => array('diabook_resolution', t('Set resolution for middle column'), $resolution, '', $resolutions),
'$color' => array('diabook_color', t('Set color scheme'), $color, '', $colors), '$color' => array('diabook_color', t('Set color scheme'), $color, '', $colors),
'$TSearchTerm' => array('diabook_TSearchTerm', t('Set twitter search term'), $TSearchTerm, '', $TSearchTerm), '$TSearchTerm' => array('diabook_TSearchTerm', t('Set twitter search term'), $TSearchTerm, '', $TSearchTerm),
'$ELZoom' => array('diabook_ELZoom', t('Set zoomfactor for Earth Layer'), $ELZoom, '', $ELZoom),
'$ELPosX' => array('diabook_ELPosX', t('Set longitude (X) for Earth Layer'), $ELPosX, '', $ELPosX),
'$ELPosY' => array('diabook_ELPosY', t('Set latitude (Y) for Earth Layer'), $ELPosY, '', $ELPosY),
)); ));
return $o; return $o;
} }

View file

@ -0,0 +1,85 @@
/* Copyright (c) 2011 by MapQuery Contributors (see AUTHORS for
* full list of contributors). Published under the MIT license.
* See https://github.com/mapquery/mapquery/blob/master/LICENSE for the
* full text of the license. */
/**
#jquery.mapquery.mqZoomSlider.js
The file containing the mqZoomSlider Widget
### *$('selector')*.`mqZoomSlider([options])`
_version added 0.1_
####**Description**: create a widget to show a zoom slider
+ **options**:
- **map**: the mapquery instance
>Returns: widget
The mqZoomSlider widget allows us to display a vertical zoom slider.
$('#zoomslider').mqZoomSlider({
map: '#map'
});
*/
(function($) {
$.template('mqZoomSlider',
'<div class="mq-zoomslider ui-widget ui-helper-clearfix ">'+
'<div class="mq-zoomslider-slider"></div>'+
'</div>');
$.widget("mapQuery.mqZoomSlider", {
options: {
// The MapQuery instance
map: undefined
},
_create: function() {
var map;
var zoom;
var numzoomlevels;
var self = this;
var element = this.element;
//get the mapquery object
map = $(this.options.map).data('mapQuery');
$.tmpl('mqZoomSlider').appendTo(element);
numzoomlevels = map.options.numZoomLevels;
$(".mq-zoomslider-slider", element).slider({
max: numzoomlevels,
min:2,
orientation: 'vertical',
step: 1,
value: numzoomlevels - map.center().zoom,
slide: function(event, ui) {
map.center({zoom:numzoomlevels-ui.value});
},
change: function(event, ui) {
map.center({zoom:numzoomlevels-ui.value});
}
});
map.bind("zoomend",
{widget:self,map:map,control:element},
self._onZoomEnd);
},
_destroy: function() {
this.element.removeClass(' ui-widget ui-helper-clearfix ' +
'ui-corner-all')
.empty();
},
_zoomEnd: function (element,map) {
var slider = element.find('.mq-zoomslider-slider');
slider.slider('value',map.options.numZoomLevels-map.center().zoom);
},
_onZoomEnd: function(evt) {
evt.data.widget._zoomEnd(evt.data.control,evt.data.map);
}
});
})(jQuery);

View file

@ -0,0 +1,84 @@
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.6
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);

View file

@ -3,7 +3,7 @@
/* /*
* Name: Diabook * Name: Diabook
* Description: Diabook: report bugs and request here: http://pad.toktan.org/p/diabook or contact me : thomas_bierey@friendica.eu * Description: Diabook: report bugs and request here: http://pad.toktan.org/p/diabook or contact me : thomas_bierey@friendica.eu
* Version: (Version: 1.025) * Version: (Version: 1.026)
* Author: * Author:
*/ */
@ -13,7 +13,7 @@ $a = get_app();
function diabook_init(&$a) { function diabook_init(&$a) {
//print diabook-version for debugging //print diabook-version for debugging
$diabook_version = "Diabook (Version: 1.025)"; $diabook_version = "Diabook (Version: 1.026)";
$a->page['htmlhead'] .= sprintf('<META NAME="theme" CONTENT="%s"/>', $diabook_version); $a->page['htmlhead'] .= sprintf('<META NAME="theme" CONTENT="%s"/>', $diabook_version);
//change css on network and profilepages //change css on network and profilepages
@ -114,7 +114,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS); $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
//load jquery.ui.js //load jquery.ui.js
if($ccCookie != "9") { if($ccCookie != "10") {
$jqueryuiJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery-ui-1.8.20.custom.min.js"; $jqueryuiJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery-ui-1.8.20.custom.min.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $jqueryuiJS); $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $jqueryuiJS);
} }
@ -126,7 +126,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
} }
//load jquery.mapquery.js //load jquery.mapquery.js
$_COOKIE['close_mapquery'] = "1";
if($_COOKIE['close_mapquery'] != "1") { if($_COOKIE['close_mapquery'] != "1") {
$mqtmplJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.tmpl.js"; $mqtmplJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.tmpl.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqtmplJS); $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqtmplJS);
@ -136,8 +136,8 @@ if ($color=="dark") $color_path = "/diabook-dark/";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $openlayersJS); $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $openlayersJS);
$mqmouseposJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.mqMousePosition.js"; $mqmouseposJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.mqMousePosition.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqmouseposJS); $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqmouseposJS);
$mqzoomsliderJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js"; $mousewheelJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mousewheel.js";
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqzoomsliderJS); $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mousewheelJS);
} }
@ -156,8 +156,23 @@ if ($color=="dark") $color_path = "/diabook-dark/";
}); });
</script>'; </script>';
//check if mapquerybox is active and print //check if mapquerybox is active and print
$_COOKIE['close_mapquery'] = "1";
if($_COOKIE['close_mapquery'] != "1") { if($_COOKIE['close_mapquery'] != "1") {
$ELZoom=false;
$ELPosX=false;
$ELPosy=false;
$site_ELZoom = get_config("diabook", "ELZoom" );
$site_ELPosX = get_config("diabook", "ELPosX" );
$site_ELPosY = get_config("diabook", "ELPosY" );
$ELZoom = get_pconfig(local_user(), "diabook", "ELZoom");
$ELPosX = get_pconfig(local_user(), "diabook", "ELPosX");
$ELPosY = get_pconfig(local_user(), "diabook", "ELPosY");
if ($ELZoom===false) $ELZoom=$site_ELZoom;
if ($ELPosX===false) $ELPosX=$site_ELPosX;
if ($ELPosY===false) $ELPosY=$site_ELPosY;
if ($ELZoom===false) $ELZoom="0";
if ($ELPosX===false) $ELPosX="0";
if ($ELPosY===false) $ELPosY="0";
$a->page['htmlhead'] .= ' $a->page['htmlhead'] .= '
<script> <script>
@ -166,7 +181,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
layers:[{ //add layers to your map; you need to define at least one to be able to see anything on the map layers:[{ //add layers to your map; you need to define at least one to be able to see anything on the map
type:"osm" //add a layer of the type osm (OpenStreetMap) type:"osm" //add a layer of the type osm (OpenStreetMap)
}], }],
center:({zoom:8,position:[11.7,52.2]}), center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']}),
}); });
}); });
@ -174,7 +189,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
function open_mapcontrol() { function open_mapcontrol() {
$("div#mapcontrol").attr("style","display: block;width:900px;height:600px;"); $("div#mapcontrol").attr("style","display: block;width:900px;height:600px;");
$("#map2").mapQuery({layers:[{type:"osm"}], $("#map2").mapQuery({layers:[{type:"osm"}],
center:({zoom:8,position:[11.7,52.2]})}); center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']})});
$("#mouseposition").mqMousePosition({ $("#mouseposition").mqMousePosition({
map: "#map2", map: "#map2",
@ -185,9 +200,14 @@ if ($color=="dark") $color_path = "/diabook-dark/";
map = $("#map2").mapQuery().data("mapQuery"); map = $("#map2").mapQuery().data("mapQuery");
alert(map.center().zoom); textarea = document.getElementById("mapzoom");
$("#map2").bind("mousewheel", function(event, delta) {
if (delta > 0 || delta < 0){
textarea.value = map.center().zoom; }
});
}; };
</script>'; </script>';
} }
@ -265,7 +285,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
}); });
</script>'; </script>';
if($ccCookie != "9") { if($ccCookie != "10") {
$a->page['htmlhead'] .= ' $a->page['htmlhead'] .= '
<script> <script>
$("right_aside").ready(function(){ $("right_aside").ready(function(){
@ -576,11 +596,26 @@ if ($color=="dark") $color_path = "/diabook-dark/";
//END Community Page //END Community Page
//mapquery //mapquery
$_COOKIE['close_mapquery'] = "1";
if($_COOKIE['close_mapquery'] != "1") { if($_COOKIE['close_mapquery'] != "1") {
$mapquery = array(); $mapquery = array();
$mapquery['title'] = Array("", "<a id='mapcontrol-link' href='#mapcontrol' style='text-decoration:none;' onclick='open_mapcontrol(); return false;'>".t('Earth View')."</a>", "", ""); $mapquery['title'] = Array("", "<a id='mapcontrol-link' href='#mapcontrol' style='text-decoration:none;' onclick='open_mapcontrol(); return false;'>".t('Earth Layers')."</a>", "", "");
$aside['$mapquery'] = $mapquery; $aside['$mapquery'] = $mapquery;
$ELZoom = get_pconfig(local_user(), 'diabook', 'ELZoom' );
$ELPosX = get_pconfig(local_user(), 'diabook', 'ELPosX' );
$ELPosY = get_pconfig(local_user(), 'diabook', 'ELPosY' );
$aside['$sub'] = t('Submit');
$aside['$ELZoom'] = array('diabook_ELZoom', t('Set zoomfactor for Earth Layer'), $ELZoom, '', $ELZoom);
$aside['$ELPosX'] = array('diabook_ELPosX', t('Set longitude (X) for Earth Layer'), $ELPosX, '', $ELPosX);
$aside['$ELPosY'] = array('diabook_ELPosY', t('Set latitude (Y) for Earth Layer'), $ELPosY, '', $ELPosY);
$baseurl = $a->get_baseurl($ssl_state);
$aside['$baseurl'] = $baseurl;
if (isset($_POST['diabook-settings-map-sub']) && $_POST['diabook-settings-map-sub']!=''){
set_pconfig(local_user(), 'diabook', 'ELZoom', $_POST['diabook_ELZoom']);
set_pconfig(local_user(), 'diabook', 'ELPosX', $_POST['diabook_ELPosX']);
set_pconfig(local_user(), 'diabook', 'ELPosY', $_POST['diabook_ELPosY']);
header("Location: network");
}
} }
//end mapquery //end mapquery

View file

@ -8,6 +8,12 @@
{{inc field_input.tpl with $field=$TSearchTerm}}{{endinc}} {{inc field_input.tpl with $field=$TSearchTerm}}{{endinc}}
{{inc field_input.tpl with $field=$ELPosX}}{{endinc}}
{{inc field_input.tpl with $field=$ELPosY}}{{endinc}}
{{inc field_input.tpl with $field=$ELZoom}}{{endinc}}
<div class="field select"> <div class="field select">
<a onClick="restore_boxes()" title="Restore right-hand column" style="cursor: pointer;">Restore right-hand column</a> <a onClick="restore_boxes()" title="Restore right-hand column" style="cursor: pointer;">Restore right-hand column</a>
</div> </div>