Merge branch 'js-classes'

README.txt

@@ -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

core/basethemelet.class.php

@@ -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.'">'.
+		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">'.
+		       "<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>'.
+		       "<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";
 	}
 

core/config.class.php

@@ -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:
  *

ext/blotter/main.php

@@ -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
 					 */

ext/blotter/script.js

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

ext/blotter/theme.php

@@ -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_title("Blotter");
-		$page->set_data($html);
+		$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");
+		$i_color = $config->get_string("blotter_color", "#FF0000");
-		$html = "";
+		$html = "<pre>";
-		$html .= "<html><head><title>Blotter</title></head>
-			<body><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>";
-		$html .= "</pre></body></html>";
 		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 = "
-		$html .= "<div id='blotter2'>$in_text</div>";
+			<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;
 	}
 }

ext/handle_pixel/main.php

@@ -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>

ext/handle_pixel/script.js

@@ -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});
 }

ext/handle_pixel/theme.php

@@ -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));
 	}
 }

ext/index/script.js

@@ -1,16 +1,10 @@
 $(function() {
-	var blocked_tags = ($.cookie("ui-blocked-tags") || $.cookie("blocked-tags") || "").split(" ");
+	var blocked_tags = ($.cookie("ui-blocked-tags") || "").split(" ");
-	var themecheck = $(".thumb[data-tags]").parent().attr('class');
 	var needs_refresh = false;
 	for(i=0; i<blocked_tags.length; i++) {
 		var tag = blocked_tags[i];
 		if(tag) {
-			if(themecheck == "thumbblock") {
+			$(".shm-thumb[data-tags~='"+tag+"']").hide();
-				$(".thumb[data-tags~='"+tag+"']").parent().hide();
-				$(".thumb[data-tags~='"+tag+"']").parent().height(0); //required for lite theme
-			}else{
-				$(".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") {
+		$('.shm-image-list').hide(
-			$('.blockbody').hide();
+			0,
-			$('.blockbody').show();
+			function() {$('.shm-image-list').show();}
-		}else{
+		);
-			$('#image-list').hide();
-			$('#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);
 	}

ext/index/theme.php

@@ -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;
 	}
 }

ext/mass_tagger/main.php

@@ -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 {

ext/mass_tagger/script.js

@@ -1,15 +1,19 @@
-function find_thumb_link_containers () {
+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();
+}
 
-    var post_link = "a[href*='/post/view/']";
+function add_mass_tag_button($block, image_link) {
-    var has_thumb_img = ":has(img[src*='/thumb/'])";
-    var list = $( post_link + has_thumb_img ).parent();
 	
-	if (list) { return list; }
+    var c = function() { toggle_tag(this, $block.data("post-id")); return false; };
 
-    has_thumb_img = ":has(img[src*='_thumbs/'])";
+    $block.find("A").click(c);
-    list = $( post_link + has_thumb_img ).parent();
+    $block.click(c); // sometimes the thumbs *is* the A
-	
-	return list;
 }
 
 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 );
+    if( string.indexOf( id ) > -1 ) {
-    
+		$(button).css('border', 'none');
-    return add_mass_tag_id( button, list, id, string );
+		string = string.replace(id, '');
-}
+		list.val(string);
-
+	}
-function add_mass_tag_id( button, list, id, string ) {
+	else {
-    $(button).attr( 'style', 'display:block;border: 3px solid blue;' );
+		$(button).css('border', '3px solid blue');
-    string += id;
+		string += id;
-    list.val( string );
+		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;
 }

ext/mass_tagger/style.css

@@ -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; }

ext/mass_tagger/theme.php

@@ -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' />

lib/shimmie.css

@@ -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;

lib/shimmie.js

@@ -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();

themes/danbooru/index.theme.php

@@ -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;
 	}
 }

themes/danbooru/themelet.class.php

@@ -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>";
 	}
 

themes/futaba/themelet.class.php

@@ -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>";
 	}
 

themes/lite/themelet.class.php

@@ -21,8 +21,8 @@ class Themelet extends BaseThemelet {
 			$tsize = get_thumbnail_size($image->width, $image->height);
 		}
 
-		return '<center><div class="thumbblock">'.
+		return '<center class="shm-thumb" data-tags="'.$h_tags.'" data-post-id="'.$i_id.'"><div class="thumbblock">'.
-		       '<a href="'.$h_view_link.'" class="thumb" data-tags="'.$h_tags.'">'.
+		       '<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";