Refs #821 #1793 early widget layout - does not include edit settings, delete, collapsing, reloading, or adding widgets

git-svn-id: http://code.elgg.org/elgg/trunk@7329 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 108 insertions, 415 deletions

diff --git a/views/default/css.php b/views/default/css.php
index 923d7c958..8409ceb8b 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -17,6 +17,7 @@
 	SUBMENU						current page/tool submenu in sidebar
 	PAGINATION					re-usable default page navigation
 	ELGG TABBED NAVIGATION 		re-usable tabbed navigation
+	WIDGETS						
 	LOGIN / REGISTER			login box, register, and lost password page styles
 	CONTENT HEADER
 	DEFAULT COMMENTS
@@ -25,7 +26,7 @@
 	GENERAL FORM ELEMENTS		default styles for all elgg input/form elements
 	FRIENDS PICKER
 	LIKES
-
+	MISC
 
 */
 /* Colors:
@@ -855,6 +856,54 @@ li.navigation_more ul li {
 	background: white;
 }
 
+/* ***************************************
+	WIDGETS
+*************************************** */
+.widget_column {
+	float: right;
+	min-height: 15px;
+}
+.widget_col_1 {
+	width: 100%;
+}
+.widget_col_2 {
+	width: 48%;
+	margin-right: 4%;
+}
+.widget_col_3 {
+	width: 32%;
+	margin-right: 2%;
+}
+.widget_col_4 {
+	width: 23.5%;
+	margin-right: 2%;
+}
+.widget_first_col {
+	margin-right: 0;
+}
+.widget {
+	background-color: #dedede;
+	padding: 2px;
+	margin-bottom: 15px;
+}
+.widget_title {
+	height: 30px;
+	line-height: 30px;
+}
+.widget_title h3 {
+	padding: 0 5px;
+}
+.widget_content {
+	background-color: #ffffff;
+	padding: 10px;
+}
+.drag_handle {
+	cursor: move;
+}
+.widget_placeholder {
+	border: 2px dashed #dedede;
+	margin-bottom: 15px;
+}
 
 /* ***************************************
 	LOGIN / REGISTER
@@ -1653,3 +1702,12 @@ p.elgg_likes_owner {
 .user_picker_entry .delete_button {
 	margin-right:10px;
 }
+
+/* ***************************************
+	MISC
+*************************************** */
+#dashboard_info {
+	float: left;
+	width: 66%;
+	margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/views/default/layouts/widgets.php b/views/default/layouts/widgets.php
index d114edfcf..21d942080 100644
--- a/views/default/layouts/widgets.php
+++ b/views/default/layouts/widgets.php
@@ -1,337 +1,44 @@
 <?php
-
-	/**
-	 * Elgg widget layout
-	 */
-
-		$widgettypes = get_widget_types();
-
-		$owner = elgg_get_page_owner();
-
-		$area1widgets = get_widgets(elgg_get_page_owner_guid(), elgg_get_context(), 1);
-		$area2widgets = get_widgets(elgg_get_page_owner_guid(), elgg_get_context(), 2);
-		$area3widgets = get_widgets(elgg_get_page_owner_guid(), elgg_get_context(), 3);
-
-		if (empty($area1widgets) && empty($area2widgets) && empty($area3widgets)) {
-
-			if (isset($vars['area3'])) $vars['area1'] = $vars['area3'];
-			if (isset($vars['area4'])) $vars['area2'] = $vars['area4'];
-
-		}
-
-		if (is_array($widgettypes) && sizeof($widgettypes) > 0 && $owner && $owner->canEdit()) {
-
-
-
-		if(get_loggedin_userid() == elgg_get_page_owner_guid() || ($owner instanceof ElggGroup && $owner->canEdit())){
-
-			if (elgg_get_context() == "profile") {
-		?>
-			<!-- add remove widget button -->
-			<div class="add_widgets" style="margin:-18px 0 10px;">
-			<a href="javascript:void(0);" class="action_button toggle_customise_edit_panel"><?php echo(elgg_echo('dashboard:configure')); ?></a>
-			</div><div class="clearfloat"></div>
-		<?php
-			}
-		}
-		?>
-
-<div id="customise_editpanel" class="hidden">
-
-<div id="customise_editpanel_rhs">
-<h2><?php echo elgg_echo("widgets:gallery"); ?></h2>
-<div id="widget_picker_gallery">
-
-
-<?php
-
-	foreach($widgettypes as $handler => $widget) {
-
-?>
-
-<table class="draggable_widget" cellspacing="0"><tr><td>
-	<h3>
-		<?php echo $widget->name; ?>
-		<input type="hidden" name="multiple" value="<?php if ((isset($widget->handler)) && (isset($widgettypes[$widget->handler]->multiple))) echo $widgettypes[$widget->handler]->multiple; ?>" />
-		<input type="hidden" name="side" value="<?php if ((isset($widget->handler)) && (isset($widgettypes[$widget->handler])) && (is_array($widgettypes[$widget->handler]->positions))) echo in_array('side',$widgettypes[$widget->handler]->positions); ?>" />
-		<input type="hidden" name="main" value="<?php if ((isset($widget->handler)) && (isset($widgettypes[$widget->handler])) && (is_array($widgettypes[$widget->handler]->positions))) echo in_array('main',$widgettypes[$widget->handler]->positions); ?>" />
-		<input type="hidden" name="handler" value="<?php echo htmlentities($handler); ?>" />
-		<input type="hidden" name="description" value="<?php echo htmlentities($widget->description, null, 'UTF-8'); ?>" />
-		<input type="hidden" name="guid" value="0" />
-	</h3>
-</td>
-<td width="17px" align="right"></td>
-<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="14" height="14" class="more_info" /></a></td>
-<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="15" height="15" class="drag_handle" /></a></td>
-</tr></table>
-
-<?php
-	}
-?>
-
-<br /><!-- bit of space at the bottom of the widget gallery -->
-
-</div><!-- /#customise_editpanel_rhs -->
-</div><!-- /#widget_picker_gallery -->
-
-
-<div class="customise_editpanel_instructions">
-<h2><?php echo elgg_echo('widgets:add'); ?></h2>
-<?php echo elgg_view('output/longtext', array('value' => elgg_echo('widgets:add:description'))); ?>
-</div>
-
-
-<div id="customise_page_view">
-
-<table cellspacing="0">
-  <tr>
-    <td colspan="2" align="left" valign="top">
-
-    <?php
-if (elgg_get_context() != "profile") { /* on groups */
-    ?>
-
-			<h2 class="profile_box"><?php echo elgg_echo("widgets:profilebox"); ?></h2>
-    		<div id="profile_box_widgets">
-    		<p><small><?php echo elgg_echo('widgets:position:fixed'); ?></small></p>
-    		</div>
-
-    <?php
-	}
-    ?>
-
-    </td>
-
-
-    <td rowspan="2" align="left" valign="top">
-		<h2><?php echo elgg_echo("widgets:rightcolumn"); ?></h2>
-		<div id="rightcolumn_widgets" <?php if (elgg_get_context() != "profile") echo "class=\"long\""; ?> >
-		<?php
-			$rightcolumn_widgets = "";
-			if (is_array($area3widgets) && sizeof($area3widgets) > 0) {
-				foreach($area3widgets as $widget) {
-					if (!empty($rightcolumn_widgets)) {
-						$rightcolumn_widgets .= "::";
-					}
-					$rightcolumn_widgets .= "{$widget->handler}::{$widget->getGUID()}";
-		?>
-
-		<table class="draggable_widget" cellspacing="0"><tr><td width="149px">
-			<h3>
-				<?php echo $widgettypes[$widget->handler]->name; ?>
-				<input type="hidden" name="handler" value="<?php
-					echo $widget->handler;
-				?>" />
-				<input type="hidden" name="multiple" value="<?php echo $widgettypes[$widget->handler]->multiple; ?>" />
-				<input type="hidden" name="side" value="<?php echo in_array('side',$widgettypes[$widget->handler]->positions); ?>" />
-				<input type="hidden" name="main" value="<?php echo in_array('main',$widgettypes[$widget->handler]->positions); ?>" />
-				<input type="hidden" name="description" value="<?php echo htmlentities($widgettypes[$widget->handler]->description); ?>" />
-				<input type="hidden" name="guid" value="<?php echo $widget->getGUID(); ?>" />
-			</h3>
-		</td>
-		<td width="17px" align="right"></td>
-		<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="14" height="14" class="more_info" /></a></td>
-		<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="15" height="15" class="drag_handle" /></a></td>
-		</tr></table>
-
-		<?php
-
-				}
-			}
-		?>
-
-		</div>
-    </td><!-- /rightcolumn td -->
-
-  </tr>
-
-  <tr>
-
-<td>
-<h2><?php echo elgg_echo("widgets:leftcolumn"); ?></h2>
-<div id="leftcolumn_widgets">
-
-<?php
-	$leftcolumn_widgets = "";
-	if (is_array($area1widgets) && sizeof($area1widgets) > 0) {
-		foreach($area1widgets as $widget) {
-			if (!empty($leftcolumn_widgets)) {
-				$leftcolumn_widgets .= "::";
-			}
-			$leftcolumn_widgets .= "{$widget->handler}::{$widget->getGUID()}";
-?>
-
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px">
-	<h3>
-		<?php echo $widgettypes[$widget->handler]->name; ?>
-		<input type="hidden" name="handler" value="<?php
-			echo $widget->handler;
-		?>" />
-		<input type="hidden" name="multiple" value="<?php echo $widgettypes[$widget->handler]->multiple; ?>" />
-		<input type="hidden" name="side" value="<?php echo in_array('side',$widgettypes[$widget->handler]->positions); ?>" />
-		<input type="hidden" name="main" value="<?php echo in_array('main',$widgettypes[$widget->handler]->positions); ?>" />
-		<input type="hidden" name="description" value="<?php echo htmlentities($widgettypes[$widget->handler]->description); ?>" />
-		<input type="hidden" name="guid" value="<?php echo $widget->getGUID(); ?>" />
-	</h3>
-</td>
-<td width="17px" align="right"></td>
-<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="14" height="14" class="more_info" /></a></td>
-<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="15" height="15" class="drag_handle" /></a></td>
-</tr></table>
-
-<?php
-
+/**
+ * Elgg widgets layout
+ *
+ * @uses $vars['box'] Optional display box at the top of layout
+ * @uses $vars['num_columns'] Number of widget columns for this layout
+ */
+
+$owner = elgg_get_page_owner();
+$context = elgg_get_context();
+elgg_push_context('widgets');
+
+if (isset($vars['box'])) {
+	echo $vars['box'];
+}
+
+$num_columns = 3;
+if (isset($vars['num_columns'])) {
+	$num_columns = $vars['num_columns'];
+}
+
+$widget_class = "widget_col_$num_columns";
+for ($column_index = 1; $column_index <= $num_columns; $column_index++) {
+	$widgets = get_widgets($owner->guid, $context, $column_index);
+
+	// test code during design and implementation
+	$widget1 = new ElggWidget();
+	$widget1->handler = 'test';
+	$widget2 = new ElggWidget();
+	$widget2->handler = 'test';
+	$widgets = array($widget1, $widget2);
+
+	$first = ($column_index == 1) ? 'widget_first_col' : '';
+
+	echo "<div class=\"widget_column $widget_class $first\">";
+	if (is_array($widgets) && sizeof($widgets) > 0) {
+		foreach ($widgets as $widget) {
+			echo elgg_view_entity($widget);
 		}
 	}
-?>
-</div>
-</td>
-
-<td>
-
-<h2><?php echo elgg_echo("widgets:middlecolumn"); ?></h2>
-<div id="middlecolumn_widgets">
-
-<?php
-	$middlecolumn_widgets = "";
-	if (is_array($area2widgets) && sizeof($area2widgets) > 0) {
-		foreach($area2widgets as $widget) {
-			if (!empty($middlecolumn_widgets)) {
-				$middlecolumn_widgets .= "::";
-			}
-			$middlecolumn_widgets .= "{$widget->handler}::{$widget->getGUID()}";
-?>
-
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px">
-	<h3>
-		<?php echo $widgettypes[$widget->handler]->name; ?>
-		<input type="hidden" name="handler" value="<?php
-			echo $widget->handler;
-		?>" />
-		<input type="hidden" name="multiple" value="<?php echo $widgettypes[$widget->handler]->multiple; ?>" />
-		<input type="hidden" name="side" value="<?php echo in_array('side',$widgettypes[$widget->handler]->positions); ?>" />
-		<input type="hidden" name="main" value="<?php echo in_array('main',$widgettypes[$widget->handler]->positions); ?>" />
-		<input type="hidden" name="description" value="<?php echo htmlentities($widgettypes[$widget->handler]->description); ?>" />
-		<input type="hidden" name="guid" value="<?php echo $widget->getGUID(); ?>" />
-	</h3>
-</td>
-<td width="17px" align="right"></td>
-<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="14" height="14" class="more_info" /></a></td>
-<td width="17px" align="right"><a href="#"><img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="15" height="15" class="drag_handle" /></a></td>
-</tr></table>
-
-<?php
-
-		}
-	}
-?>
-
-</div>
-</td>
-
-
-
-
-
-
-</tr>
-</table>
-
-</div><!-- /#customise_page_view -->
-
-<form action="<?php echo elgg_get_site_url(); ?>action/widgets/reorder" method="post">
-<?php echo elgg_view('input/securitytoken'); ?>
-<textarea type="textarea" value="Left widgets"   style="display:none" name="debugField1" id="debugField1" /><?php echo $leftcolumn_widgets; ?></textarea>
-<textarea type="textarea" value="Middle widgets" style="display:none" name="debugField2" id="debugField2" /><?php echo $middlecolumn_widgets; ?></textarea>
-<textarea type="textarea" value="Right widgets"  style="display:none" name="debugField3" id="debugField3" /><?php echo $rightcolumn_widgets; ?></textarea>
-
-<input type="hidden" name="context" value="<?php echo elgg_get_context(); ?>" />
-<input type="hidden" name="owner" value="<?php echo elgg_get_page_owner_guid(); ?>" />
-<input type="submit" onfocus="blur()" value="<?php echo elgg_echo('save'); ?>" class="submit_button" onclick="$('a.Action_Button.toggle_customise_edit_panel').click();" />
-<input type="button" onfocus="blur()" value="<?php echo elgg_echo('cancel'); ?>" class="cancel_button" onclick="$('a.Action_Button.toggle_customise_edit_panel').click();" />
-
-</form>
-</div><!-- /customise_editpanel -->
-
-<?php
-
-		}
-
-?>
-
-
-
-<table cellspacing="0" id="widget_table">
-  <tr>
-    <td colspan="2" align="left" valign="top" height="1px">
-		<!-- profile box or 'dashboard info' notice -->
-		<?php if (isset($vars['area1'])) echo $vars['area1']; ?>
-	</td>
-    <td rowspan="2" align="left" valign="top" height="100%">
-
-	<?php
-		if(get_loggedin_userid() == elgg_get_page_owner_guid() || ($owner instanceof ElggGroup && $owner->canEdit())){
-
-			if (elgg_get_context() != "profile") {
-		?>
-			<!-- customise page button appears in different place on groups widgets -->
-			<div class="add_widgets">
-			<a href="javascript:void(0);" class="action_button toggle_customise_edit_panel"><?php echo(elgg_echo('dashboard:configure')); ?></a>
-			</div>
-		<?php
-			}
-		}
-		?>
-
-
-		<div id="widgets_right">
-		<?php
-
-			if (is_array($area3widgets) && sizeof($area3widgets) > 0)
-			foreach($area3widgets as $widget) {
-				echo elgg_view_entity($widget);
-			}
-
-		?>
-
-		</div><!-- /#widgets_right -->
-    </td>
-  </tr>
-  <tr>
-	<td align="left" valign="top">
-
-		<!-- left widgets -->
-		<div id="widgets_left">
-
-		<?php
-
-			if (is_array($area1widgets) && sizeof($area1widgets) > 0)
-			foreach($area1widgets as $widget) {
-				echo elgg_view_entity($widget);
-			}
-
-		?>
-
-		</div><!-- /#widgets_left -->
-
-	</td>
-	<td align="left" valign="top">
-
-		<!-- widgets middle -->
-		<div id="widgets_middle">
-
-		<?php if (isset($vars['area2'])) echo $vars['area2']; ?>
-		<?php
-
-			if (is_array($area2widgets) && sizeof($area2widgets) > 0)
-			foreach($area2widgets as $widget) {
-				echo elgg_view_entity($widget);
-			}
-
-		?>
-
-		</div><!-- /#widgets_middle -->
+	echo '</div>';
+}
 
-	</td>
-	</tr>
-</table>
+elgg_pop_context();
\ No newline at end of file
diff --git a/views/default/widgets/wrapper.php b/views/default/widgets/wrapper.php
index c89a878ca..13d8da50e 100644
--- a/views/default/widgets/wrapper.php
+++ b/views/default/widgets/wrapper.php
@@ -6,13 +6,7 @@
  * @subpackage Core
  */
 
-static $widgettypes;
-
-$callback = get_input('callback');
-
-if (!isset($widgettypes)) {
-	$widgettypes = get_widget_types();
-}
+$widgettypes = get_widget_types();
 
 if ($vars['entity'] instanceof ElggObject && $vars['entity']->getSubtype() == 'widget') {
 	$handler = $vars['entity']->handler;
@@ -25,78 +19,12 @@ if ($vars['entity'] instanceof ElggObject && $vars['entity']->getSubtype() == 'w
 	$title = elgg_echo("error");
 }
 
-if ($callback != "true") {
-
-	?>
-
-	<div id="widget<?php echo $vars['entity']->getGUID(); ?>">
-	<div class="collapsable_box">
-	<div class="collapsable_box_header">
-	<a href="javascript:void(0);" class="toggle_box_contents">-</a><?php if ($vars['entity']->canEdit()) { ?><a href="javascript:void(0);" class="toggle_box_edit_panel"><?php echo elgg_echo('edit'); ?></a><?php } ?>
-	<h1><?php echo $title; ?></h1>
+?>
+<div class="widget draggable">
+	<div class="widget_title drag_handle">
+		<h3>Widget Title</h3>
+    </div>
+    <div class="widget_content">
+		<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 	</div>
-	<?php
-
-	if ($vars['entity']->canEdit()) {
-		?>
-		<div class="collapsable_box_editpanel"><?php
-
-		echo elgg_view('widgets/editwrapper',
-		array(
-			'body' => elgg_view("widgets/{$handler}/edit",$vars),
-			'entity' => $vars['entity']
-			)
-		);
-
-		?></div><!-- /collapsable_box_editpanel -->
-		<?php
-	}
-
-	?>
-	<div class="collapsable_box_content">
-	<?php
-
-	echo "<div id=\"widgetcontent{$vars['entity']->getGUID()}\">";
-} else { // end if callback != "true"
-	if (elgg_view_exists("widgets/{$handler}/view")) {
-		echo elgg_view("widgets/{$handler}/view",$vars);
-	} else {
-		echo elgg_echo('widgets:handlernotfound');
-	}
-
-	?>
-
-	<script language="javascript">
-	$(document).ready(function(){
-		setup_avatar_menu();
-	});
-
-	</script>
-	<?php
-}
-
-if ($callback != "true") {
-		echo elgg_view('ajax/loader');
-		echo "</div>";
-
-		?>
-	</div><!-- /.collapsable_box_content -->
-	</div><!-- /.collapsable_box -->
-	</div>
-
-<script type="text/javascript">
-$(document).ready(function() {
-
-	$("#widgetcontent<?php echo $vars['entity']->getGUID(); ?>").load("<?php echo elgg_get_site_url(); ?>pg/view/<?php echo $vars['entity']->getGUID(); ?>?shell=no&username=<?php echo elgg_get_page_owner()->username; ?>&context=widget&callback=true");
-
-	// run function to check for widgets collapsed/expanded state
-	var forWidget = "widget<?php echo $vars['entity']->getGUID(); ?>";
-	widget_state(forWidget);
-
-
-});
-</script>
-
-<?php
-
-}
\ No newline at end of file
+</div>