diabook-theme: add "Earth Layers"-box at right_side
This commit is contained in:
tommy tomson
parent
66b9b60792
commit
3d0a0b6abf
|
|
@ -8,6 +8,32 @@
|
|||
</form>
|
||||
</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>
|
||||
|
||||
|
|
@ -17,6 +43,7 @@
|
|||
{{ if $page }}
|
||||
<div>$page</div>
|
||||
{{ endif }}
|
||||
</div>
|
||||
|
||||
<div id="close_profiles">
|
||||
{{ 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>
|
||||
<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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,8 +14,11 @@ function theme_content(&$a){
|
|||
$resolution = get_pconfig(local_user(), 'diabook', 'resolution' );
|
||||
$color = get_pconfig(local_user(), 'diabook', 'color' );
|
||||
$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){
|
||||
|
|
@ -28,6 +31,9 @@ function theme_post(&$a){
|
|||
set_pconfig(local_user(), 'diabook', 'resolution', $_POST['diabook_resolution']);
|
||||
set_pconfig(local_user(), 'diabook', 'color', $_POST['diabook_color']);
|
||||
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' );
|
||||
$color = get_config('diabook', 'color' );
|
||||
$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){
|
||||
|
|
@ -49,11 +58,14 @@ function theme_admin_post(&$a){
|
|||
set_config('diabook', 'resolution', $_POST['diabook_resolution']);
|
||||
set_config('diabook', 'color', $_POST['diabook_color']);
|
||||
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(
|
||||
"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),
|
||||
'$color' => array('diabook_color', t('Set color scheme'), $color, '', $colors),
|
||||
'$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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
/*
|
||||
* Name: Diabook
|
||||
* 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:
|
||||
*/
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ $a = get_app();
|
|||
function diabook_init(&$a) {
|
||||
|
||||
//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);
|
||||
|
||||
//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);
|
||||
|
||||
//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";
|
||||
$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
|
||||
$_COOKIE['close_mapquery'] = "1";
|
||||
|
||||
if($_COOKIE['close_mapquery'] != "1") {
|
||||
$mqtmplJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.tmpl.js";
|
||||
$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);
|
||||
$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);
|
||||
$mqzoomsliderJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqzoomsliderJS);
|
||||
$mousewheelJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mousewheel.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mousewheelJS);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -156,8 +156,23 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
});
|
||||
</script>';
|
||||
//check if mapquerybox is active and print
|
||||
$_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'] .= '
|
||||
<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
|
||||
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() {
|
||||
$("div#mapcontrol").attr("style","display: block;width:900px;height:600px;");
|
||||
$("#map2").mapQuery({layers:[{type:"osm"}],
|
||||
center:({zoom:8,position:[11.7,52.2]})});
|
||||
center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']})});
|
||||
|
||||
$("#mouseposition").mqMousePosition({
|
||||
map: "#map2",
|
||||
|
|
@ -185,9 +200,14 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
|
||||
|
||||
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>';
|
||||
}
|
||||
|
|
@ -265,7 +285,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
});
|
||||
</script>';
|
||||
|
||||
if($ccCookie != "9") {
|
||||
if($ccCookie != "10") {
|
||||
$a->page['htmlhead'] .= '
|
||||
<script>
|
||||
$("right_aside").ready(function(){
|
||||
|
|
@ -576,11 +596,26 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
//END Community Page
|
||||
|
||||
//mapquery
|
||||
$_COOKIE['close_mapquery'] = "1";
|
||||
|
||||
if($_COOKIE['close_mapquery'] != "1") {
|
||||
$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;
|
||||
$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
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@
|
|||
|
||||
{{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">
|
||||
<a onClick="restore_boxes()" title="Restore right-hand column" style="cursor: pointer;">Restore right-hand column</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user