Browse Source

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

pull/291/merge
tommy tomson 10 years ago
parent
commit
3d0a0b6abf
  1. 34
      view/theme/diabook/communityhome.tpl
  2. 21
      view/theme/diabook/config.php
  3. 85
      view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js
  4. 84
      view/theme/diabook/js/jquery.mousewheel.js
  5. 63
      view/theme/diabook/theme.php
  6. 6
      view/theme/diabook/theme_settings.tpl

34
view/theme/diabook/communityhome.tpl

@ -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>

21
view/theme/diabook/config.php

@ -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;
}

85
view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js

@ -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);

84
view/theme/diabook/js/jquery.mousewheel.js

@ -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);

63
view/theme/diabook/theme.php

@ -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,8 +200,13 @@ 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

6
view/theme/diabook/theme_settings.tpl

@ -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…
Cancel
Save