Adjusts the appearance of photostream pages depending on the browser's window size.
// Flickr - Widescreen
// Copyright (c) 2010, Patrick Joseph.
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
//
// ==UserScript==
// @name Flickr - Widescreen
// @namespace http://userscripts.org/users/isamux
// @description Adjusts the appearance of photostream pages depending on the browser's window size.
// @version 1.2.2.1
// @date 2011-04-24
// @creator Patrick Joseph
// @include http://*.flickr.com/photos/*
// @include http://*.flickr.com/groups/*/pool*/
// @exclude http://*.flickr.com/photos/friends*
// ==/UserScript==
// ==Changelog==
//2011-04-24 v1.2.2:
// * Flickr changed id of photostream's content div from "Main" to "main". Changed it in the script to make it work again.
// * Updated integrated Flickr - TopPager to version 1.0.5.
// 2010-11-21 v1.2.1:
// * experimatal adjustment on photo page: comments are displayed in a column left to the photo.
// Can be disabled by setting CONF_DISPLAY_COMMENTS_AS_LEFT_COLUMN to false.
// 2010-10-11 v1.2:
// * fixed medium + sets view
// * added logging functionality
// * added widescreen display for sets overview page (Example: http://www.flickr.com/photos/barackobamadotcom/sets/)
// * added @include for group pool
// 2010-04-23 v1.1:
// * added top pager functionality (http://userscripts.org/scripts/show/73290).
// 2010-04-22 v1.0.2:
// * added handling for photostream layout "Medium + sets" (big5).
// * removed @require dependency from userscript metablock.
// 2010-04-15 v1.0.1:
// * some minor adjustments.
// ==/Changelog==
// ---------------
// CONFIGURATION
// ---------------
const CONST_ENABLE_FIREBUG_LOGGING = false;
// some "constants" for the script
const CONST_MINIMUM_COLUMN_COUNT = 3; // minimum count of columns in photostream table. Should be at least 1.
const CONST_MAIN_CONTAINER = "Main"; // id of main photostream div
const CONST_CELL_WIDTH = 340; // width of a single photostream table cell (Used for AUTO ADJUSTMENT)
const CONST_SETS_COLUMNS_WIDTH = 300; // width of the photostream's sets column
const CONST_PHOTOSTREAM_WRAPPER = '//div[@class="PhotosColumn"]'
// if CONF_AUTO_ADJUST is set to false, the values configured below,
// are used to rearrange the photostream table.
var CONF_AUTO_ADJUST = true;
var CONF_COLUMN_COUNT = 3; // [AUTO ADJUSTED] count of columns. Cannot be set below CONST_MINIMUM_COLUMN_COUNT;
var CONF_MAIN_CONTAINER_WIDTH = 1800; // [AUTO ADJUSTED] width of main container. Original width 800.
// config for photostream layout "Medium + sets"
var CONF_MEDIUM_SIZE_STREAM_RESIZE_ENABLED = true; // allows to disable resize of images in "Medium + sets" layout.
var CONF_MEDIUM_SIZE_STREAM_MINIMUM_IMAGE_WIDTH = 340; // minimum size for resized images in "Medium + sets" layout.
var CONF_ADD_TOP_PAGER = true; // allows to disable top pager.
var CONF_DISPLAY_COMMENTS_AS_LEFT_COLUMN = true; // experimental: displays comments as left column on photo page
// Flickr - TopPager CONFIGURATION (should not be changed)
const CONST_PAGINATED_CONTENT_XPATH_PHOTOSTREAM = '//div[starts-with(@class,"PhotoStream")]';
const CONST_PAGINATED_CONTENT_XPATH_GROUP = '//div[@class="HoldPhotos"]';
const CONST_PAGINATED_CONTENT_ID_FAVORITES = 'favoriteThumbs';
// ---------------
// ---------------
// SCRIPT-MAIN
// ---------------
// 0. Prepare everything
// init logging
if(typeof console === "undefined" || !CONST_ENABLE_FIREBUG_LOGGING) {
console = { log: function() { },
info: function() {},
debug: function() { } ,
warn: function() {},
error: function() {} };
}
// add top pager
if(CONF_ADD_TOP_PAGER)
tryAddTopPager();
computeAdjustments(); // compute column resize parameters
// I. Adjust main div width
var mainEl = document.getElementById(CONST_MAIN_CONTAINER);
if(mainEl == null)
{
// on some pages the main-container is named "Main" and on newer ones "main".
mainEl = document.getElementById(CONST_MAIN_CONTAINER.toLowerCase());
}
if(mainEl !== null)
{
mainEl.style.width = CONF_MAIN_CONTAINER_WIDTH + "px";
}
// II.a Rearrange photostream ("Small + sets" layout)
var elPhotoColumn = getElement(CONST_PHOTOSTREAM_WRAPPER);
if(elPhotoColumn !== null)
{
elPhotoColumn.style.setProperty("width", (CONF_COLUMN_COUNT * CONST_CELL_WIDTH) + "px","important");
}
// II.b Rearrange photostream ("Big wo sets" layout)
elPhotoColumn = getElement('//div[@class="PhotosColumn Big5Column Big5NoSets"]');
if(elPhotoColumn !== null)
{
rearrangeLargeSizeLayoutPhotoStream(elPhotoColumn);
}
// // II.c Rearrange photostream in "Medium + sets" layout
// oMediumSizeImageDivs = getElementSnapshots('//div[starts-with(@class,"StreamView Big5Photo")]');
// if(null != oMediumSizeImageDivs)
// {
// console.info("PageInfo: Photostream Medium + sets column");
// rearrangeMediumSizeLayoutPhotoStream(oMediumSizeImageDivs);
// }
// III. Remove width from favorites container, to adjust to new width of CONST_MAIN_CONTAINER.
var oFavoritesContainer = document.getElementById('favoriteThumbs');
if(null != oFavoritesContainer)
{
console.info("PageInfo: Favorites");
oFavoritesContainer.style.width = "auto";
}
// IV. Adjust width on set page
var oSetContainer = document.getElementById('ViewSet');
if(null != oSetContainer)
{
console.info("PageInfo: Single set overview");
oSetContainer.style.width = "auto";
var el = getElement('//div[@class="vsThumbs"]');
el.style.width = (CONF_MAIN_CONTAINER_WIDTH-CONST_SETS_COLUMNS_WIDTH) + "px";
}
// V. Handle Sets-Overview Page
if(isSetsPage(document.URL))
{
console.info("PageInfo: Set overview");
oBreaks = getElementSnapshots('//div[@class="Sets"]/following-sibling::br[@clear="all"]');
if(oBreaks != null)
{
for(i = 0; i < oBreaks.snapshotLength-3; i++)
{
obreakElement = oBreaks.snapshotItem(i);
obreakElement.parentNode.removeChild(obreakElement);
}
}
}
// VI. Insert Widescreen next to Flickr logo
insertLogo();
// VII. Experimental new photopage adjustment
mainElNewPhotPage = document.getElementById("main");
if(null !== mainElNewPhotPage)
{
//console.info("PageInfo: New Photopage");
experimentalNewPhotoPageAdjust(mainElNewPhotPage);
}
// ===============
// FUNCTION LIB
// ===============
function computeAdjustments()
{
// 0. auto config
if(CONF_AUTO_ADJUST)
{
// compute count of fitting columns
CONF_COLUMN_COUNT = Math.floor(window.innerWidth/CONST_CELL_WIDTH);
console.debug("Computed count of columns fitting the window: " + CONF_COLUMN_COUNT);
// by adjusting the width, the main content container on the photostream is moved to the left.
// Otherwise the table with more columns, would be growing out of the main window to the right.
CONF_MAIN_CONTAINER_WIDTH = (CONF_COLUMN_COUNT * CONST_CELL_WIDTH);
// consider sets column. If sets column exists, the CONF_COLUMN_COUNT needs to be reduced by one.
if(additionalRightColumnExists())
{
CONF_COLUMN_COUNT = CONF_COLUMN_COUNT -1;
console.debug("Additional right column exists. Count of fitting columns was reduced to " + CONF_COLUMN_COUNT);
}
}
// apply minimum column count
if(CONF_COLUMN_COUNT < CONST_MINIMUM_COLUMN_COUNT)
CONF_COLUMN_COUNT = CONST_MINIMUM_COLUMN_COUNT
}
function additionalRightColumnExists()
{
return (collectionsColumnExists() || setsColumnExists());
}
function setsColumnExists()
{
return elementExists('//*[@class="SetsColumn"]');
}
function collectionsColumnExists()
{
return elementExists('//*[@class="CollectionsColumn"]');
}
function isSetsPage(psUrl)
{
bResult = false;
iUrlLength = psUrl.length;
// main sets page wo pagination
bNoPagination = psUrl.indexOf("/sets/") == iUrlLength-6;
bResult = bNoPagination;
console.debug("Is main set overview page: " + bNoPagination);
if(!bNoPagination)
{
// is main sets page on a certain page
iLastEqual = psUrl.lastIndexOf("=");
sTestForSetsPaginated = "/sets/?&page";
sToTest = psUrl.substr(iLastEqual - sTestForSetsPaginated.length, sTestForSetsPaginated.length);
bWithPagination = (sToTest == sTestForSetsPaginated);
console.debug("Is main set overview page on a specific page: " + bWithPagination);
bResult = bWithPagination;
}
return bResult;
}
function getOrignialPhotostreamTableElement()
{
// get orignal photostream table position
return getElement('//td[@class="PhotosColumn"]//table');
}
function rearrangeTable(poTableElement, piNewColumnCount)
{
var allHeaderCells = getAllPhotostreamHeaderCells(poTableElement);
var allImgCells = getAllPhotostreamImageCells(poTableElement);
// create new table element and replace orginal
elTable = document.createElement("table");
elTable.innerHTML = buildTable(allHeaderCells, allImgCells, piNewColumnCount);
return elTable;
}
function getAllPhotostreamHeaderCells(poTable)
{
return getElementSnapshotsFromContext(poTable, './/tr[@valign="bottom"]//td');
}
function getAllPhotostreamImageCells(poTable)
{
return getElementSnapshotsFromContext(poTable,'.//tr[@valign="top"]//td');
}
function buildTable(paAllHeaderCells, paAllImgCells, piColumnCount)
{
var tmpTableString = '<table width="100%" cellspacing="0"><tbody>';
for (var i = 0; i < paAllHeaderCells.snapshotLength; i++)
{
tmpTableString += buildTableRow(paAllHeaderCells, i, piColumnCount);
tmpTableString += buildTableRow(paAllImgCells, i, piColumnCount);
i+=piColumnCount;
}
tmpTableString += "</tbody></table>";
return tmpTableString;
}
function buildTableRow(paCellContent,piOffset, piColumnCount)
{
var tmp = "<tr>";
while(piColumnCount--)
{
oTd = paCellContent.snapshotItem(piOffset++);
tmp += buildTableCell(oTd);
}
return tmp + "</tr>";
}
function buildTableCell(poTd)
{
if(poTd == null)
return "<td>-</td>";
else
return "<td>" + poTd.innerHTML + "</td>";
}
function rearrangeLargeSizeLayoutPhotoStream(poPhotoColumn)
{
poPhotoColumn.style.setProperty("width", (CONF_COLUMN_COUNT * CONST_CELL_WIDTH) + "px","important");
poPhotoColumn.style.setProperty("padding-left", "10px","important");
poPhotoColumn.style.setProperty("padding-right", "10px","important");
var oPhotoItemSnapsthots = getElementSnapshots('//div[@class="photo-display-item"]');
for(i = 0; i < oPhotoItemSnapsthots.snapshotLength; i++)
{
oPhotoItem = oPhotoItemSnapsthots.snapshotItem(i);
oPhotoItem.style.setProperty("float", "left","important");
oPhotoItem.style.setProperty("margin-left", "15px","important");
}
}
function rearrangeMediumSizeLayoutPhotoStream(paImageDivs)
{
iMargin = 15;
bRightColumnExists = additionalRightColumnExists();
if(!bRightColumnExists)
{
oContainerElement = getElement('//td[contains(@class,"Big5NoSets")]');
oContainerElement.style.setProperty("padding-left", 0, "important");
}
iWidth = computeAvailableColumnsWidthForMediumSizeLayout(iMargin, bRightColumnExists);
sPhotItemWidth = iWidth + iMargin + "px";
sSubItemWidth = iWidth+ "px";
for (var i = 0; i < paImageDivs.snapshotLength; i++)
{
paImageDivs.snapshotItem(i).style.cssFloat="left";
// resize images
if(CONF_MEDIUM_SIZE_STREAM_RESIZE_ENABLED)
{
oImage = getElementFromContext(paImageDivs.snapshotItem(i),'.//img[@class="pc_img"]');
// resize image container
paImageDivs.snapshotItem(i).style.setProperty("width", sPhotItemWidth , "important");
// resize image
oImage.style.height="auto";
oImage.style.width=sSubItemWidth;
// resize description
oDescription = getElementFromContext(paImageDivs.snapshotItem(i),'.//p[@class="Desc"]');
if(oDescription != null)
oDescription.style.setProperty("width", sSubItemWidth, "important");
// resize caption
oCaption = getElementFromContext(paImageDivs.snapshotItem(i),'.//h4')
if(oCaption != null)
oCaption.style.setProperty("width", sSubItemWidth, "important");
}
}
}
function computeAvailableColumnsWidthForMediumSizeLayout(piMargin, pbSetsColumnExists)
{
iColumns = 5;
iTotalMargin = piMargin*iColumns;
iAvailableColumnWidth = CONF_MAIN_CONTAINER_WIDTH-iTotalMargin;
if(pbSetsColumnExists)
{
iAvailableColumnWidth = iAvailableColumnWidth - CONST_SETS_COLUMNS_WIDTH-iTotalMargin;
}
iWidth = iAvailableColumnWidth/iColumns;
if(CONF_MEDIUM_SIZE_STREAM_MINIMUM_IMAGE_WIDTH > iWidth)
{
iWidth = CONF_MEDIUM_SIZE_STREAM_MINIMUM_IMAGE_WIDTH;
}
return iWidth;
}
function insertLogo()
{
widescreenLogo = createLogo();
// get flickr logo
logo = document.getElementById('FlickrLogo');
if(logo == null)
{
logo = document.getElementById('head-logo');
}
// insert widescreen logo
logo.parentNode.insertBefore(widescreenLogo,logo);
}
function createLogo()
{
el = document.createElement("div");
el.innerHTML ='<a style="font-size:10px;" href="http://userscripts.org/scripts/show/73305" target="_blank" title="Widescreen-ed by Flickr-Widescreen">Widescreen</a>';
el.style.setProperty("font-size","10px","");
el.style.setProperty("float","left","");
el.style.setProperty("position","relative","");
el.style.setProperty("top","0px","");
el.style.setProperty("left","188px","");
el.style.setProperty("padding","1px","");
el.style.setProperty("border","1px solid #7B0099","");
el.style.setProperty("background-color","#FFBFE1","");
el.style.setProperty("-moz-border-radius","3px","");
el.style.setProperty("text-align","center","");
el.style.setProperty("width","65px","");
return el;
}
function experimentalNewPhotoPageAdjust(pMainElNewPhotPage)
{
if(pMainElNewPhotPage == null)
return;
primCol = document.getElementById("primary-column");
if(primCol === null)
return;
if(CONF_DISPLAY_COMMENTS_AS_LEFT_COLUMN && window.innerWidth > 1800)
{
// display comments in left column
console.info("Widescreening: Inserting comments as left column");
primCol.style.setProperty("clear","right","");
comments = document.getElementById("comments");
comments.style.setProperty("float","left","");
comments.style.setProperty("margin-left","25px","");
comments.style.setProperty("width","370px","");
document.body.insertBefore(comments,pMainElNewPhotPage)
document.getElementById("message").style.width="300px";
}
}
// --------------------
// TOP PAGER (v1.0.5)
// --------------------
function tryAddTopPager()
{
// get paginator
oPaginator = getPaginator();
if(oPaginator !== null)
{
// get element before which the top pager will be inserted.
oPaginatedContent = getPaginatedContent();
// insert top page paginator
if(oPaginatedContent != null)
{
oPaginatorClone = oPaginator.cloneNode(true);
oPaginatedContent.parentNode.insertBefore(oPaginatorClone, oPaginatedContent);
}
}
}
function getPaginatedContent()
{
// try get that element on photostream pages, ...
oTmpFound = getElement(CONST_PAGINATED_CONTENT_XPATH_PHOTOSTREAM);
if(oTmpFound == null)
{
//...then on groups pages
oTmpFound = getElement(CONST_PAGINATED_CONTENT_XPATH_GROUP);
}
if(oTmpFound == null)
{
//...and finally on favorites pages.
oTmpFound = document.getElementById(CONST_PAGINATED_CONTENT_ID_FAVORITES);
}
return oTmpFound;
}
function getPaginator()
{
return getElement('//div[@class="Pages"]');
}
// ===============
// BASE LIB
// ===============
// returns result of xpath query
function getElementSnapshots(xpathExp)
{
oResult = document.evaluate(
xpathExp,
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
return (oResult.snapshotLength > 0)? oResult : null;
}
// returns result of xpath query below a given node
function getElementSnapshotsFromContext(contextNode, xpathExp)
{
return document.evaluate(
xpathExp,
contextNode,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
}
// returns a single dom element by xpath expression
function getElement(xpathExp)
{
oResult = getElementSnapshots(xpathExp);
return (oResult == null)?null:oResult.snapshotItem(0);
}
function getElementFromContext(contextNode, xpathExp)
{
oResult = getElementSnapshotsFromContext(contextNode, xpathExp);
return (oResult == null)?null:oResult.snapshotItem(0);
}
function elementExists(xpathExp)
{
return (getElement(xpathExp) != null);
}
function replaceElement(oldElement, newElement)
{
oldElement.parentNode.insertBefore(newElement, oldElement);
// remove original table
oldElement.parentNode.removeChild(oldElement);
}