From 811215c4855d6698324e33f981db8d9a7eb8db46 Mon Sep 17 00:00:00 2001
From: ben <ben@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Mon, 6 Oct 2008 12:37:31 +0000
Subject: Elgg Javascript now goes through the views system

git-svn-id: https://code.elgg.org/elgg/trunk@2185 36083f99-b078-4883-b0ff-0f9b5a30f544
---
 engine/lib/elgglib.php                 |  14 ++
 views/default/js/friendsPickerv1.php   |  94 ++++++++++++
 views/default/js/initialise_elgg.php   | 253 +++++++++++++++++++++++++++++++++
 views/default/page_elements/header.php |   4 +-
 4 files changed, 363 insertions(+), 2 deletions(-)
 create mode 100644 views/default/js/friendsPickerv1.php
 create mode 100644 views/default/js/initialise_elgg.php

diff --git a/engine/lib/elgglib.php b/engine/lib/elgglib.php
index 0d2b1e073..17766053c 100644
--- a/engine/lib/elgglib.php
+++ b/engine/lib/elgglib.php
@@ -1827,6 +1827,18 @@
 		
 	}
 	
+	function js_page_handler($page) {
+		
+		if (is_array($page) && sizeof($page)) {
+			header('Content-type: text/javascript');
+			$js = str_replace('.js','',$page[0]);
+			echo elgg_view('js/' . $js);
+			
+			exit;
+		}
+		
+	}
+	
 	function elgg_init() {
 		// Important actions
 			register_action('comments/add');
@@ -1834,6 +1846,8 @@
 		// Menu
 			global $CONFIG;
 			add_menu(elgg_echo('content:latest'), $CONFIG->wwwroot . 'dashboard/latest.php');
+		// Page handler for JS
+			register_page_handler('js','js_page_handler');
 	}
 	
 	register_elgg_event_handler('init','system','elgg_init');
diff --git a/views/default/js/friendsPickerv1.php b/views/default/js/friendsPickerv1.php
new file mode 100644
index 000000000..73e98af15
--- /dev/null
+++ b/views/default/js/friendsPickerv1.php
@@ -0,0 +1,94 @@
+/*
+	elgg friendsPicker plugin
+	
+	adapted from Niall Doherty's excellent Coda-Slider - http://www.ndoherty.com/coda-slider
+*/
+
+
+jQuery.fn.friendsPicker = function(iterator) {
+
+	var settings; 
+	settings = $.extend({ easeFunc: "easeOutExpo", easeTime: 1000, toolTip: false }, settings);
+	
+	return this.each(function() {
+	
+		var container = $(this);
+		container.addClass("friendsPicker");
+		// set panelwidth manually as it's hidden initially
+		var panelWidth = 685;
+
+		// count the panels in the container
+		var panelCount = container.find("div.panel").size();
+		// calculate the width of all the panels lined up end-to-end
+		var friendsPicker_containerWidth = panelWidth*panelCount;
+		// specify width for the friendsPicker_container
+		container.find("div.friendsPicker_container").css("width" , friendsPicker_containerWidth);
+		
+		// global variables for container.each function below
+		var friendsPickerNavigationWidth = 0;
+		var currentPanel = 1;
+		
+		// generate appropriate nav for each container
+		container.each(function(i) {
+			// generate Left and Right arrows
+			$(this).before("<div class='friendsPickerNavigationL' id='friendsPickerNavigationL" + iterator + "'><a href='#'>Left</a><\/div>");
+			$(this).after("<div class='friendsPickerNavigationR' id='friendsPickerNavigationR" + iterator + "'><a href='#'>Right</a><\/div>");
+			
+			// generate a-z tabs
+			$(this).before("<div class='friendsPickerNavigation' id='friendsPickerNavigation" + iterator + "'><ul><\/ul><\/div>");
+			$(this).find("div.panel").each(function(individualTabItemNumber) {
+				$("div#friendsPickerNavigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");		
+			});
+			
+			// tabs navigation
+			$("div#friendsPickerNavigation" + iterator + " a").each(function(individualTabItemNumber) {
+				// calc friendsPickerNavigationWidth by summing width of each li
+				friendsPickerNavigationWidth += $(this).parent().width();
+				// set-up individual tab clicks
+				$(this).bind("click", function() {
+					$(this).addClass("current").parent().parent().find("a").not($(this)).removeClass("current"); 
+					var distanceToMoveFriendsPicker_container = - (panelWidth*individualTabItemNumber);
+					currentPanel = individualTabItemNumber + 1;
+					$(this).parent().parent().parent().next().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+				});
+			});
+			
+			// Right arow click function
+			$("div#friendsPickerNavigationR" + iterator + " a").click(function() {
+				if (currentPanel == panelCount) {
+					var distanceToMoveFriendsPicker_container = 0;
+					currentPanel = 1; 
+					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
+				} else {
+					var distanceToMoveFriendsPicker_container = - (panelWidth*currentPanel);
+					currentPanel += 1;
+					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().next().find("a").addClass("current");
+				};
+				$(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+				return false;
+			});
+			
+			// Left arrow click function
+			$("div#friendsPickerNavigationL" + iterator + " a").click(function() {
+				if (currentPanel == 1) {
+					var distanceToMoveFriendsPicker_container = - (panelWidth*(panelCount - 1));
+					currentPanel = panelCount;
+					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
+				} else {
+					currentPanel -= 1;
+					var distanceToMoveFriendsPicker_container = - (panelWidth*(currentPanel - 1));
+					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
+				};
+				$(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+				return false;
+			});
+						
+				// apply 'current' class to currently selected tab link
+				$("div#friendsPickerNavigation" + iterator + " a:eq(0)").addClass("current");
+		});
+
+		$("div#friendsPickerNavigation" + iterator).append("<br />");		
+  });
+};
+
+
diff --git a/views/default/js/initialise_elgg.php b/views/default/js/initialise_elgg.php
new file mode 100644
index 000000000..e8a9952e5
--- /dev/null
+++ b/views/default/js/initialise_elgg.php
@@ -0,0 +1,253 @@
+$(document).ready(function () {
+
+	// elggtoolbar - close all drawer elements on pageload
+	$('li.drawer ul').hide();
+	
+	// elggtoolbar
+	$('h2.drawer-handle').click(function () {	
+		$('li.drawer ul:visible').slideUp('medium').prev().removeClass('open');
+		$(this).addClass('open').next().slideDown('fast');
+	return false;
+	});
+	
+	// toggle widget box contents
+	$('a.toggle_box_contents').bind('click', toggleContent);
+	
+	// toggle widget box edit panel
+	$('a.toggle_box_edit_panel').click(function () {
+		$(this.parentNode.parentNode).children("[class=collapsable_box_editpanel]").slideToggle("fast");
+		return false;
+    });
+
+    
+	// toggle customise edit panel
+	$('a.toggle_customise_edit_panel').click(function () {
+		$('div#customise_editpanel').slideToggle("fast");
+		return false;
+    }); 
+
+	// toggle plugin's more info on admin tools admin
+	$('a.manifest_details').click(function () {
+		$(this.parentNode.parentNode).children("[class=manifest_file]").slideToggle("fast");
+		return false;
+	});
+  
+	//////////////////
+	// WIDGET GALLERY
+	// sortable widgets
+	var els = ['#leftcolumn_widgets', '#middlecolumn_widgets', '#rightcolumn_widgets', '#widget_picker_gallery' ];
+	var $els = $(els.toString());
+	
+	$els.sortable({
+		items: '.draggable_widget',
+		handle: '.drag_handle',
+		cursor: 'move',
+		revert: true,
+		opacity: 1.0,
+		appendTo: 'body',
+		placeholder: 'placeholder',
+		connectWith: els,
+		start:function(e,ui) {
+			// prevent droppable drop function from running when re-sorting main lists
+			//$('#middlecolumn_widgets').droppable("disable");
+			//$('#leftcolumn_widgets').droppable("disable");	
+		},
+		stop: function(e,ui) {	
+			// refresh list before updating hidden fields with new widget order		
+			$(this).sortable( "refresh" );
+			
+			var widgetNamesLeft = outputWidgetList('#leftcolumn_widgets');
+			var widgetNamesMiddle = outputWidgetList('#middlecolumn_widgets');
+			var widgetNamesRight = outputWidgetList('#rightcolumn_widgets');
+			
+			document.getElementById('debugField1').value = widgetNamesLeft;
+			document.getElementById('debugField2').value = widgetNamesMiddle;
+			document.getElementById('debugField3').value = widgetNamesRight;
+			
+		}
+	});
+	
+    // bind more info buttons
+    // it's wrapped in a function so it can be called when new widgets are created
+    widget_moreinfo();
+
+	// setup hover class for dragged widgets
+	$("#rightcolumn_widgets").droppable({
+		accept: ".draggable_widget",
+		hoverClass: 'droppable-hover'
+	});
+	$("#middlecolumn_widgets").droppable({
+		accept: ".draggable_widget",
+		hoverClass: 'droppable-hover'
+	});
+	$("#leftcolumn_widgets").droppable({
+		accept: ".draggable_widget",
+		hoverClass: 'droppable-hover'
+	});
+
+
+
+
+   
+}); /* end document ready function */
+
+
+
+
+
+
+
+
+
+
+
+
+jQuery.fn.makeDelimitedList = function(elementAttribute) {
+	
+	var delimitedListArray = new Array();
+
+	var listDelimiter = "::";
+
+	// Loop over each element in the stack and add the elementAttribute to the array
+	this.each(function(e) {
+			var listElement = $(this);
+	
+			// Add the attribute value to our values array
+			delimitedListArray[delimitedListArray.length] = listElement.attr(elementAttribute);
+		}
+	);
+
+	// Return value list by joining the array
+	return(delimitedListArray.join(listDelimiter));
+}
+
+
+
+
+function outputWidgetList(forElement) {
+	return( $("input[@name='handler'], input[@name='guid']", forElement ).makeDelimitedList("value") );	
+}
+
+
+// widget panel collapsed/expanded state
+function widget_state(forWidget) {
+
+	var thisWidgetState = $.cookie(forWidget);
+
+	if (thisWidgetState == 'collapsed') {
+	
+		forWidget = "#" + forWidget;
+		
+		$(forWidget).find("div.collapsable_box_content").hide();
+		$(forWidget).find("a.toggle_box_contents").html('+');
+		$(forWidget).find("a.toggle_box_edit_panel").fadeOut('medium');
+	};	
+}
+
+
+// toggle widget box contents
+var toggleContent = function(e) {
+	var targetContent = $('div.collapsable_box_content', this.parentNode.parentNode);
+		if (targetContent.css('display') == 'none') {
+			targetContent.slideDown(400);
+			$(this).html('-');
+			$(this.parentNode).children("[class=toggle_box_edit_panel]").fadeIn('medium');
+			
+			// set cookie for widget panel open-state
+			var thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id');
+			$.cookie(thisWidgetName, 'expanded', { expires: 365 });
+			
+			
+		} else {
+			targetContent.slideUp(400);
+			$(this).html('+');
+			$(this.parentNode).children("[class=toggle_box_edit_panel]").fadeOut('medium');
+			// make sure edit pane is closed
+			$(this.parentNode.parentNode).children("[class=collapsable_box_editpanel]").hide();
+			
+			// set cookie for widget panel closed-state
+			var thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id');
+			$.cookie(thisWidgetName, 'collapsed', { expires: 365 });			
+		}
+	return false;
+};
+
+
+
+
+function widget_moreinfo() {
+
+	$("img.more_info").hover(function(e) {										  
+		
+		var widgetdescription = $("input[@name='description']", this.parentNode.parentNode.parentNode ).attr('value');
+
+		$("body").append("<p id='widget_moreinfo'><b>"+ widgetdescription +" </b></p>");
+		
+		if (e.pageX < 900) {
+			$("#widget_moreinfo")
+				.css("top",(e.pageY + 10) + "px")
+				.css("left",(e.pageX + 10) + "px")
+				.fadeIn("medium");	
+		}	
+		else {
+			$("#widget_moreinfo")
+				.css("top",(e.pageY + 10) + "px")
+				.css("left",(e.pageX - 210) + "px")
+				.fadeIn("medium");		
+		}			
+				
+    },
+	function() {
+		$("#widget_moreinfo").remove();
+    });	
+    
+	$("img.more_info").mousemove(function(e) {
+		//$("#widget_moreinfo")
+		//	.css("top",(e.pageY + 10) + "px")
+		//	.css("left",(e.pageX + 10) + "px");
+	});	
+		
+};
+
+
+jQuery.cookie = function(name, value, options) {
+    if (typeof value != 'undefined') { // name and value given, set cookie
+        options = options || {};
+        if (value === null) {
+            value = '';
+            options.expires = -1;
+        }
+        var expires = '';
+        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
+            var date;
+            if (typeof options.expires == 'number') {
+                date = new Date();
+                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
+            } else {
+                date = options.expires;
+            }
+            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
+        }
+        // CAUTION: Needed to parenthesize options.path and options.domain
+        // in the following expressions, otherwise they evaluate to undefined
+        // in the packed version for some reason...
+        var path = options.path ? '; path=' + (options.path) : '';
+        var domain = options.domain ? '; domain=' + (options.domain) : '';
+        var secure = options.secure ? '; secure' : '';
+        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
+    } else { // only name given, get cookie
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+            var cookies = document.cookie.split(';');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = jQuery.trim(cookies[i]);
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+};
diff --git a/views/default/page_elements/header.php b/views/default/page_elements/header.php
index 933cfaeb7..b1647a5f1 100644
--- a/views/default/page_elements/header.php
+++ b/views/default/page_elements/header.php
@@ -58,7 +58,7 @@ END;
 	<!-- include links to jQuery here? -->
 	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-1.2.6.pack.js"></script>
 	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-ui-personalized-1.5.packed.js"></script>
-	<script type="text/javascript" src="<?php echo $vars['url']; ?>javascript/initialise_elgg.js"></script>
+	<script type="text/javascript" src="<?php echo $vars['url']; ?>pg/js/initialise_elgg.js"></script>
 	
 <?php
 
@@ -70,7 +70,7 @@ END;
 	<!-- only needed on pages where we have friends collections and/or the friends picker-->
 	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-easing.1.2.pack.js"></script>
 	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-easing-compatibility.1.2.pack.js"></script>
-	<script type="text/javascript" src="<?php echo $vars['url']; ?>javascript/friendsPickerv1.js"></script>
+	<script type="text/javascript" src="<?php echo $vars['url']; ?>pg/js/friendsPickerv1.js"></script>
 	
 <?php
 
-- 
cgit v1.2.3