1
0

simplify determining the current path and parent. Change the Add Resource to a split button.

This commit is contained in:
Tim Almdal 2009-12-17 11:25:46 -08:00
parent 575bcbd22e
commit 5c5b813097
7 changed files with 103 additions and 80 deletions

View File

@ -99,6 +99,10 @@ class G3_Client_Controller extends Template_Controller {
private function _get_detail($resource) {
$v = new View("{$resource->type}_detail.html");
$v->resource = $resource;
$v->parent_path = substr($resource->path, 0, -strlen($resource->internet_address));
if (strrpos($v->parent_path, "/") == strlen($v->parent_path) - 1) {
$v->parent_path = substr($v->parent_path, 0, -1);
}
return $v;
}
} // End G3 Client Controller

View File

@ -1,14 +1,19 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<ul id="thumb-grid" class="ui-helper-clearfix">
<script>
var parent_path = "<?= $parent_path ?>";
var current_path = "<?= $resource->path ?>";
var resource_type = "album";
</script>
<ul id="wc-thumb-grid" class="ui-helper-clearfix">
<? foreach ($resource->children as $child): ?>
<li class="thumb-grid-cell" ref="<?= $child->path ?>">
<a class="child-link" href="#">
<? if ($child->has_thumb): ?>
<img src="<?= $child->thumb_url ?>" title="<?= $child->title ?>" />
<? else: ?>
<span><?= $child->title ?></span>
<? endif ?>
</a>
<li class="wc-thumb-grid-cell" ref="<?= $child->path ?>">
<a class="wc-child-link wc-image-block" href="#">
<? if ($child->has_thumb): ?>
<img src="<?= $child->thumb_url ?>" title="<?= $child->title ?>" />
<? else: ?>
<span><?= $child->title ?></span>
<? endif ?>
</a>
</li>
<? endforeach ?>
</ul>

View File

@ -4,11 +4,11 @@
</div>
<div id="center">
<div class="wc-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="wc-buttonset ui-helper-clearfix">
<a href="#" ref="first" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="First"><span class="ui-icon ui-icon-seek-first"></span>First</a>
<a href="#" ref="previous" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Previous"><span class="ui-icon ui-icon-seek-prev"></span>Previous</a>
<a href="#" ref="next" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Next"><span class="ui-icon ui-icon-seek-next"></span>Next</a>
<a href="#" ref="last" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Last"><span class="ui-icon ui-icon-seek-end"></span>Last</a>
<div class="wc-buttonset wc-buttonset-single ui-helper-clearfix">
<a href="#" ref="first" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-left" title="First"><span class="ui-icon ui-icon-seek-first"></span>First</a>
<a href="#" ref="previous" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo" title="Previous"><span class="ui-icon ui-icon-seek-prev"></span>Previous</a>
<a href="#" ref="next" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo" title="Next"><span class="ui-icon ui-icon-seek-next"></span>Next</a>
<a href="#" ref="last" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-right" title="Last"><span class="ui-icon ui-icon-seek-end"></span>Last</a>
</div>
<div class="wc-buttonset ui-helper-clearfix">
<a href="#" ref="parent" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Parent"><span class="ui-icon ui-icon-eject"></span>Parent</a>
@ -20,7 +20,8 @@
</div>
<div class="wc-buttonset wc-buttonset-single ui-helper-clearfix">
<a href="#" ref="add" class="wc-button ui-state-default wc-button-icon-solo ui-corner-all" title="Add Resource"><span class="ui-icon ui-icon-transferthick-e-w"></span>Add Resource</a>
<a href="#" id="add-resource" ref="add_album" class="wc-button ui-state-active ui-corner-left" ><span>Add Album<span></a>
<a href="#" class="wc-button ui-state-active wc-button-icon-solo ui-corner-right" title="Resources"><span class="ui-icon ui-icon-triangle-1-s"></span>&nbsp</a>
</div>
</div>
<div id="wc-detail">

View File

@ -1,5 +1,10 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<div id="movie" ref="<?= $resource->path ?>">
<script>
var parent_path = "<?= $parent_path ?>";
var current_path = "<?= $resource->path ?>";
var resource_type = "movie";
</script>
<div id="movie">
<a id="movie-link" href="<?= $resource->url ?>" title="<?= $resource->title ?>"
style="display: block; height: <?= $resource->size->height ?>px; width: <?= $resource->size->width ?>px;" />
</div>

View File

@ -1,5 +1,10 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<div id="photo" ref="<?= $resource->path ?>">
<script>
var parent_path = "<?= $parent_path ?>";
var current_path = "<?= $resource->path ?>";
var resource_type = "photo";
</script>
<div id="photo">
<img src="<?= $resource->resize_url ?>" title="<?= $resource->title ?>" />
</div>
<div id="photo-info">

View File

@ -87,6 +87,7 @@ span.error {
height: 100%;
overflow: auto;
font-size: 1.1em;
padding-top: 5px;
}
#wc-body #left #album_tree ul li {
@ -121,7 +122,12 @@ span.error {
cursor: pointer;
}
#wc-body #center .thumb-grid-cell {
#wc-body #center #wc-thumb-grid {
width: 100%;
list-style: none;
}
#wc-body #center .wc-thumb-grid-cell {
border: 1px solid transparent;
float: left;
height: 200px;
@ -132,8 +138,15 @@ span.error {
width: 200px;
}
#wc-body #center .thumb-grid-cell img,
#wc-body #center .thumb-grid-cell span {
#wc-body #center .wc-thumb-grid-cell img {
display: block;
margin: 0 auto;
padding: 5%;
width: 89%;
-ms-interpolation-mode: bicubic;
}
#wc-body #center .wc-thumb-grid-cell span {
vertical-align: middle;
}
@ -177,6 +190,14 @@ a.wc-button {
float:left;
}
a.ui-state-active {
color: #EB8F00 !important;
}
a.ui-state-default {
background: #FFFFFF;
}
/* remove extra button width in IE */
button.wc-button {
width:auto;

View File

@ -22,17 +22,13 @@
$(obj).html(data.content);
if (data.status == "ok") {
initializeDetail(obj);
save_paths($(".tree-title.ui-selected").parents("li:first").attr("ref"));
} else {
} else {
ajaxifyLoginForm(obj);
}
}
});
} else {
console.group("ajaxifyLoginForm");
initializeDetail(obj);
save_paths($(".tree-title.ui-selected").parents("li:first").attr("ref"));
console.groupEnd();
}
};
@ -61,48 +57,42 @@
return false;
});
$("#center a.child-link").live("dblclick", function(event) {
$("#center a.wc-child-link").live("dblclick", function(event) {
event.preventDefault();
event.stopPropagation();
var path = $(this).parents("li:first").attr("ref");
var url = $(this).attr("href");
get_detail(path, function(path) {
var album = $("#album_tree [ref='" + path + "']");
if (album.length > 0) {
$(".tree-title.ui-selected").removeClass("ui-selected");
$(".tree-title", album).addClass("ui-selected");
}
});
get_detail(path, _set_active_album);
return false;
});
$("#center a.child-link").live("click", function(event) {
$(".thumb-grid-cell.ui-selected").removeClass("ui-selected");
$("#center a.wc-child-link").live("click", function(event) {
$(".wc-thumb-grid-cell.ui-selected").removeClass("ui-selected");
$(this).parents("li:first").addClass("ui-selected");
_set_navigation_buttons($(".thumb-grid-cell.ui-selected").attr("ref"));
_set_navigation_buttons($(".wc-thumb-grid-cell.ui-selected").attr("ref"));
return false;
});
$(".wc-button").live("click", function() {
if ($(this).parent("a").hasClass("ui-state-disabled")) {
if ($(this).hasClass("ui-state-disabled")) {
return false;
}
var selected = $(".thumb-grid-cell.ui-selected");
switch ($(this).attr("ref")) {
case "parent":
get_detail($("span", this).attr("ref"));
get_detail($("span", this).attr("ref"), _set_active_album);
break;
case "first":
case "previous":
case "next":
case "last":
if (selected.length == 0) {
if (resource_type != "album") {
get_detail($("span", this).attr("ref"));
} else {
var selected = $(".wc-thumb-grid-cell.ui-selected");
selected.removeClass("ui-selected");
switch ($(this).attr("ref")) {
case "first":
$(".thumb-grid-cell:first").addClass("ui-selected");
$(".wc-thumb-grid-cell:first").addClass("ui-selected");
break;
case "previous":
selected.prev().addClass("ui-selected");
@ -111,8 +101,7 @@
selected.next().addClass("ui-selected");
break;
case "last":
$(".thumb-grid-cell:last").addClass("ui-selected");
_set_navigation_buttons();
$(".wc-thumb-grid-cell:last").addClass("ui-selected");
break;
}
_set_navigation_buttons();
@ -135,68 +124,60 @@
$("#album_tree [ref=''] .tree-title:first").addClass("ui-selected");
set_selected_thumb();
};
save_paths();
}
function _set_active_album(path) {
var album = $("#album_tree [ref='" + path + "']");
if (album.length > 0) {
$(".tree-title.ui-selected").removeClass("ui-selected");
$(".tree-title:first", album).addClass("ui-selected");
}
}
function set_selected_thumb() {
if ($(".thumb-grid-cell.ui-selected").length == 0) {
$(".thumb-grid-cell:first").addClass("ui-selected");
if ($(".wc-thumb-grid-cell.ui-selected").length == 0) {
$(".wc-thumb-grid-cell:first").addClass("ui-selected");
}
}
function get_detail(path, callback) {
$.get("/g3_client/index.php/g3_client/detail", {path: path}, function(data, textStatus) {
console.group("get_detail.get callback");
$("#wc-detail").html(data);
set_selected_thumb();
save_paths(path);
save_paths();
if (callback) {
callback(path);
}
console.groupEnd();
});
}
function save_paths(path) {
_paths[path] = [];
$(".thumb-grid-cell").each(function(i) {
_paths[path][i] = $(this).attr("ref");
function save_paths() {
_paths[current_path] = [];
$(".wc-thumb-grid-cell").each(function(i) {
_paths[current_path][i] = $(this).attr("ref");
});
console.dir(_paths);
enable_toolbar_buttons(path);
_set_navigation_buttons();
}
function enable_toolbar_buttons(path) {
if (path != "") {
function _set_navigation_buttons() {
if (current_path != "") {
$(".wc-toolbar .ui-icon-eject").parent("a").removeClass("ui-state-disabled");
$(".wc-toolbar .ui-icon-trash").parent("a").removeClass("ui-state-disabled");
} else {
$(".wc-toolbar .ui-icon-eject").parent("a").addClass("ui-state-disabled");
$(".wc-toolbar .ui-icon-trash").parent("a").addClass("ui-state-disabled");
}
$(".wc-toolbar .ui-icon-eject").attr("ref", _get_parent_path(path));
$(".wc-toolbar .ui-icon-pencil").attr("ref", path);
$(".wc-toolbar .ui-icon-eject").attr("ref", parent_path);
$(".wc-toolbar .ui-icon-pencil").attr("ref", current_path);
$(".wc-toolbar .ui-icon-trash").attr("ref", current_path);
$(".wc-toolbar #add-resource span")
.attr("ref", resource_type == "album" ? current_path : parent_path);
_set_navigation_buttons();
}
function _get_parent_path(path) {
var idx = path.lastIndexOf("/");
return idx != -1 ? path.substring(0, idx) : "";
}
function _set_navigation_buttons() {
var selected_path = $(".thumb-grid-cell.ui-selected").attr("ref");
if (selected_path == undefined) { // not found must be photo or movie
selected_path = $("#wc-detail div:first").attr("ref");
}
var parent_path = _get_parent_path(selected_path);
console.log("path: " + selected_path + "; parent_path: " + parent_path);
var paths = _paths[parent_path];
console.group("parent path");
console.dir(paths);
console.groupEnd();
var paths = _paths[resource_type == "album" ? current_path : parent_path];
$(".wc-toolbar .ui-icon-pencil").attr("ref", current_path);
if (paths.length > 0) {
$(".wc-toolbar .ui-icon-seek-first").parent("a").removeClass("ui-state-disabled");
$(".wc-toolbar .ui-icon-seek-end").parent("a").removeClass("ui-state-disabled");
@ -207,6 +188,8 @@
$(".wc-toolbar .ui-icon-seek-end").parent("a").addClass("ui-state-disabled");
}
var selected_path =
resource_type == "album" ? $(".wc-thumb-grid-cell.ui-selected").attr("ref") : current_path;
var i = 0;
for (; i < paths.length; i++) {
if (paths[i] == selected_path) {
@ -228,6 +211,5 @@
$(".wc-toolbar .ui-icon-seek-next").parent("a").addClass("ui-state-disabled");
$(".wc-toolbar .ui-icon-seek-end").parent("a").addClass("ui-state-disabled");
}
console.log("found path: " + paths[i]);
}
})(jQuery);
})(jQuery);