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">
<? foreach ($resource->children as $child): ?>
<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): ?>
<img src="<?= $child->thumb_url ?>" title="<?= $child->title ?>" />
<? else: ?>

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

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

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

@ -3,5 +3,27 @@
<ul id="album_tree"><?= $album_tree ?></ul>
</div>
<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>

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

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

129
web_client/css/g3_client.css
View File

@ -1,4 +1,4 @@
#header {
#wc-header {
background-color: #E8E8E8;
left: 0px;
min-height: 90px;
@ -8,13 +8,13 @@
height: 90px;
}
#header div {
#wc-header div {
background-image: url(g3_web.png);
background-repeat: no-repeat;
height: 90px;
}
#body {
#wc-body {
background-color: #E8E8E8;
bottom: 40px;
left: 0px;
@ -23,7 +23,7 @@
top: 90px;
}
#body #content {
#wc-body #content {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
padding: 10px 20px;
@ -43,7 +43,7 @@ span.error {
color: #FF0000;
}
#footer {
#wc-footer {
background-color: #E8E8E8;
bottom: 0px;
left: 0px;
@ -53,13 +53,13 @@ span.error {
right: 0px;
}
.copyright {
.wc-copyright {
font-size: 0.9em;
text-transform: uppercase;
color: #557d10;
}
#body #login {
#wc-body #login {
background-color: #FFFFFF;
border: 2px inset;
bottom: 20px;
@ -71,7 +71,7 @@ span.error {
top: 11px;
}
#body #left {
#wc-body #left {
background-color: #FFFFFF;
border: 2px inset;
bottom: 20px;
@ -83,17 +83,22 @@ span.error {
width: 191px;
}
#body #left #album_tree {
#wc-body #left #album_tree {
height: 100%;
overflow: auto;
font-size: 1.1em;
}
#body #left #album_tree ul li {
#wc-body #left #album_tree ul li {
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;
border: 2px inset;
bottom: 20px;
@ -109,18 +114,22 @@ span.error {
cursor: pointer;
}
#body #center .thumb-grid-cell {
#wc-body #center .thumb-grid-cell {
float: left;
height: 200px;
line-height: 200px;
margin-bottom: 10px;
margin-right: 10px;
line-height: 220px;
margin: 10px;
text-align: center;
width: 200px;
}
#body #center .thumb-grid-cell img,
#body #center .thumb-grid-cell span {
#wc-body #center .thumb-grid-cell.ui-selected {
margin: 2px;
padding: 7px;
}
#wc-body #center .thumb-grid-cell img,
#wc-body #center .thumb-grid-cell span {
vertical-align: middle;
}
@ -135,6 +144,90 @@ span.error {
}
.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;
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($) {
var _current_path = "";
var _paths = [];
var _current_path = "";
$.fn.gallery3_client = function() {
return this.each(function(i) {
@ -22,13 +23,17 @@
$(obj).html(data.content);
if (data.status == "ok") {
initializeDetail(obj);
save_paths(".tree-title.ui-selected");
} else {
ajaxifyLoginForm(obj);
}
}
});
} else {
console.group("ajaxifyLoginForm");
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).addClass("ui-icon-minus");
} else {
var parent = $(this).parent("li");
var parent = $(this).parents("li:first");
$.get("/g3_client/index.php/g3_client/albums",
{path: $(parent).attr("ref")},
function(data, textStatus) {
@ -57,14 +62,12 @@
return false;
});
$("#center a.child-link").live("click", function(event) {
$("#center a.child-link").live("dblclick", function(event) {
event.preventDefault();
event.stopPropagation();
var path = $(this).parent("li").attr("ref");
var path = $(this).parents("li:first").attr("ref");
var url = $(this).attr("href");
$.get("/g3_client/index.php/g3_client/detail", {path: path}, function(data, textStatus) {
$("#center").html(data);
get_detail(path, function(path) {
var album = $("#album_tree [ref='" + path + "']");
if (album.length > 0) {
$(".ui-selected").removeClass("ui-selected");
@ -74,16 +77,77 @@
return false;
});
$(".tree-title", obj).click(function (event) {
$.get("/g3_client/index.php/g3_client/detail",
{path: $(this).parent("li").attr("ref")},
function(data, textStatus) {
$("#center").html(data);
});
$(".ui-selected").removeClass("ui-selected");
$(this).addClass("ui-selected");
$("#center a.child-link").live("click", function(event) {
$(".thumb-grid-cell.ui-selected").removeClass("ui-selected");
$(this).parents("li:first").addClass("ui-selected");
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");
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);