public/gallery3-contrib
Archived
1
0
Fork 0
Code Releases Activity

Add a toolbar to the g3 remote client and add the functionality for 'return to parent'

Browse Source
This commit is contained in:
Tim Almdal 2009-12-16 11:51:45 -08:00
parent c075accb63
commit fc71b2341a
6 changed files with 227 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web_client/application/views/album_detail.html.php
View File

@ -2,7 +2,7 @@
<ul id="thumb-grid" class="ui-helper-clearfix"> <ul id="thumb-grid" class="ui-helper-clearfix">
<? foreach ($resource->children as $child): ?> <? foreach ($resource->children as $child): ?>
<li class="thumb-grid-cell" ref="<?= $child->path ?>"> <li class="thumb-grid-cell" ref="<?= $child->path ?>">
<a class="child-link" href="/g3_client/index.php/g3_client/detail"> <a class="child-link" href="#">
<? if ($child->has_thumb): ?> <? if ($child->has_thumb): ?>
<img src="<?= $child->thumb_url ?>" title="<?= $child->title ?>" /> <img src="<?= $child->thumb_url ?>" title="<?= $child->title ?>" />
<? else: ?> <? else: ?>

10
web_client/application/views/g3_template.html.php
View File

@ -22,20 +22,20 @@
<?= html::script("js/g3_client.js") ?> <?= html::script("js/g3_client.js") ?>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
$("#body").gallery3_client(); $("#wc-body").gallery3_client();
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="doc4" class="yui-t5"> <div id="doc4" class="yui-t5">
<div id="header" class="ui-helper-clearfix"> <div id="wc-header" class="ui-helper-clearfix">
<div>&nbsp;</div> <div>&nbsp;</div>
</div> </div>
<div id="body"> <div id="wc-body">
<?= $content ?> <?= $content ?>
</div> </div>
<div id="footer" class="ui-helper-clearfix"> <div id="wc-footer" class="ui-helper-clearfix">
<p class="copyright"> <p class="wc-copyright">
<?= __('Rendered in {execution_time} seconds, using {memory_usage} of memory')?><br /> <?= __('Rendered in {execution_time} seconds, using {memory_usage} of memory')?><br />
Copyright ©2009–2010 Gallery Team Copyright ©2009–2010 Gallery Team
</p> </p>

24
web_client/application/views/main.html.php
View File

@ -3,5 +3,27 @@
<ul id="album_tree"><?= $album_tree ?></ul> <ul id="album_tree"><?= $album_tree ?></ul>
</div> </div>
<div id="center"> <div id="center">
<?= $detail ?> <div class="wc-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="wc-buttonset ui-helper-clearfix">
<a href="#" 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="#" 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="#" 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="#" 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>
<div class="wc-buttonset ui-helper-clearfix">
<a href="#" 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>
</div>
<div class="wc-buttonset ui-helper-clearfix">
<a href="#" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Edit"><span class="ui-icon ui-icon-pencil"></span>Edit</a>
<a href="#" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Delete"><span class="ui-icon ui-icon-trash"></span>Delete</a>
</div>
<div class="wc-buttonset wc-buttonset-single ui-helper-clearfix">
<a href="#" 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>
</div>
</div>
<div id="wc-detail">
<?= $detail ?>
</div>
</div> </div>

12
web_client/application/views/tree_part.html.php
View File

@ -1,12 +1,16 @@
<?php defined("SYSPATH") or die("No direct script access.") ?> <?php defined("SYSPATH") or die("No direct script access.") ?>
<li class="ui-icon-left" ref="<?= $element->path ?>"> <li class="ui-icon-left" ref="<?= $element->path ?>">
<span class="<?= count($element->children) > 0 ? "ui-icon ui-icon-minus" : "ui-icon-none" ?>" >&nbsp;</span> <div class="ui-state-default">
<span class="tree-title"><?= $element->title ?></span> <span class="<?= count($element->children) > 0 ? "ui-icon ui-icon-minus" : "ui-icon-none" ?>" >&nbsp;</span>
<span class="tree-title"><?= $element->title ?></span>
</div>
<ul class="ui-helper-clearfix tree-chidren"> <ul class="ui-helper-clearfix tree-chidren">
<? foreach ($element->children as $child): ?> <? foreach ($element->children as $child): ?>
<li ref="<?= $child->path ?>" class="ui-icon-left"> <li ref="<?= $child->path ?>" class="ui-icon-left">
<span class="<?= $child->has_children ? "ui-icon ui-icon-plus" : "ui-icon-none" ?>">&nbsp;</span> <div class="ui-state-default">
<span class="tree-title"><?= $child->title ?></span> <span class="<?= $child->has_children ? "ui-icon ui-icon-plus" : "ui-icon-none" ?>">&nbsp;</span>
<span class="tree-title"><?= $child->title ?></span>
</div>
</li> </li>
<? endforeach ?> <? endforeach ?>
</ul> </ul>

129
web_client/css/g3_client.css
View File

@ -1,4 +1,4 @@
#header { #wc-header {
background-color: #E8E8E8; background-color: #E8E8E8;
left: 0px; left: 0px;
min-height: 90px; min-height: 90px;
@ -8,13 +8,13 @@
height: 90px; height: 90px;
} }
#header div { #wc-header div {
background-image: url(g3_web.png); background-image: url(g3_web.png);
background-repeat: no-repeat; background-repeat: no-repeat;
height: 90px; height: 90px;
} }
#body { #wc-body {
background-color: #E8E8E8; background-color: #E8E8E8;
bottom: 40px; bottom: 40px;
left: 0px; left: 0px;
@ -23,7 +23,7 @@
top: 90px; top: 90px;
} }
#body #content { #wc-body #content {
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
padding: 10px 20px; padding: 10px 20px;
@ -43,7 +43,7 @@ span.error {
color: #FF0000; color: #FF0000;
} }
#footer { #wc-footer {
background-color: #E8E8E8; background-color: #E8E8E8;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
@ -53,13 +53,13 @@ span.error {
right: 0px; right: 0px;
} }
.copyright { .wc-copyright {
font-size: 0.9em; font-size: 0.9em;
text-transform: uppercase; text-transform: uppercase;
color: #557d10; color: #557d10;
} }
#body #login { #wc-body #login {
background-color: #FFFFFF; background-color: #FFFFFF;
border: 2px inset; border: 2px inset;
bottom: 20px; bottom: 20px;
@ -71,7 +71,7 @@ span.error {
top: 11px; top: 11px;
} }
#body #left { #wc-body #left {
background-color: #FFFFFF; background-color: #FFFFFF;
border: 2px inset; border: 2px inset;
bottom: 20px; bottom: 20px;
@ -83,17 +83,22 @@ span.error {
width: 191px; width: 191px;
} }
#body #left #album_tree { #wc-body #left #album_tree {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
font-size: 1.1em; font-size: 1.1em;
} }
#body #left #album_tree ul li { #wc-body #left #album_tree ul li {
padding: 0 0 .2em 1.2em; padding: 0 0 .2em 1.2em;
} }
#body #center { #wc-body #left #album_tree div {
border: none !important;
background: none !important;
}
#wc-body #center {
background-color: #FFFFFF; background-color: #FFFFFF;
border: 2px inset; border: 2px inset;
bottom: 20px; bottom: 20px;
@ -109,18 +114,22 @@ span.error {
cursor: pointer; cursor: pointer;
} }
#body #center .thumb-grid-cell { #wc-body #center .thumb-grid-cell {
float: left; float: left;
height: 200px; height: 200px;
line-height: 200px; line-height: 220px;
margin-bottom: 10px; margin: 10px;
margin-right: 10px;
text-align: center; text-align: center;
width: 200px; width: 200px;
} }
#body #center .thumb-grid-cell img, #wc-body #center .thumb-grid-cell.ui-selected {
#body #center .thumb-grid-cell span { margin: 2px;
padding: 7px;
}
#wc-body #center .thumb-grid-cell img,
#wc-body #center .thumb-grid-cell span {
vertical-align: middle; vertical-align: middle;
} }
@ -135,6 +144,90 @@ span.error {
} }
.ui-selected { .ui-selected {
background-color: #E8E8E8; background: #F6F6F6 url(images/ui-bg_glass_100_f6f6f6_1x400png) repeat-x scroll 50% 50%;
border: 1px solid #CCCCCC;
//background-color: #E8E8E8;
color: #FF9933; color: #FF9933;
padding: 0 5px;
}
.wc-button {
outline: 0;
margin:0 4px 0 0;
padding: .4em 1em;
text-decoration:none !important;
cursor:pointer;
position: relative;
text-align: center;
zoom: 1;
}
.wc-button .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
left: 50%;
margin-left: -8px;
}
a.wc-button {
float:left;
}
/* remove extra button width in IE */
button.wc-button {
width:auto;
overflow:visible;
}
.wc-button-icon-left {
padding-left: 2.1em;
}
.wc-button-icon-right {
padding-right: 2.1em;
}
.wc-button-icon-left .ui-icon {
right: auto;
left: .2em;
margin-left: 0;
}
.wc-button-icon-right .ui-icon {
left: auto;
right: .2em;
margin-left: 0;
}
.wc-button-icon-solo { /* solo icon buttons must have block properties for the text-indent to work */
display: block;
width: 8px;
text-indent: -9999px;
}
.wc-buttonset {
float: left;
}
.wc-buttonset .wc-button {
float: left;
}
.wc-buttonset-single .wc-button,
.wc-buttonset-multi .wc-button {
margin-right: -1px;
}
.wc-toolbar {
padding: .5em;
margin: 0;
}
.wc-toolbar .wc-buttonset {
margin-right:1.5em;
padding-left: 1px;
}
.wc-toolbar .wc-button {
font-size: 1em;
} }

94
web_client/js/g3_client.js
View File

@ -1,5 +1,6 @@
(function($) { (function($) {
var _current_path = ""; var _paths = [];
var _current_path = "";
$.fn.gallery3_client = function() { $.fn.gallery3_client = function() {
return this.each(function(i) { return this.each(function(i) {
@ -22,13 +23,17 @@
$(obj).html(data.content); $(obj).html(data.content);
if (data.status == "ok") { if (data.status == "ok") {
initializeDetail(obj); initializeDetail(obj);
save_paths(".tree-title.ui-selected");
} else { } else {
ajaxifyLoginForm(obj); ajaxifyLoginForm(obj);
} }
} }
}); });
} else { } else {
console.group("ajaxifyLoginForm");
initializeDetail(obj); initializeDetail(obj);
save_paths($(".tree-title.ui-selected").parents("li:first").attr("ref"));
console.groupEnd();
} }
}; };
@ -40,7 +45,7 @@
$(this).removeClass("ui-icon-plus"); $(this).removeClass("ui-icon-plus");
$(this).addClass("ui-icon-minus"); $(this).addClass("ui-icon-minus");
} else { } else {
var parent = $(this).parent("li"); var parent = $(this).parents("li:first");
$.get("/g3_client/index.php/g3_client/albums", $.get("/g3_client/index.php/g3_client/albums",
{path: $(parent).attr("ref")}, {path: $(parent).attr("ref")},
function(data, textStatus) { function(data, textStatus) {
@ -57,14 +62,12 @@
return false; return false;
}); });
$("#center a.child-link").live("click", function(event) { $("#center a.child-link").live("dblclick", function(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
var path = $(this).parent("li").attr("ref"); var path = $(this).parents("li:first").attr("ref");
var url = $(this).attr("href"); var url = $(this).attr("href");
get_detail(path, function(path) {
$.get("/g3_client/index.php/g3_client/detail", {path: path}, function(data, textStatus) {
$("#center").html(data);
var album = $("#album_tree [ref='" + path + "']"); var album = $("#album_tree [ref='" + path + "']");
if (album.length > 0) { if (album.length > 0) {
$(".ui-selected").removeClass("ui-selected"); $(".ui-selected").removeClass("ui-selected");
@ -74,16 +77,77 @@
return false; return false;
}); });
$(".tree-title", obj).click(function (event) { $("#center a.child-link").live("click", function(event) {
$.get("/g3_client/index.php/g3_client/detail", $(".thumb-grid-cell.ui-selected").removeClass("ui-selected");
{path: $(this).parent("li").attr("ref")}, $(this).parents("li:first").addClass("ui-selected");
function(data, textStatus) {
$("#center").html(data);
});
$(".ui-selected").removeClass("ui-selected");
$(this).addClass("ui-selected");
return false; return false;
}); });
$(".wc-button").live("click", function() {
if ($(this).parent("a").hasClass("ui-state-disabled")) {
return false;
}
if ($("span", this).hasClass("ui-icon-eject")) {
get_detail($("span", this).attr("ref"));
}
return false;
});
$(".tree-title", obj).live("click", function (event) {
get_detail($(this).parents("li:first").attr("ref"));
$(".ui-selected").removeClass("ui-selected");
$(this).addClass("ui-selected");
return false;
});
$("#album_tree [ref=''] .tree-title:first").addClass("ui-selected"); $("#album_tree [ref=''] .tree-title:first").addClass("ui-selected");
set_selected_thumb();
}; };
function set_selected_thumb() {
if ($(".thumb-grid-cell.ui-selected").length == 0) {
$(".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);
if (callback != undefined) {
callback(path);
}
_current_path = path;
console.groupEnd();
});
}
function save_paths(path) {
_paths[path] = [];
$(".thumb-grid-cell").each(function(i) {
var item_path = $(this).attr("ref");
var idx = item_path.lastIndexOf("/");
_paths[path][i] = idx != -1 ? item_path.substr(idx + 1) : item_path;
});
console.dir(_paths);
enable_toolbar_buttons(path);
}
function enable_toolbar_buttons(path) {
var idx = path.lastIndexOf("/");
var parent_path = "";
if (idx != -1) {
parent_path = path.substring (0, idx);
}
console.log("path: " + path + "; parent_path: " + parent_path);
if (path != "") {
$(".wc-toolbar .ui-icon-eject").parent("a").removeClass("ui-state-disabled");
} else {
$(".wc-toolbar .ui-icon-eject").parent("a").addClass("ui-state-disabled");
}
$(".wc-toolbar .ui-icon-eject").attr("ref", parent_path);
}
})(jQuery); })(jQuery);