[Mapbender-commits] r10333 - trunk/mapbender/http/plugins

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Sat Nov 16 03:34:56 PST 2019


Author: armin11
Date: 2019-11-16 03:34:56 -0800 (Sat, 16 Nov 2019)
New Revision: 10333

Added:
   trunk/mapbender/http/plugins/mod_metadataCarousel.php
Log:
New cool module for a carousel slider to dynamically load pulished wmc from the searchInterface (mapbender catalogue) into the mapviewer ;-) .

Added: trunk/mapbender/http/plugins/mod_metadataCarousel.php
===================================================================
--- trunk/mapbender/http/plugins/mod_metadataCarousel.php	                        (rev 0)
+++ trunk/mapbender/http/plugins/mod_metadataCarousel.php	2019-11-16 11:34:56 UTC (rev 10333)
@@ -0,0 +1,258 @@
+<?php
+/**
+ * Package: mod_metadataCarousel
+ *
+ * Description:
+ * This modul generates a div with a dynamic slider to allow the selection
+ * of single loadable metadata resources - wmc, ...
+ * The module shoudl be invoked thru a button click. The button may be a mb_button.js module
+ * see also mod_WMSpreferencesDiv or overview toogle
+ * 
+ * 
+ * Files:
+ *  - http/plugins/mod_metadataCarousel.php
+ *
+ * SQL:
+ * 
+ *
+ * License:
+ * Copyright (c) 2009, Open Source Geospatial Foundation
+ * This program is dual licensed under the GNU General Public License 
+ * and Simplified BSD license.  
+ * http://svn.osgeo.org/mapbender/trunk/mapbender/license/license.txt
+ */
+
+require_once(dirname(__FILE__)."/../php/mb_validateSession.php");
+$e_id = 'metadataCarousel';
+
+//include all element vars from the given element
+include '../include/dyn_js.php';
+include '../include/dyn_php.php';
+
+//if we need some other elements fom the database - do the stuff
+//echo "var mod_gui_wms_visible = '".$vis."';";
+
+?>
+//load options from element vars - if not already be done before
+//element_vars we need
+// 1. script name of the searchInterface to use
+// 2. number of tiles to show together
+// 3. number of objects to get from the searchInterface with one call (should be a factor of 2. )
+// 4. resource type - wmc/layer
+// 5. list of resource ids to filter {[1,2,3]}
+// 6. size of images, ...
+// 7. allowResize - like in loadwmc cause a function is borrowed from there
+
+//options.resourceFilter = "[3,11,12]";
+options.allowResize = true;
+options.resourceFilter = "[]";
+
+var metadataCarousel = function() {
+    var that = this;
+    this.id = options.id; //id of the upper div tag from mapbender element
+    this.resourceFilter = JSON.parse(options.resourceFilter);
+    if (this.resourceFilter.length > 0){
+        this.resourceFilterString = "&resourceIds="+this.resourceFilter.join(',');
+    } else {
+        this.resourceFilterString = "";
+    }
+    this.initForm = function() {
+        this.moduleContainer = $(document.createElement('div')).attr({'id': 'container'}).appendTo('#' + options.id);
+        this.moduleContainer.addClass('cf');
+	this.mainContainer = $(document.createElement('div')).appendTo(this.moduleContainer);
+        this.mainContainer.attr('id', 'main');
+        this.mainContainer.attr('role', 'main');
+        //hide during initialization
+        $('#' + options.id).hide();
+	this.sliderContainer = $(document.createElement('section')).appendTo(this.mainContainer);
+        this.sliderContainer.addClass('slider');
+        this.carouselContainer = $(document.createElement('div')).appendTo(this.sliderContainer);
+	this.carouselContainer.addClass('flexslider');
+	this.carouselContainer.addClass('carousel');
+        this.slidesContainer = $(document.createElement('ul')).appendTo(this.carouselContainer);
+	this.slidesContainer.addClass('slides');
+        this.slidesContainer.attr('id', 'slides');
+        //first dummy entries ;-)
+        this.slidesContainer.append("<li><img src='../img/mapbender_logo.png' /></li><li><img class='' src='../img/mapbender_logo.png' /></li><li><img src='../img/mapbender_logo.png' /></li><li><img src='../img/mapbender_logo.png' /></li>");
+    }
+
+    var targetName = options.target;
+    var showMoreButtonText = "Show more";
+    var maxResults = 12;
+    var currentPage = 0;
+    var maxPages = 1;
+    var numberOfResults = 0;
+    var searchUrl = "../php/mod_callMetadata.php?";
+    //var searchUrl = "../php/mod_callMetadataRemote.php?";
+    //first init form - hopefully that is done fast
+    this.initForm();
+
+    this.loadMore = function(){
+        //alert("actual_loaded_page: "+currentPage+" - max pages: "+maxPages); 1-10 (100)
+        //hide further loading button while loading more data
+        $('.show_more_button').hide();
+        //load next page
+        $.ajax({url: searchUrl+"searchText=*&searchResources=wmc&searchPages="+(parseInt(currentPage) + parseInt(1))+"&maxResults="+maxResults+that.resourceFilterString, async: false, success: function(result){
+        result.wmc.srv.forEach(that.addElementToSlider);
+        //increase global var currentPage
+        currentPage = parseInt(currentPage) + parseInt(1);
+        //unbind all old click events
+        $('.slides li img').unbind('click');
+        //reinitialize click event
+        $('.slides li img').click(function(){
+            var $this = $(this);
+            resourceId = $this.attr("resourceId");
+            alert(resourceId);
+        });
+        that.alterCss();
+    }});
+    //show loading button again
+    $('.show_more_button').show();
+    $('.show_more_button').attr("value", "1-"+parseInt(currentPage)*parseInt(maxResults)+" ("+numberOfResults+") - "+showMoreButtonText);
+    if (parseInt(currentPage)*parseInt(maxResults) >= parseInt(numberOfResults)) {
+        $('.show_more_button').attr("value", "1-"+numberOfResults+" ("+numberOfResults+")");
+        $('.show_more_button').unbind('click');
+    }
+  }
+
+    var mainFlexSlider = $('#'+this.id);
+    mainFlexSlider.flexslider({
+        animation: "slide",
+        animationLoop: false,
+        itemWidth: 150,
+        itemMargin: 5,
+        maxItems: 3,
+        pausePlay: false,
+        start: function(slider){
+            $('.slides li img', slider).click(function(){
+                var $this = $(this);
+                resourceId = $this.attr("resourceId"); that.loadWmcById(resourceId)
+            });
+        },
+        end: function(slider){
+            that.loadMore();
+        }
+    });
+
+    this.fillInitialMetadata = function() {
+        //initialize slider from first request to search interface
+        var initialResult = $.ajax({url: searchUrl+"searchText=*&searchResources=wmc&maxResults="+maxResults+that.resourceFilterString, async: false, success: function(result){
+            if (result.valid) 
+                return true;
+            else 
+                return false;
+        }});
+        var initialSearchJson = JSON.parse(initialResult.responseText);
+        //extract number of currrent page, rpp and max results
+        currentPage = initialSearchJson.wmc.md.p;
+        numberOfResults = initialSearchJson.wmc.md.nresults;
+        maxPages = Math.ceil(numberOfResults / maxResults);
+        //remove temporary main slider content
+        $("ul.slides").html("");
+        //alert("number of all wmc: "+JSON.parse(initialResult.responseText).wmc.md.nresults);
+        JSON.parse(initialResult.responseText).wmc.srv.forEach(that.addElementToSlider);
+        $('.show_more_button').attr("value", "1-"+parseInt(currentPage)*parseInt(maxResults)+" ("+numberOfResults+") - "+showMoreButtonText);
+        if (parseInt(currentPage)*parseInt(maxResults) >= parseInt(numberOfResults)) {
+            $('.show_more_button').attr("value", "1-"+numberOfResults+" ("+numberOfResults+")");
+            $('.show_more_button').unbind('click');
+        }
+    }
+
+    this.alterCss = function(){
+        $('.flexslider').css({"overflow":"hidden","position":"relative","height":"130px"});
+        $('.flexslider_images').css({"width":"150px","height":"100px"});
+    }
+
+    this.addElementToSlider = function(item) {
+        mainFlexSlider.data('flexslider').addSlide("<li class='flexslider slides'><a href='#'><img class='flexslider flexslider_images' src='"+item.previewURL+"' resourceId='"+item.id+"' title='"+item.title+"'/><span class='flex-caption'>"+item.title+"</span><span class='flex-load-count'>"+item.loadCount+"</span></a></li>");
+        that.alterCss();
+    }
+
+    this.removeOldContainer = function(){
+       $('#container').remove();
+    }
+
+    this.loadWmcById = function(wmcId){
+       alert(wmcId);
+       //Mapbender.modules.loadwmc.executeJavaScript({method:"loadWmc", parameters:{id:wmcId}});
+       that.executeJavaScript({method:"loadWmc", parameters:{id:wmcId}});
+    }
+
+    that.fillInitialMetadata();
+    that.removeOldContainer();
+    $('#' + options.id).show();
+    that.alterCss();
+
+//copied from javascripts/mod_loadwmc.js because it will not available, if loadwmc window has been closed somewhen!!!!
+	this.executeJavaScript = function (args) {
+		var req = new Mapbender.Ajax.Request({
+			url: "../php/mod_loadwmc_server.php",
+			method: args.method,
+			parameters: args.parameters,
+			callback: function (obj, result, message) {
+				if (!result) {
+					new Mapbender.Warning(message);
+					return;
+				}
+				try {
+					if (args.method === "deleteWmc" || args.method === "setWMCPublic"){
+						return;
+					}
+					//things that have been done to load wmc
+					if (obj.javascript && typeof(obj.javascript) == "object") {
+						for (var j = 0; j < obj.javascript.length; j++) {
+							//TODO: prohibit multiple maprequests when load wmc, cause on maprequests the wmc maybe stored to session :-(
+							//alert("Statement: " + obj.javascript[j]);
+							//eventAfterLoadWMS.trigger(); -- load the each wms again and saves the wmc to session for each wms - prohibit this behaviour!!!! - Done by global lock_maprequest in class_wmc.php line 1220+!!
+							//console.log("Statement: " + obj.javascript[j]);
+							eval(obj.javascript[j]);                                           
+						}
+
+						if (options.allowResize == true) {
+						    if (Mapbender.modules.resizeMapsize) {
+						        //alert("Module resizeMapsize is available!");
+						        try {$('#resizeMapsize').trigger("click");} catch (e) {alert(e)};
+						    }
+						} else {
+						    //alert("allowResize not defined");
+						}
+						if (args.method === "loadWmc" || args.method === 'loadWmcFromFile') {
+                                                    var kml = $('#mapframe1').data('kml');
+                                                    if(kml) {
+                                                        try {
+                                                            $.each(kml.kmlOrder, function(_, v) {
+                                                                $('li[title="' + v + '"]').unbind().find('*').unbind();
+                                                                $('li[title="' + v + '"]').remove();
+                                                            });
+                                                            kml._kmls = JSON.parse(restoredWmcExtensionData.KMLS);
+                                                            kml.cache = {};
+                                                            kml.kmlOrder = JSON.parse(restoredWmcExtensionData.KMLORDER);
+                                                            kml.render();
+                                                            for(var k in kml._kmls) {
+                                                                kml.element.trigger('kml:loaded', kml._kmls[k]);
+                                                            }
+                                                        } catch(e) {
+                                                            // just ignore the exception for now
+                                                        }
+                                                    }
+							that.events.loaded.trigger({
+								extensionData: restoredWmcExtensionData
+							});
+						}
+					}
+					that.hide();
+					new Mapbender.Notice(args.message);
+				}
+				catch (e) {
+					new Mapbender.Exception(e.message);
+				}
+			}
+		});
+		req.send();
+	};
+}
+//register object in mapbender!
+Mapbender.events.init.register(function() {
+    Mapbender.modules[options.id] = $.extend(new metadataCarousel(),Mapbender.modules[options.id]);	
+});
+



More information about the Mapbender_commits mailing list