Merge branch 'js-classes'

This commit is contained in:
Shish 2012-08-15 21:26:56 +01:00
commit 6fcdf4717e
21 changed files with 122 additions and 137 deletions

View File

@ -101,6 +101,22 @@ For a list of permissions, see core/userclass.class.php
Development Info
~~~~~~~~~~~~~~~~
ui-* cookies are for the client-side scripts only; in some configurations
(eg with varnish cache) they will be stripped before they reach the server
shm-* CSS classes are for javascript to hook into; if you're customising
themes, be careful with these, and avoid styling them, eg:
- shm-thumb = outermost element of a thumbnail
- data-tags
- data-post-id
- shm-toggler = click this to toggle elements that match the selector
- data-toggle-sel
- shm-unlocker = click this to unlock elements that match the selector
- data-unlock-sel
- shm-clink = a link to a comment, flash the target element when clicked
- data-clink-sel
http://shimmie.shishnet.org/doc/
Please tell me if those docs are lacking in any way, so that they can be

View File

@ -54,9 +54,9 @@ class BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return '<a href="'.$h_view_link.'" class="thumb" data-tags="'.$h_tags.'">'.
'<img id="thumb_'.$i_id.'" title="'.$h_tip.'" alt="'.$h_tip.'" height="'.$tsize[1].'" width="'.$tsize[0].'" class="lazy" data-original="'.$h_thumb_link.'" src="'.$base.'/lib/static/grey.gif">'.
'<noscript><img id="thumb_'.$i_id.'" title="'.$h_tip.'" alt="'.$h_tip.'" height="'.$tsize[1].'" width="'.$tsize[0].'" src="'.$h_thumb_link.'"></noscript>'.
return "<a href='$h_view_link' class='thumb shm-thumb' data-tags='$h_tags' data-post-id='$i_id'>".
"<img id='thumb_$i_id' title='$h_tip' alt='$h_tip' height='{$tsize[1]}' width='{$tsize[0]}' class='lazy' data-original='$h_thumb_link' src='$base/lib/static/grey.gif'>".
"<noscript><img id='thumb_$i_id' title='$h_tip' alt='$h_tip' height='{$tsize[1]}' width='{$tsize[0]}' src='$h_thumb_link'></noscript>".
"</a>\n";
}

View File

@ -120,6 +120,20 @@ abstract class BaseConfig implements Config {
}
/**
* For testing, mostly
*/
class HardcodeConfig extends BaseConfig {
public function __construct($dict) {
$this->values = $dict;
}
public function save(/*string*/ $name=null) {
// static config is static
}
}
/**
* Loads the config list from a PHP file; the file should be in the format:
*

View File

@ -43,6 +43,7 @@ class Blotter extends Extension {
$config->set_default_string("blotter_position", "subheading");
}
public function onSetupBuilding(SetupBuildingEvent $event) {
global $config;
$sb = new SetupBlock("Blotter");
@ -51,12 +52,14 @@ class Blotter extends Extension {
$sb->add_choice_option("blotter_position", array("Top of page" => "subheading", "In navigation bar" => "left"), "<br>Position: ");
$event->panel->add_block($sb);
}
public function onUserBlockBuilding(UserBlockBuildingEvent $event) {
global $user;
if($user->is_admin()) {
$event->add_link("Blotter Editor", make_link("blotter/editor"));
}
}
public function onPageRequest(PageRequestEvent $event) {
global $page, $database, $user;
if($event->page_matches("blotter")) {
@ -105,7 +108,7 @@ class Blotter extends Extension {
$page->set_redirect(make_link("blotter/editor"));
}
break;
case "":
case "list":
/**
* Displays all blotter entries
*/

View File

@ -1,16 +1,15 @@
$(document).ready(function() {
$("#blotter2-toggle").click(function() {
$("#blotter2").slideToggle("slow", function() {
if($("#blotter2").is(":hidden")) {
$.cookie("blotter2-hidden", 'true', {path: '/'});
$(".shm-blotter2-toggle").click(function() {
$(".shm-blotter2").slideToggle("slow", function() {
if($(".shm-blotter2").is(":hidden")) {
$.cookie("ui-blotter2-hidden", 'true', {path: '/'});
}
else {
$.cookie("blotter2-hidden", 'false', {path: '/'});
$.cookie("ui-blotter2-hidden", 'false', {path: '/'});
}
});
});
if($.cookie("blotter2-hidden") == 'true') {
$("#blotter2").hide();
if($.cookie("ui-blotter2-hidden") == 'true') {
$(".shm-blotter2").hide();
}
});

View File

@ -12,8 +12,9 @@ class BlotterTheme extends Themelet {
public function display_blotter_page($entries) {
global $page;
$html = $this->get_html_for_blotter_page($entries);
$page->set_mode("data");
$page->set_data($html);
$page->set_title("Blotter");
$page->set_heading("Blotter");
$page->add_block(new Block("Blotter Entries", $html, "main", 10));
}
public function display_blotter($entries) {
@ -95,10 +96,8 @@ class BlotterTheme extends Themelet {
* This one displays a list of all blotter entries.
*/
global $config;
$i_color = $config->get_string("blotter_color","#FF0000");
$html = "";
$html .= "<html><head><title>Blotter</title></head>
<body><pre>";
$i_color = $config->get_string("blotter_color", "#FF0000");
$html = "<pre>";
$num_entries = count($entries);
for ($i = 0 ; $i < $num_entries ; $i++) {
@ -110,13 +109,15 @@ class BlotterTheme extends Themelet {
$i_close = "";
$id = $entries[$i]['id'];
$messy_date = $entries[$i]['entry_date'];
$clean_date = date("m/d/y",strtotime($messy_date));
$clean_date = date("y/m/d", strtotime($messy_date));
$entry_text = $entries[$i]['entry_text'];
if($entries[$i]['important'] == 'Y') { $i_open = "<font color='#{$i_color}'>"; $i_close="</font>"; }
if($entries[$i]['important'] == 'Y') {
$i_open = "<font color='#{$i_color}'>";
$i_close="</font>";
}
$html .= "{$i_open}{$clean_date} - {$entry_text}{$i_close}<br /><br />";
}
$html .= "</pre></body></html>";
$html .= "</pre>";
return $html;
}
@ -143,14 +144,17 @@ class BlotterTheme extends Themelet {
}
$entries_list .= "<li>{$i_open}{$clean_date} - {$entry_text}{$i_close}</li>";
}
$out_text = "";
$in_text = "";
$pos_break = "";
$pos_align = "text-align: right; position: absolute; right: 0px;";
if($position === "left") {
$pos_break = "<br />";
$pos_align = "";
}
if(count($entries) === 0) {
$out_text = "No blotter entries yet.";
$in_text = "Empty.";
@ -160,9 +164,18 @@ class BlotterTheme extends Themelet {
$out_text = "Blotter updated: {$clean_date}";
$in_text = "<ul>$entries_list</ul>";
}
$html = "";
$html .= "<div id='blotter1'><span>$out_text</span>{$pos_break}<span style='{$pos_align}'><a href='#' id='blotter2-toggle'>Show/Hide</a> <a href='".make_link("blotter")."'>Show All</a></span></div>";
$html .= "<div id='blotter2'>$in_text</div>";
$html = "
<div id='blotter1' class='shm-blotter1'>
<span>$out_text</span>
{$pos_break}
<span style='{$pos_align}'>
<a href='#' id='blotter2-toggle' class='shm-blotter2-toggle'>Show/Hide</a>
<a href='".make_link("blotter/list")."'>Show All</a>
</span>
</div>
<div id='blotter2' class='shm-blotter2'>$in_text</div>
";
return $html;
}
}

View File

@ -73,7 +73,7 @@ class PixelFileHandler extends DataHandlerExtension {
public function onImageAdminBlockBuilding(ImageAdminBlockBuildingEvent $event) {
$event->add_part("
<form>
<select id='zoomer'>
<select class='shm-zoomer'>
<option value='full'>Full Size</option>
<option value='width'>Fit Width</option>
<option value='height'>Fit Height</option>

View File

@ -1,9 +1,9 @@
$(function() {
$("#zoomer").change(function(e) {
$(".shm-zoomer").change(function(e) {
zoom(this.options[this.selectedIndex].value);
});
$("#main_image").click(function(e) {
$(".shm-main-image").click(function(e) {
switch($.cookie("ui-image-zoom")) {
case "full": zoom("width"); break;
default: zoom("full"); break;
@ -16,7 +16,7 @@ $(function() {
});
function zoom(zoom) {
var img = $('#main_image');
var img = $('.shm-main-image');
if(zoom == "full") {
img.css('max-width', img.data('width') + 'px');
img.css('max-height', img.data('height') + 'px');
@ -34,7 +34,7 @@ function zoom(zoom) {
img.css('max-height', (window.innerHeight * 0.95) + 'px');
}
$("#zoomer").val(zoom);
$(".shm-zoomer").val(zoom);
$.cookie("ui-image-zoom", zoom, {path: '/', expires: 365});
}

View File

@ -23,7 +23,7 @@ class PixelFileHandlerTheme extends Themelet {
}
}
$html = "<img alt='main image' id='main_image' src='$u_ilink' data-width='{$image->width}' data-height='{$image->height}'>";
$html = "<img alt='main image' class='shm-main-image' id='main_image' src='$u_ilink' data-width='{$image->width}' data-height='{$image->height}'>";
$page->add_block(new Block("Image", $html, "main", 10));
}
}

View File

@ -1,16 +1,10 @@
$(function() {
var blocked_tags = ($.cookie("ui-blocked-tags") || $.cookie("blocked-tags") || "").split(" ");
var themecheck = $(".thumb[data-tags]").parent().attr('class');
var blocked_tags = ($.cookie("ui-blocked-tags") || "").split(" ");
var needs_refresh = false;
for(i=0; i<blocked_tags.length; i++) {
var tag = blocked_tags[i];
if(tag) {
if(themecheck == "thumbblock") {
$(".thumb[data-tags~='"+tag+"']").parent().hide();
$(".thumb[data-tags~='"+tag+"']").parent().height(0); //required for lite theme
}else{
$(".thumb[data-tags~='"+tag+"']").hide();
}
$(".shm-thumb[data-tags~='"+tag+"']").hide();
needs_refresh = true;
}
}
@ -18,19 +12,16 @@ $(function() {
// text-align: justify with element margins and doesn't recalculate
// these margins when part of the line disappears...
if(needs_refresh) {
if(themecheck == "thumbblock") {
$('.blockbody').hide();
$('.blockbody').show();
}else{
$('#image-list').hide();
$('#image-list').show();
}
$('.shm-image-list').hide(
0,
function() {$('.shm-image-list').show();}
);
}
});
function select_blocked_tags() {
var blocked_tags = prompt("Enter tags to ignore", $.cookie("ui-blocked-tags") || "My_Little_Pony");
if(blocked_tags) {
if(blocked_tags !== null) {
$.cookie("ui-blocked-tags", blocked_tags.toLowerCase(), {path: '/', expires: 365});
location.reload(true);
}

View File

@ -90,10 +90,11 @@ and of course start organising your images :-)
}
protected function build_table($images, $query) {
$table = "";
$table = "<div class='shm-image-list'>";
foreach($images as $image) {
$table .= $this->build_thumb_html($image, $query);
}
$table .= "</div>";
return $table;
}
}

View File

@ -10,8 +10,6 @@
* add buttons to each image to mark them for tagging, and a field for
* inputting tags will appear. Once the "Tag" button is clicked, the tags in
* the text field will be added to marked images.
*
* As of now only compatible with the lite theme.
*/
class MassTagger extends Extension {

View File

@ -1,15 +1,19 @@
function find_thumb_link_containers () {
var post_link = "a[href*='/post/view/']";
var has_thumb_img = ":has(img[src*='/thumb/'])";
var list = $( post_link + has_thumb_img ).parent();
function activate_mass_tagger ( image_link ) {
$(".shm-thumb").each(
function ( index, block ) {
add_mass_tag_button( $(block), image_link );
}
);
$('#mass_tagger_controls').show();
$('#mass_tagger_activate').hide();
}
if (list) { return list; }
function add_mass_tag_button($block, image_link) {
has_thumb_img = ":has(img[src*='_thumbs/'])";
list = $( post_link + has_thumb_img ).parent();
return list;
var c = function() { toggle_tag(this, $block.data("post-id")); return false; };
$block.find("A").click(c);
$block.click(c); // sometimes the thumbs *is* the A
}
function toggle_tag( button, id ) {
@ -17,65 +21,14 @@ function toggle_tag( button, id ) {
var list = $('#mass_tagger_ids');
var string = list.val();
if( string.indexOf( id ) > -1 ) return remove_mass_tag_id( button, list, id, string );
return add_mass_tag_id( button, list, id, string );
}
function add_mass_tag_id( button, list, id, string ) {
$(button).attr( 'style', 'display:block;border: 3px solid blue;' );
string += id;
list.val( string );
return false;
}
function remove_mass_tag_id( button, list, id, string ) {
$(button).attr( 'style', '' );
string = string.replace( id, '' );
list.val( string );
return false;
}
function activate_mass_tagger ( image_link ) {
find_thumb_link_containers().each(
function ( index, block ) {
add_mass_tag_button( block, image_link );
}
);
$('#mass_tagger_controls').attr( 'style', 'display:block' );
$('#mass_tagger_activate').attr( 'style', 'display:none' );
return false;
}
function add_mass_tag_button ( block, image_link ) {
var id = get_image_id( block );
var button = create_mass_tag_button( id, image_link );
$(block).append( button );
return;
}
function get_image_id ( block ) {
var link = $(block).children(":first").attr('href');
var id = link.split('/').pop();
return id;
}
function create_mass_tag_button ( id, image_link ) {
var img = $('<img />');
img.attr( "src", image_link+'/ext/mass_tagger/toggle.gif' );
var link = $('<a />');
link.attr("class",'zoom');
link.attr("onclick",'return toggle_tag( this, "'+id+'")');
link.attr("href",'#');
link.append( img );
return link;
if( string.indexOf( id ) > -1 ) {
$(button).css('border', 'none');
string = string.replace(id, '');
list.val(string);
}
else {
$(button).css('border', '3px solid blue');
string += id;
list.val(string);
}
}

View File

@ -1,8 +0,0 @@
.zoom{ position:absolute;display:none;margin:-110px 27px; }
.thumbblock:hover .zoom{ display:block; }
.zoom:hover{ border: 3px solid blue; }
/*.zoom img:hover{ background:url(/contrib/simpletest/data/pbx_screenshot.jpg) no-repeat;}*/
.zoom img { width: 100px; height: 100px; }
#mass_tagger_controls { display:none; }

View File

@ -9,7 +9,7 @@ class MassTaggerTheme extends Themelet {
$body = "
<form action='".make_link("mass_tagger/tag")."' method='POST'>
<input id='mass_tagger_activate' type='button' onclick='activate_mass_tagger(\"$data_href\");' value='Activate'/>
<div id='mass_tagger_controls'>
<div id='mass_tagger_controls' style='display: none;'>
Click on images to mark them. Use the 'Index Options' in the Board Config to increase the amount of shown images.
<br />
<input type='hidden' name='ids' id='mass_tagger_ids' />

View File

@ -44,7 +44,7 @@ IMG.lazy {display: none;}
#installer A:hover {
text-decoration: underline;
}
#installer H1, H3 {
#installer H1, #installer H3 {
background: #DDD;
text-align: center;
margin: 0px;

View File

@ -38,7 +38,7 @@ $(document).ready(function() {
});
try {
var sidebar_hidden = ($.cookie("ui-sidebar-hidden") || $.cookie("sidebar-hidden") || "").split("|");
var sidebar_hidden = ($.cookie("ui-sidebar-hidden") || "").split("|");
for(var i in sidebar_hidden) {
if(sidebar_hidden.hasOwnProperty(i) && sidebar_hidden[i].length > 0) {
$(sidebar_hidden[i]+" .blockbody").hide();

View File

@ -49,10 +49,11 @@ class CustomIndexTheme extends IndexTheme {
}
protected function build_table($images, $query) {
$table = "";
$table = "<div class='shm-image-list'>";
foreach($images as $image) {
$table .= "\t<span class=\"thumb\">" . $this->build_thumb_html($image, $query) . "</span>\n";
}
$table .= "</div>";
return $table;
}
}

View File

@ -5,6 +5,8 @@ class Themelet extends BaseThemelet {
$h_view_link = make_link("post/view/{$image->id}", $query);
$h_thumb_link = $image->get_thumb_link();
$h_tip = html_escape($image->get_tooltip());
$i_id = int_escape($image->id);
$h_tags = strtolower($image->get_tag_list());
// If file is flash or svg then sets thumbnail to max size.
if($image->ext == 'swf' || $image->ext == 'svg') {
@ -14,7 +16,7 @@ class Themelet extends BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return "<a href='$h_view_link'><img title='$h_tip' alt='$h_tip' ".
return "<a href='$h_view_link' class='shm-thumb' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
"width='{$tsize[0]}' height='{$tsize[1]}' src='$h_thumb_link' /></a>";
}

View File

@ -9,6 +9,8 @@ class Themelet extends BaseThemelet {
$h_view_link = make_link("post/view/{$image->id}", $query);
$h_thumb_link = $image->get_thumb_link();
$h_tip = html_escape($image->get_tooltip());
$i_id = int_escape($image->id);
$h_tags = strtolower($image->get_tag_list());
// If file is flash or svg then sets thumbnail to max size.
if($image->ext == 'swf' || $image->ext == 'svg') {
@ -18,7 +20,7 @@ class Themelet extends BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return "<a class='thumb' href='$h_view_link'><img title='$h_tip' alt='$h_tip' ".
return "<a href='$h_view_link' class='thumb shm-thumb' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
"width='{$tsize[0]}' height='{$tsize[1]}' src='$h_thumb_link' /></a>";
}

View File

@ -21,8 +21,8 @@ class Themelet extends BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return '<center><div class="thumbblock">'.
'<a href="'.$h_view_link.'" class="thumb" data-tags="'.$h_tags.'">'.
return '<center class="shm-thumb" data-tags="'.$h_tags.'" data-post-id="'.$i_id.'"><div class="thumbblock">'.
'<a href="'.$h_view_link.'" class="thumb">'.
'<img id="thumb_'.$i_id.'" title="'.$h_tip.'" alt="'.$h_tip.'" height="'.$tsize[1].'" width="'.$tsize[0].'" class="lazy" data-original="'.$h_thumb_link.'" src="'.$base.'/lib/static/grey.gif">'.
'<noscript><img id="thumb_'.$i_id.'" title="'.$h_tip.'" alt="'.$h_tip.'" height="'.$tsize[1].'" width="'.$tsize[0].'" src="'.$h_thumb_link.'"></noscript>'.
"</a></div></center>\n";