]> git.mxchange.org Git - friendica.git/commitdiff
diabook-theme: add "Earth Layers"-box at right_side
authortommy tomson <thomas.bierey@gmx.de>
Mon, 7 May 2012 00:24:43 +0000 (02:24 +0200)
committertommy tomson <thomas.bierey@gmx.de>
Mon, 7 May 2012 00:24:43 +0000 (02:24 +0200)
view/theme/diabook/communityhome.tpl
view/theme/diabook/config.php
view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js [new file with mode: 0644]
view/theme/diabook/js/jquery.mousewheel.js [new file with mode: 0644]
view/theme/diabook/theme.php
view/theme/diabook/theme_settings.tpl

index 1749181fced98620e9bb7ec13831d30619f5d35e..eb4385722c91cecfdb08caa399c80c4653899076 100755 (executable)
@@ -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>
\ No newline at end of file
index e6c2681e3251d87ac3e66dca8d5030dc7c18d562..40a539079d00593caf9cba872baf5c5212f932d0 100644 (file)
@@ -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;
 }
diff --git a/view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js b/view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js
new file mode 100644 (file)
index 0000000..ebdce3b
--- /dev/null
@@ -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);
\ No newline at end of file
diff --git a/view/theme/diabook/js/jquery.mousewheel.js b/view/theme/diabook/js/jquery.mousewheel.js
new file mode 100644 (file)
index 0000000..f1d5f72
--- /dev/null
@@ -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);
\ No newline at end of file
index f6c9dd7c1ae61e289b202ceab22f3a6d58ae9e9e..dc98003438ae25fe077577f8583ef05326f749d4 100755 (executable)
@@ -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
    
index d08f2819c1260081c5e4ca51b0691ea773cc64d2..27122857c8142e4cb466c7ddb5e3729873fec1b1 100644 (file)
@@ -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>