Commit 7497db25 authored by Nigel McNie's avatar Nigel McNie
Browse files

Added a testing file for designing the frontend of the new views interface.

Currently contains a bunch of hardcoded data that needs translating into api calls, a javascript overlay file for the rich UI, a CSS file for laying out the UI page, a smarty template for the HTML, and a metric ton of work still to do.
parent 8bf5c598
/**
* Javascript for the new views interface
*
* Author: Nigel McNie
*/
function ViewManager() {
var self = this;
this.init = function () {
// Hide 'new block here' buttons
forEach(getElementsByTagAndClassName('input', 'newblockhere', 'bottom-pane'), function(i) {
removeElement(i);
});
// Hide controls in each block instance that are not needed
forEach(getElementsByTagAndClassName('input', 'movebutton', 'bottom-pane'), function(i) {
removeElement(i);
});
// Remove radio buttons for moving block types into place
forEach(getElementsByTagAndClassName('input', 'blocktype-radio', 'top-pane'), function(i) {
removeElement(i);
});
// Rewrite the links in the category select list to be ajax
forEach(getElementsByTagAndClassName('a', null, 'category-list'), function(i) {
connect(i, 'onclick', function(e) {
var queryString = parseQueryString(i.href.substr(i.href.indexOf('?')));
removeElementClass(getFirstElementByTagAndClassName('li', 'current', 'category-list'), 'current');
addElementClass(i.parentNode, 'current');
sendjsonrequest('viewrework.json.php', {'action': 'blocktype_list', 'category': queryString['category']}, 'POST', function(data) {
if (!data.error) {
$('blocktype-list').innerHTML = data.data;
}
});
e.stop();
});
});
// Rewrite the delete buttons to be ajax
forEach(getElementsByTagAndClassName('input', 'deletebutton', 'bottom-pane'), function(i) {
connect(i, 'onclick', function(e) {
sendjsonrequest('viewrework.json.php', {'action': 'delete_blockinstance', 'data': e.src().getAttribute('name')}, 'POST', function(data) {
if (!data.error) {
removeElement(i.parentNode.parentNode);
}
else {
// ?
}
});
e.stop();
});
});
}
addLoadEvent(self.init);
}
viewManager = new ViewManager();
{include file="header.tpl"}
{include file="columnfullstart.tpl"}
<form action="" method="post">
<div id="page">
<div id="top-pane">
<div id="category-list">
<ul>
{foreach from=$categories.cats item=category}
<li{if $category.classes} class="{$category.classes}"{/if}><a href="viewrework.php?category={$category.name|escape}">{$category.title|escape}</a></li>
{/foreach}
</ul>
</div>
<div id="blocktype-list">
<ul>
{foreach from=$blocktypes item=blocktype}
<li>
<img src="{$blocktype.thumbnail_path}" alt="Preview">
<h3>{$blocktype.title|escape}</h3>
<p>{$blocktype.description|escape}</p>
<input type="radio" class="blocktype-radio" name="blocktype" value="blocktype_{$blocktype.id}">
</li>
{/foreach}
</ul>
</div>
<div id="blocktype-footer"></div>
</div>
<div id="bottom-pane">
<div id="column-container">
{foreach from=$columns.columns key=colnum item=column}
<div class="column columns{$columns.count}">
<div class="column-header">
{if $colnum == 1}
<div class="add-column-left">
<input type="submit" class="submit" name="add_column_before_1" value="Add Column">
</div>
{/if}
<div class="remove-column">
<input type="submit" class="submit" name="remove_column_{$colnum}" value="Remove Column">
</div>
{if $colnum == $columns.count}
<div class="add-column-right">
<input type="submit" class="submit" name="add_column_before_{$colnum+1}" value="Add Column">
</div>
{else}
<div class="add-column-center">
<input type="submit" class="submit" name="add_column_before_{$colnum+1}" value="Add Column">
</div>
{/if}
</div>
<div class="column-content">
<input type="submit" class="submit newblockhere" name="blocktype_add_top_{$colnum}" value="Add new block here">
{foreach from=$column.blockinstances item=blockinstance}
<div class="blockinstance" id="blockinstance_{$blockinstance.id}">
<div class="blockinstance-header">
<h4>{$blockinstance.title|escape}</h4>
</div>
<div class="blockinstance-controls">
{if $blockinstance.canmoveleft}<input type="submit" class="submit movebutton" name="blockinstance_{$blockinstance.id}_moveleft" value="&larr;">{/if}
{if $blockinstance.canmovedown}<input type="submit" class="submit movebutton" name="blockinstance_{$blockinstance.id}_movedown" value="&darr;">{/if}
{if $blockinstance.canmoveup}<input type="submit" class="submit movebutton" name="blockinstance_{$blockinstance.id}_moveup" value="&uarr;">{/if}
{if $blockinstance.canmoveright}<input type="submit" class="submit movebutton" name="blockinstance_{$blockinstance.id}_moveright" value="&rarr;">{/if}
<input type="submit" class="submit deletebutton" name="blockinstance_{$blockinstance.id}_delete" value="X">
</div>
<div class="blockinstance-content">
{$blockinstance.content}
</div>
</div>
<input type="submit" class="submit newblockhere" name="blocktype_add_after_{$blockinstance.id}" value="Add new block here">
{/foreach}
</div>
</div>
{/foreach}
<div id="clearer">
This is footer content
</div>
</div>
</div>
</div>
</form>
{include file="columnfullend.tpl"}
{include file="footer.tpl"}
<?php
/**
* This program is part of Mahara
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*
* @package mahara
* @subpackage core
* @author Nigel McNie <nigel@catalyst.net.nz>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL
* @copyright (C) 2006,2007 Catalyst IT Ltd http://catalyst.net.nz
*
*/
define('INTERNAL', 1);
define('JSON', 1);
define('PUBLIC', 1);
require(dirname(__FILE__) . '/init.php');
$action = param_alphanumext('action');
switch ($action) {
case 'delete_blockinstance':
// @todo
json_reply(false, false);
break;
case 'blocktype_list':
$category = param_alpha('category');
// TODO:
// Put the logic for generating the blocktype list into one function.
// Call this function both here, and somewhere so it ends up in the static page
// NOTE: if javascript is enabled (e.g. the call comes from json), then things like the radio buttons don't have to be output
// Work on this until it works both with javascript enabled and disabled
//
// Where I can get to:
// Static version: Clicking buttons = response, but no action. Category browser works, for hard coded block types
// Dynamic version: Actions = response, but no action performed. Category browser works with ajax for hard coded block types
//
// What can be done:
// Category browser
// Add column: js should make room for it, put in the raw html (note: need to generate column raw html in a function then!)
// Remove column: js should destroy the existing column, hopefully moving the blocks to other columns (could be implemented as move move delete?)
// Moving block instances: js should drag+drop, do ajax stub request. static should send response
// Add block: js should be done by drag and drop. static should respond
//
//
//
//
//
//
// Need to duplicate this smarty logic somewhere
// <ul>
//{foreach from=$blocktypes item=blocktype}
// <li>
// <img src="{$blocktype.thumbnail_path}" alt="Preview">
// <h3>{$blocktype.title|escape}</h3>
// <p>{$blocktype.description|escape}</p>
// <input type="radio" class="blocktype-radio" name="blocktype" value="blocktype_{$blocktype.id}">
// </li>
//{/foreach}
// </ul>
$data = '<ul>
<li>
<img src="" alt="Preview">
<h3>Test</h3>
<p>Description</p>
<input type="radio">
</li>
</ul>';
json_reply(false, array('message' => false, 'data' => $data));
break;
}
json_reply(true, 'Unknown action "' . $action . '"');
?>
<?php
/**
* This program is part of Mahara
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*
* @package mahara
* @subpackage core
* @author Nigel McNie <nigel@catalyst.net.nz>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL
* @copyright (C) 2006,2007 Catalyst IT Ltd http://catalyst.net.nz
*
*/
define('INTERNAL', 1);
define('PUBLIC', 1);
define('MENUITEM', 'viewrework');
require('init.php');
define('TITLE', 'Views Rework [DANGER construction site]');
require_once('artefact.php');
rebuild_artefact_parent_cache_complete();
$smarty = smarty(array('views'), array('<link rel="stylesheet" href="views.css" type="text/css">'));
// Categories
$categories = array(
'cats' => array(
array(
'name' => 'aboutme',
'title' => 'About Me',
),
array(
'name' => 'blogs',
'title' => 'Blogs',
),
array(
'name' => 'filesandfolders',
'title' => 'Files and Folders',
),
array(
'name' => 'general',
'title' => 'General',
),
array(
'name' => 'system',
'title' => 'System Blocks',
),
),
'current' => 'aboutme',
);
$flag = false;
foreach ($categories['cats'] as &$category) {
if (!$flag) {
$flag = true;
$category['classes'] = 'first';
}
if ($categories['current'] == $category['name']) {
$category['classes'] = (isset($category['classes'])) ? $category['classes'] . ' current' : 'current';
// certainly done now
break;
}
}
$smarty->assign('categories', $categories);
// Block types for the selected category
$blocktypes = array(
array(
'id' => 1,
'name' => 'blocktype1',
'title' => 'Block Type 1',
'description' => 'This is the description for block type 1',
'thumbnail_path' => 'theme/default/static/images/no_thumbnail.gif',
),
array(
'id' => 2,
'name' => 'blocktype2',
'title' => 'Block Type 2',
'description' => 'This is the description for block type 2',
'thumbnail_path' => 'theme/default/static/images/no_thumbnail.gif',
),
array(
'id' => 3,
'name' => 'blocktype3',
'title' => 'Block Type 3',
'description' => 'This is the description for block type 3',
'thumbnail_path' => 'theme/default/static/images/no_thumbnail.gif',
),
array(
'id' => 4,
'name' => 'blocktype4',
'title' => 'Block Type 4',
'description' => 'This is the description for block type 4',
'thumbnail_path' => 'theme/default/static/images/no_thumbnail.gif',
),
);
$smarty->assign('blocktypes', $blocktypes);
// Column 3 blocks (temporary!)
$columns = array(
'columns' => array(
// First column
1 => array(
'blockinstances' => array(
array(
'id' => 1,
'title' => 'Block Instance 1',
'content' => '
<div class="fl" style="margin-right: 1em;">
<img src="theme/default/static/images/no_userphoto100x100.gif" alt="Profile Image">
</div>
<h4>Nigel McNie</h4>
<ul style="list-style-type: none;">
<li><strong>Personal Website:</strong> <a href="http://nigel.mcnie.name/">nigel.mcnie.name</a></li>
<li><strong>City:</strong> Wellington</li>
<li><strong>Occupation:</strong> Engineer</li>
</ul>
<div style="clear:both;"></div>',
'canmoveleft' => false,
'canmoveright' => true,
'canmoveup' => false,
'canmovedown' => true,
),
array(
'id' => 2,
'title' => 'Block Instance 2',
'content' => '
<div class="fl" style="margin-right: 1em;">
<img src="theme/default/static/images/no_userphoto100x100.gif" alt="Profile Image">
</div>
<h4>Nigel McNie</h4>
<ul style="list-style-type: none;">
<li><strong>Personal Website:</strong> <a href="http://nigel.mcnie.name/">nigel.mcnie.name</a></li>
<li><strong>City:</strong> Wellington</li>
<li><strong>Occupation:</strong> Engineer</li>
</ul>
<div style="clear:both;"></div>',
'canmoveleft' => false,
'canmoveright' => true,
'canmoveup' => true,
'canmovedown' => false,
),
),
),
// Second column
2 => array(
'blockinstances' => array(
array(
'id' => 3,
'title' => 'Block Instance 3',
'content' => '
<h4>Recent Blog Posts for \'My Holiday in Scotland\'</h4>
<ul>
<li><a href="">Edinburgh is a dangerous place</a></li>
<li><a href="">I thought I saw Gordon!</a></li>
<li><a href="">There\'s no monster at Loch Ness</a></li>
<li><a href="">Synchronicity II</a></li>
</ul>',
'canmoveleft' => true,
'canmoveright' => true,
'canmoveup' => false,
'canmovedown' => true,
),
array(
'id' => 4,
'title' => 'Block Instance 4',
'content' => '
<h4>Recent Blog Posts for \'My Holiday in Scotland\'</h4>
<ul>
<li><a href="">Edinburgh is a dangerous place</a></li>
<li><a href="">I thought I saw Gordon!</a></li>
<li><a href="">There\'s no monster at Loch Ness</a></li>
<li><a href="">Synchronicity II</a></li>
</ul>',
'canmoveleft' => true,
'canmoveright' => true,
'canmoveup' => true,
'canmovedown' => true,
),
array(
'id' => 5,
'title' => 'Block Instance 5',
'content' => '
<h4>Recent Blog Posts for \'My Holiday in Scotland\'</h4>
<ul>
<li><a href="">Edinburgh is a dangerous place</a></li>
<li><a href="">I thought I saw Gordon!</a></li>
<li><a href="">There\'s no monster at Loch Ness</a></li>
<li><a href="">Synchronicity II</a></li>
</ul>',
'canmoveleft' => true,
'canmoveright' => true,
'canmoveup' => true,
'canmovedown' => false,
),
),
),
// Third column
3 => array(
'blockinstances' => array(
array(
'id' => 6,
'title' => 'Block Instance 6',
'content' => 'The time is now <strong>' . date('h:i:s a') . '</strong>',
'canmoveleft' => true,
'canmoveright' => false,
'canmoveup' => false,
'canmovedown' => true,
),
array(
'id' => 7,
'title' => 'Block Instance 7',
'content' => 'The date is now <strong>' . date('d/m/Y') . '</strong>',
'canmoveleft' => true,
'canmoveright' => false,
'canmoveup' => true,
'canmovedown' => false,
),
),
),
),
'count' => 3
);
$smarty->assign('columns', $columns);
$smarty->display('viewrework.tpl');
?>
/**
* Views stylesheet
*/
#page {
border: 3px solid #ccc;
}
#top-pane {
border-bottom: 3px solid #ccc;
background-color: #fffff0;
}
#category-list {
float: left;
}
#category-list ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 150px;
}
#category-list li {
padding: .5em;
border-bottom: 1px solid #ccc;
background-color: #f0f0f0;
border-right: 3px solid #ccc;
}
#category-list li.current {
font-weight: bold;
background-color: #fffff0;
border-right: none;
}
#category-list li.first {
border-top: none;
}
#blocktype-list {
overflow: scroll;
}
/* don't ask... fixing some wierd firefox problem */
#blocktype-list * {
margin: 0;
}
#blocktype-list ul {
list-style-type: none;
/*width: 65em;*/
}
#blocktype-list li {
float: left;
text-align: center;
margin: 1em 1em 0;
}
#blocktype-list li h3 {
font-size: .8em;
}
#blocktype-list li p {
font-size: .8em;
}
#blocktype-footer {
clear: left;
}
/* the div containing all the columns */
#column-container {
width: 100%;
margin-top: 1em;
}
/* each column div will have a class matching one of these, the number is the number of columns in total, so widths can be made equal */
.columns1 {
width: 100%;
}
.columns2 {
width: 50%;
}
.columns3 {
width: 31%;
}
.column {
vertical-align: top;
float: left;
margin: 0 0 0 2%;
}
.column-header {
width: 100%;
position: relative;
}
/* contains the left-most 'add column' button */
.add-column-left {
position: absolute;
top: 0;
left: 0;
}
/* contains all add column buttons in the middle of two columns */
.add-column-center {
position: absolute;
top: 0;
right: -5em;
width: 10em;
text-align: center;
}
/* contains the right most column */
.add-column-right {
position: absolute;
top: 0;
right: 0;
}
/* contains the 'remove column' buttons */
.remove-column {
text-align: center;
}
/* block instance styles */
.blockinstance {
border: 2px solid #cc9;
position: relative;
margin-top: 1em;
}
.blockinstance-header h4 {
margin: 0;
padding: .25em;
border-bottom: 2px solid #cc9;
}