From f568b64fcc481e0ac7de5e52e7b6dafe8f8d9ee5 Mon Sep 17 00:00:00 2001
From: Brice Maron <brice@bmaron.net>
Date: Sun, 1 Jul 2012 22:12:59 +0000
Subject: [PATCH] Add first shot of Image view ... need more work

---
 css/bookmarks.css  | 32 +++++++++++++++++
 js/bookmarks.js    | 86 +++++++++++++++++++++++++++++++++++-----------
 templates/list.php |  5 +++
 3 files changed, 103 insertions(+), 20 deletions(-)

diff --git a/css/bookmarks.css b/css/bookmarks.css
index d4c5e922..095f2656 100644
--- a/css/bookmarks.css
+++ b/css/bookmarks.css
@@ -234,4 +234,36 @@ li:hover em { display : none; }
     position: absolute;
     right: 0.1em;
     top: 50%;
+}
+
+#view_type {
+    position: absolute;
+    right: 13.5em;
+    top: 0;
+}
+
+/***** Lis View *****/
+
+.bm_view_img .bookmark_single{
+	width: 240px;
+	float: left;
+	height: 240px;
+	margin: 1em;
+
+/* 	background: none repeat scroll 0 0 #EEEEEE; */
+  border-radius: 8px 8px 8px 8px;
+  box-shadow: 0 0 5px rgba(34, 25, 25, 0.5);
+}
+
+.bm_view_img .bookmark_single .shot{
+	text-align:center;
+}
+.bm_view_img .bookmark_single .shot img{
+	border: 1px solid black;
+	width: 228px;
+	height: 160px
+}
+
+.bm_view_img .bookmark_single:hover .bookmark_url{
+	display:block;
 }
\ No newline at end of file
diff --git a/js/bookmarks.js b/js/bookmarks.js
index 60336c70..f73b8ff8 100644
--- a/js/bookmarks.js
+++ b/js/bookmarks.js
@@ -3,7 +3,11 @@ var bookmarks_loading = false;
 
 var bookmarks_sorting = 'bookmarks_sorting_recent';
 
+var bookmark_view = 'image';
+
 $(document).ready(function() {
+	$('.bookmarks_list').addClass('bm_view_img');
+	$('#view_type input').click(switchView);
 	$('#bookmark_add_submit').click(addBookmark);
 	$(window).resize(function () {
 		fillWindow($('.bookmarks_list'));
@@ -19,6 +23,21 @@ $(document).ready(function() {
 	getBookmarks();
 });
 
+function switchView(){
+	$(this).hide();
+	if($(this).hasClass('image')) { //Then List
+		$('.bookmarks_list').addClass('bm_view_list');
+		$('.bookmarks_list').removeClass('bm_view_img');
+		$('#view_type input.list').show();
+		bookmark_view = 'list';
+	} else { // Then Image
+		$('.bookmarks_list').addClass('bm_view_img');
+		$('.bookmarks_list').removeClass('bm_view_list');
+		$('#view_type input.image').show();
+		bookmark_view = 'image';
+	}
+	filterTagsChanged(); //Refresh the view
+}
 function addFilterTag(event) {
 	event.preventDefault();
 	$('#tag_filter input').tagit('createTag', $(this).text());
@@ -161,27 +180,54 @@ function updateBookmarksList(bookmark) {
 		bookmark.url = 'http://' + bookmark.url;
 	}
 	if(bookmark.title == '') bookmark.title = bookmark.url;
-	$('.bookmarks_list').append(
-		'<div class="bookmark_single" data-id="' + bookmark.id +'" >' +
-			'<p class="bookmark_actions">' +
-				'<span class="bookmark_edit">' +
-					'<img class="svg" src="'+OC.imagePath('core', 'actions/rename')+'" title="Edit">' +
-				'</span>' +
-				'<span class="bookmark_delete">' +
-					'<img class="svg" src="'+OC.imagePath('core', 'actions/delete')+'" title="Delete">' +
-				'</span>&nbsp;' +
-			'</p>' +
-			'<p class="bookmark_title">'+
-				'<a href="' + encodeEntities(bookmark.url) + '" target="_blank" class="bookmark_link">' + encodeEntities(bookmark.title) + '</a>' +
-			'</p>' +
-			'<p class="bookmark_url"><a href="' + encodeEntities(bookmark.url) + '" target="_blank" class="bookmark_link">' + encodeEntities(bookmark.url) + '</a></p>' +
-		'</div>'
-	);
-	$('div[data-id="'+ bookmark.id +'"]').data('record', bookmark);
-	if(taglist != '') {
-		$('div[data-id="'+ bookmark.id +'"]').append('<p class="bookmark_tags">' + taglist + '</p>');
+
+	if(bookmark_view == 'image') { //View in images
+		$('.bookmarks_list').append(
+			'<div class="bookmark_single" data-id="' + bookmark.id +'" >' +
+				'<p class="shot"><img src="'+ "http://screenshots.bookmarkly.com/thumb?url="+encodeEntities(bookmark.url) +'"></p>'+
+				'<p class="bookmark_actions">' +
+					'<span class="bookmark_edit">' +
+						'<img class="svg" src="'+OC.imagePath('core', 'actions/rename')+'" title="Edit">' +
+					'</span>' +
+					'<span class="bookmark_delete">' +
+						'<img class="svg" src="'+OC.imagePath('core', 'actions/delete')+'" title="Delete">' +
+					'</span>&nbsp;' +
+				'</p>' +
+				'<p class="bookmark_title">'+
+					'<a href="' + encodeEntities(bookmark.url) + '" target="_blank" class="bookmark_link">' + encodeEntities(bookmark.title) + '</a>' +
+				'</p>' +
+				'<p class="bookmark_url"><a href="' + encodeEntities(bookmark.url) + '" target="_blank" class="bookmark_link">' + encodeEntities(bookmark.url) + '</a></p>' +
+			'</div>'
+		);
+		$('div[data-id="'+ bookmark.id +'"]').data('record', bookmark);
+		if(taglist != '') {
+			$('div[data-id="'+ bookmark.id +'"]').append('<p class="bookmark_tags">' + taglist + '</p>');
+		}
+		$('div[data-id="'+ bookmark.id +'"] a.bookmark_tag').bind('click', addFilterTag);
+	}
+	else {
+		$('.bookmarks_list').append(
+			'<div class="bookmark_single" data-id="' + bookmark.id +'" >' +
+				'<p class="bookmark_actions">' +
+					'<span class="bookmark_edit">' +
+						'<img class="svg" src="'+OC.imagePath('core', 'actions/rename')+'" title="Edit">' +
+					'</span>' +
+					'<span class="bookmark_delete">' +
+						'<img class="svg" src="'+OC.imagePath('core', 'actions/delete')+'" title="Delete">' +
+					'</span>&nbsp;' +
+				'</p>' +
+				'<p class="bookmark_title">'+
+					'<a href="' + encodeEntities(bookmark.url) + '" target="_blank" class="bookmark_link">' + encodeEntities(bookmark.title) + '</a>' +
+				'</p>' +
+				'<p class="bookmark_url"><a href="' + encodeEntities(bookmark.url) + '" target="_blank" class="bookmark_link">' + encodeEntities(bookmark.url) + '</a></p>' +
+			'</div>'
+		);
+		$('div[data-id="'+ bookmark.id +'"]').data('record', bookmark);
+		if(taglist != '') {
+			$('div[data-id="'+ bookmark.id +'"]').append('<p class="bookmark_tags">' + taglist + '</p>');
+		}
+		$('div[data-id="'+ bookmark.id +'"] a.bookmark_tag').bind('click', addFilterTag);
 	}
-	$('div[data-id="'+ bookmark.id +'"] a.bookmark_tag').bind('click', addFilterTag);
 
 }
 
diff --git a/templates/list.php b/templates/list.php
index 8d54e5fe..d59c5b24 100644
--- a/templates/list.php
+++ b/templates/list.php
@@ -10,6 +10,11 @@
 <input type="hidden" id="bookmarkFilterTag" value="<?php echo $_['req_tag']; ?>" />
 <div id="controls">
 	<input type="submit" value="<?php echo $l->t('New bookmark'); ?>" id="bookmark_add_submit" />
+
+	<div id="view_type">
+		<input type="button" class="list" value="<?php echo $l->t('List')?>" />
+		<input type="button" class="image" style="display:none" value="<?php echo $l->t('Image')?>" />
+	</div>
 </div>
 <div id="leftcontent">
 	<p id="tag_filter">