// ==UserScript== // @name Google Classic Maps / Panoramio - Easy and Enhanced Photo Viewer - For both Chrome and Firefox // @description A faster and easier way to explore 80 million images, handy EXIF image data/information, the place where it was taken and latitude/longitude. - Travel around the world, without leaving you secure home. // @namespace GCMP-EEPW-20150306-SDF-MOFM // @version 0.45 // @include https://maps.google.*/maps* // @match https://maps.google.se/maps* // @match http://static.panoramio.com/photos/*.jpg // @match http://www.panoramio.com/map* // @require http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js // @grant GM_getValue // @grant GM_setValue // @grant GM_deleteValue // @grant GM_xmlhttpRequest // @created 2015-03-06 // @released 2015-00-00 // @updated 2015-00-00 // @history @version 0.25 - Alpha version: @released - 2015-03-12 // @history @version 0.45 - Beta version: @released - 2015-03-17 // @compatible Greasemonkey, Tampermonkey // @license GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html) // @copyright 2015+, Magnus Fohlström // @downloadURL none // ==/UserScript== /*jshint -W014, -W030, -W082*/ // -W014, laxbreak, Bad line breaking before '+' // -W030, Expected assignment or funtion call insted saw an expression (function($){ //----------------------------------------------------------------------------------------------------------// // Config // //----------------------------------------------------------------------------------------------------------// //----------------------------------------------------------------------------------------------------------// // Start Variables // //----------------------------------------------------------------------------------------------------------// GM_getValue('startState') === undefined && GM_setValue('startState','Large'); var locDoc = window.location.href, lstate = 3, g = window; //----------------------------------------------------------------------------------------------------------// // Helpers // //----------------------------------------------------------------------------------------------------------// String.prototype.formatString = function(){ return this.toString() .split(/\s+/g).join(' ') .split('{').join('{\n\t') .split('; ').join(';') .split(';').join(';\n\t') .split('*/').join('*/\n') .split('}').join('}\n'); }; String.prototype.inString = function(string){ return string !== undefined ? string.search(this) !== -1 : false; }; function inURL(search){ var winLoc = window.location.href; return winLoc.search(search) !== -1; } function l( name, fn, showthis ){ ( lstate !== 0 && lstate == (showthis || lstate) || lstate == 'all' ) && console.log( name, fn !== undefined ? fn : '' ); } function isEven(value) { return ( value % 2 === 0 ); } $.fn.extend({ exists: function(){ return this.length === 0 ? 0 : this.length; } }); g.ms = 0; function timer(ms) { g.ms = ms; setTimeout(function(){ g.ms = 0; },ms); } //----------------------------------------------------------------------------------------------------------// // The Script // //----------------------------------------------------------------------------------------------------------// function fn_BasicNew() { $( '' ).appendTo('head'); var CssBasic = 'img[src*="/photos/small/"] {' + 'cursor: pointer !important;' + '}' + 'img[src*="/photos/small/"]:hover:after {' + "content: 'Enter enhanced view';" + 'position: absolute;' + 'padding: 5px;' + 'border: 1px solid gray;' + 'background: whitesmoke;' + 'font-size: 14px;' + 'z-index: 65000;' + '}' + '.largePanorama {' + 'position: absolute;' + 'top: 50%;' + 'left: 50%;' + 'transform: translate(-50%,-50%);' + 'z-index: 10000;' + 'border-radius: 15px;' + 'padding: 0px 6px 20px;' + 'border-width: 3px;' + 'border-style: outset;' + 'border-color: rgba(127, 127, 127, 0.31);' + 'background-color: rgba(236, 236, 236, 0.85);' + 'box-shadow: 5px 5px 20px 10px rgba(0, 33, 32, 0.31);' + '}' + '.largePanorama > img.theImg {' + 'border-width: 3px;' + 'border-style: inset;' + 'border-color: rgba(255, 255, 255, 0.6);' + 'background-color: rgba(144, 144, 144, 0.65);' + 'box-shadow: 4px 2px 20px 1px rgba(170, 170, 170, 0.85);' + 'transform: rotate(0deg);' + '}' + '.largePanorama a {' + 'color: #15c;' + '}' + '.largePanorama .zoom, .largePanorama .close, .largePanorama .Size, .largePanorama .TheTitle, ' + '.largePanorama .pano, .largePanorama .more, .largePanorama #rotate span {' + 'cursor: pointer;' + '}' + '.largePanorama .TheTitle {' + 'padding: 17px 4px;' + 'z-index: 35000;' + 'min-width: calc(100% - 4px) !important;' + 'max-width: calc(100% - 4px) !important;' + '}' + '.largePanorama .TheTitle b {' + 'float: left;' + 'cursor: initial;' + 'max-width: calc(100% - 80px) !important;' + 'margin-top: -7px;' + '}' + '.largePanorama .more {' + 'float: right;' + 'z-index: 20000;' + '}' + '.largePanorama .more ul {' + 'display: none;' + 'position: absolute;' + 'padding: 4px 4px 4px 3px;' + 'margin-top: -14px;' + 'margin-left: -24px;' + 'border-style: outset;' + 'border-width: 2px;' + 'border-radius: 8px;' + 'border-color: rgb(209, 209, 209);' + 'background-color: rgba(215, 215, 215, 0.85);' + 'box-shadow: 1px 2px 8px 3px rgba(0, 60, 62, 0.27);' + 'z-index: 20000;' + '}' + '.largePanorama .more ul li {' + 'border-radius: 4px;' + 'line-height: 35px;' + 'padding: 0 10px;' + '}' + '.largePanorama .more ul li:hover {' + 'background-color: rgb(104, 122, 138);' + '}' + '.largePanorama .more ul li a {' + 'color: rgb(0, 36, 47);' + 'text-decoration: none;' + 'white-space: nowrap;' + '}' + '.largePanorama .more ul li:hover a {' + 'color: aliceblue;' + '}' + '.largePanorama .moreArrow.skiptranslate {' + 'font-size: 20px;' + 'height: 35px;' + 'right: 0;' + 'padding: 0 5px;' + 'margin-top: -19px;' + 'line-height: 40px;' + 'position: absolute;' + 'float: right;' + '}' + '.largePanorama .moreArrow.skiptranslate:hover {' + 'color: blue !important;' + '}' + '.largePanorama .Size {' + 'position: absolute;' + 'z-index: 1000;' + 'bottom: 4px;' + 'left: 50%;' + 'transform: translate(-50%);' + 'white-space: nowrap;' + '}' + '.largePanorama .Size span {' + 'padding: 0 8px;' + '}' + '.largePanorama .Size span:hover {' + 'box-shadow: 0px -1px 18px 6px rgba(229, 229, 229, 1);' + 'background-color: rgba(229, 229, 229, 1);' + '}' + '.largePanorama .Size a {' + 'color: black;' + 'position: relative;' + 'text-decoration: none;' + '}' + '.largePanorama .pano {' + 'position: absolute;' + 'bottom: -3px;' + 'width: calc(100% - 16px);' + 'padding: 7px 0px;' + 'margin-left: 0px;' + '}' + '.largePanorama #rotate {' + 'position: relative;' + 'margin-right: 25px;' + 'width: 50px;' + 'top: -10px;' + 'float: right;' + 'z-index: 4000;' + '}' + '.largePanorama #rotate span {' + 'position: absolute;' + 'font-size: 20px;' + 'z-index: 45000;' + '}' + '.largePanorama #rotate span:hover {' + 'color: blue;' + '}' + '.largePanorama span.rotateLeft.skiptranslate {' + '-webkit-transform: rotate(90deg);' + 'transform: rotate(90deg);' + 'right: 30px;' + '}' + '.largePanorama span.rotateRight.skiptranslate {' + '-webkit-transform: rotate(270deg);' + 'transform: rotate(270deg);' + 'right: 0px;' + '}' + '.largePanorama #imageDetails {' + 'position: absolute;' + 'display: none;' + 'top: 50%;' + 'left: 50%;' + 'transform: translate(-50%,-50%);' + 'z-index: 30000;' + '}' + '.largePanorama .interim-info-card {' + 'padding: 15px;' + 'margin: 0 0 13px;' + 'background-color: rgba(255, 255, 255, 0.85);' + 'border-radius: 15px;' + 'border-color: rgba(123, 123, 123, 0.85);' + 'border-width: 3px;' + 'border-style: outset;' + 'box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.4);' + '}' + '.largePanorama .justImg {' + 'display: inline-block;' + 'width: 100%;' + 'margin-left: 0px;' + '}' + '.largePanorama .justImg span {' + 'margin-right: 25px;' + '}' + '.largePanorama .interim-info-card>h2 {' + 'margin: 0 0 5px;' + 'font-size: 16px;' + 'font-weight: normal;' + 'text-align: center;' + 'line-height: 40px;' + '}' + '.largePanorama .interim-info-card a {' + 'color: rgb(0, 0, 222) !important;' + '}' + '.largePanorama #details {' + 'margin: 0;' + 'padding: 0;' + 'list-style: none;' + '}' + '.largePanorama #details li {' + 'margin-bottom: 6px;' + 'padding-top: 0;' + 'font-size: 13px;' + 'color: #999;' + 'clear: both;' + '}' + '.largePanorama #map_info_breadcrumbs {' + 'margin-top: 15px;' + 'text-align: center;' + '}' + '.largePanorama #place {' + 'color: #999;' + '}' + '.largePanorama h2, .largePanorama #place, .largePanorama #details * {' + 'color: rgb(66, 66, 66) !important;' + '}' + '.largePanorama .geo {' + 'margin-top: 5px;' + '}' + '.gm-style-iw * {' + 'overflow: hidden !important;' + '}' + '.gm-style-iw {' + 'left: 10px !important;' + '}' + '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div, ' + '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(2), ' + '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(4) ' + '{ width: 279px !important; max-width: 279px !important;}' + 'div.gm-style-iw, div.gm-style-iw > div, .map-info-window ' + '{ width: 263px !important; max-width: 263px !important;}' + '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(3)' + '{ right: 5px !important; top: 9px !important; }'; $( '#CssBasic' ).html( CssBasic.formatString() ); } function googleMaps(){ window.location.href.search('www.panoramio.com/map') > 0 && ( $( document ).on('hover mouseenter', 'img', function(){ var ImgParent = $( this ).parents('.map-info-window-img-outer'), mainParent = $( this ).parents('.gm-style-iw').parent(), mainParentWidth = mainParent.width(), search='/photos/small/', src = $( this ).attr('src'); if( src.search(search) == -1 ) { src.search('logo-tos.png') > 0 && $( this ).addClass('panoLinkClick').closest('a').attr('href', ImgParent.find('.map-info-window-img-inner a').attr('href') ); return false; } ImgParent.hasClass( 'Donne' ) || ( ImgParent.addClass( 'Donne' ).find('.map-info-window-img-footer-logo a').attr('href', $( this ).closest('a').attr('href') ), $( this ).unwrap() ); }) ); $( document ).on('click', 'img', function(e){ var panoPhoto, linkLarge,linkHuge,linkOrginal,linkWrongPosition,reloadHref, insertMore,insertRotate, startState,startStateLink, sizeLarge,sizeHuge,sizeOrginal, state,pop,cl,tagcl,panocl, panoElem,theTitle,elem,img, search='/photos/small/', src = $( this ).attr('src'), removePano = $('.largePanorama'); removePano.length && removePano.remove(); if( src.search(search) == -1 ) { ( src.search('logo-tos.png') > 0 || src.search('iw_panoramio.png') > 0 || src.search('/mw-panoramio/photos/thumbnail/') > 0 ) && ( e.which != 3 && e.which == 1 && ( window.open( $( this ).closest('a').attr('href'), '_blank' ), e.preventDefault() ) ); return false; } pop = src.split(search).pop(); cl = pop.split('.').shift(); // tagcl = '.'+cl; elem = $( '.zoom' ); img = $( '.theImg' ); panocl = '.largePanorama'; panoPhoto = 'http://www.panoramio.com/photo/' + cl; linkLarge = 'http://static.panoramio.com/photos/large/' + pop; linkHuge = 'http://static.panoramio.com/photos/1920x1280/' + pop; linkOrginal = 'http://static.panoramio.com/photos/original/' + pop; linkWrongPosition = 'http://www.panoramio.com/map_photo/?id=' + cl; panoElem = $( this ).parent().next().clone(); theTitle = $( this ).parent().parent().prev().clone().addClass('TheTitle'); sizeLarge = new Image(); sizeHuge = new Image(); sizeOrginal = new Image(); sizeLarge.src = linkLarge; sizeHuge.src = linkHuge; sizeOrginal.src = linkOrginal; startState = GM_getValue('startState'); startStateLink = startState == 'Huge' ? linkHuge : startState == 'Large' && linkLarge; reloadHref = locDoc.search('maps.google') > 0 ? $(document).find('#link').attr('href') : locDoc.search('www.panoramio.com/map') > 0 && window.location.href; insertMore = '
' + '' + '
'; insertRotate = '
' + '' + '' + '
'; function fn_defArea() { var fn_defHtml = function(){ var theImg = $('.theImg'), rotates = parseInt( $( '.largePanorama' ).attr('data-rotate') ), imgWidth = theImg.width(), imgHeight = theImg.height(), areaResize = rotates === 0 ? '"0, 0, '+imgWidth+', '+(imgHeight/2)+'"' : rotates == 90 ? '"0, 0, '+(imgWidth/2)+', '+imgHeight+'"' : rotates == 180 ? '"0,'+(imgHeight/2)+', '+imgWidth+', '+imgHeight+'"' : rotates == 270 && '"'+(imgWidth/2)+', 0, '+imgWidth+', '+imgHeight+'"', areaClose = rotates === 0 ? '"0,'+(imgHeight/2)+', '+imgWidth+', '+imgHeight+'"' : rotates == 90 ? '"'+(imgWidth/2)+', 0, '+imgWidth+', '+imgHeight+'"' : rotates == 180 ? '"0, 0, '+imgWidth+', '+(imgHeight/2)+'"' : rotates == 270 && '"0, 0, '+(imgWidth/2)+', '+imgHeight+'"'; $('#mymap').html( '' + '' ); }, fn_defListner = function(){ elem = $('.zoom'); img = $( '.theImg'); elem.on('mouseup', function(e) { state = img.attr('src').search('large') > 0 ? 'Huge':'Large'; e.which == 1 && this == e.target && ( state == 'Huge' ? img.attr('src',linkHuge) : state == 'Large' && img.attr('src',linkLarge), elem.parent().attr('data-state',state), fn_defArea() ); }); $( '.close' ).on('mouseup', function(e) { e.which == 1 && this == e.target && ( $('.largePanorama').remove(), $( document ).off('click', '.largePanorama, .zoom' ) ); }); }; setTimeout(fn_defHtml,10 ); setTimeout(fn_defListner,20 ); } src.search(search) !== -1 && ( $( '' ).appendTo('body') ); function fn_afterImgLoaded() { $( theTitle ).prependTo( panocl ); $( insertMore ).appendTo( '.TheTitle' ); $( panoElem.clone().addClass('pano') ).appendTo( panocl ); $( '
' ).appendTo( panocl ); GM_xmlhttpRequest({ method: "GET", url: panoPhoto, crossDomain: true, //onerror: onprogress: function(res) { var msg = "\n\r\t " + "Onprogress Report." // + "\nresponseText: " + res.responseText + "\nreadyState: " + res.readyState + "\nresponseHeaders: " + res.responseHeaders + "\nstatus: " + res.status + "\nstatusText: " + res.statusText + "\nfinalUrl: " + res.finalUrl; // + "\n\nContent-length: " + res.responseHeaders.match('Content-Length: \\d+').toString().split(': ').pop() // res.readyState == 4 && console.log(msg); }, onload: function(res) { var domain,href,split; res = res.responseText; $('#imageDetails').html( $(res).find('#details').parent() ); $( panoElem.clone().addClass('justImg') ).prependTo('.largePanorama .interim-info-card'); $('
').insertAfter('#details'); $( $(res).find('#place') ).insertAfter('#details'); $( $(res).find('#map_info_breadcrumbs').html() ).appendTo('#map_info_breadcrumbs'); $( '' ).appendTo('#map_info_breadcrumbs'); $( $(res).find('#map_info_name a') ).appendTo('#map_info_breadcrumbs'); $( $(res).find('#location .geo') ).appendTo('#map_info_breadcrumbs'); $('#map_info_breadcrumbs').find('a').each(function(id,el){ domain = 'http://www.panoramio.com/map/', href = $( el ).attr('href'), split = href.split('/map/').pop(); $( el ).addClass('nr'+id); split = split.replace('&z=12&','&z=1&').replace('&z=9&','&z=5&').replace('&z=4&','&z=1&'); id !== 1 ? $( el ).attr('href', domain + split) : $( el ).attr('href', domain); }); $('.nr0').attr('href') == $('.nr1').attr('href') && $('.nr1').attr('href', domain + split.replace('&z=1&','&z=12&').replace('&z=5&','&z=12&')); } }); function createLinks() { //http://developer-agent.com/wp-content/uploads/2015/02/images_no_image_jpg14.jpg $( '
' + 'Normal: '+( sizeLarge.naturalWidth + 'x' + sizeLarge.naturalHeight )+'' + 'Large: '+( sizeHuge.naturalWidth + 'x' + sizeHuge.naturalHeight )+'' + 'Orginal: '+( sizeOrginal.naturalWidth + 'x' + sizeOrginal.naturalHeight )+'' + '
' ).appendTo( panocl ); sizeOrginal = sizeOrginal.naturalWidth, sizeHuge = sizeHuge.naturalWidth; sizeOrginal === sizeHuge ? $( '.OrginalBottonLink' ).hide() : sizeOrginal > sizeHuge && $( '.moreArrow, .OrginalBottonLink a' ).css('color','darkred'); sizeOrginal === sizeHuge && sizeOrginal === sizeLarge.naturalWidth && $( '.HugeBottonLink, .OrginalBottonLink' ).hide(); sizeOrginal === 0 && $( '.linkOrginal' ).hide(); $( '.Size span' ).each(function(id,el){ $( el ).text().search('0x0') > 0 && $( el ).hide(); }); } var override = setTimeout(function(){ clearInterval(checkSize); $('.Size').length === 0 && createLinks(); },2500), checkSize = setInterval(function(){ sizeOrginal.naturalWidth > 10 && sizeHuge.naturalWidth > 10 && sizeLarge.naturalWidth > 10 && ( clearTimeout(override), clearInterval(checkSize), $('.Size').length === 0 && createLinks() ); },25); $( '.moreArrow, .moreArrow font, .more' ).on('mousedown', function(e) { e.which == 1 && this == e.target && ( $( '.more ul' ).show(), timer( 512 ), $( '.reLoad' ).attr('href', $(document).find('#link').attr('href') ) ); }); $( '.configStartState' ).on('click', function(e) { e.which == 1 && this == e.target && GM_setValue('startState', img.attr('src').search('large') > 0 ? 'Large':'Huge'); }); $( '.imageDetails, .TheTitle, .Size, .pano' ).on('mouseup', function(e) { var elemLoc = $( '#imageDetails' ); l('elemLoc',elemLoc); g.ms === 0 && e.which == 1 && this == e.target && ( timer(64), elemLoc.is(':hidden') ? elemLoc.show(128) : elemLoc.hide(128) ); }); $( '.imageRotate' ).on('mouseup', function(e) { var elemLoc = $( '.largePanorama'), rotate = $( '#rotate' ); e.which == 1 && this == e.target && ( rotate.size() === 0 ? $( insertRotate ).appendTo( '.TheTitle' ) : rotate.remove(), $( '.rotates' ).on('click', function(e) { var rotate = parseInt( elemLoc.attr('data-rotate') ); e.which == 1 && this == e.target && ( rotate = $( this ).hasClass('rotateRight') ? ( rotate == 270 ? 0 : rotate + 90 ):( rotate === 0 ? 270 : rotate - 90 ), elemLoc.attr('data-rotate', rotate ).css('cssText','transform: translate(-50%,-50%) rotate('+rotate+'deg)'), $( '#imageDetails' ).css('cssText','transform: translate(-50%,-50%) rotate(-'+rotate+'deg)'), fn_defArea() ); }) ); }); $( '#imageDetails' ).on('mouseleave', function(e) { $( this ).hide(256); }); $( '.more ul' ).on('mouseleave', function(e) { g.ms === 0 && this == e.target && $( this ).hide(); }); $( '.more li a' ).on('click', function(e) { g.ms === 0 && e.which == 1 && this == e.target && $( '.more ul' ).hide(); }); } var checkLoaded = setInterval(function(){ $( '.theImg').width() > 50 && ( clearInterval(checkLoaded), fn_afterImgLoaded(), $( panocl ).css('cssText',''), fn_defArea() ); },25); setInterval( function() { var elemLoc = $( '.largePanorama font'); elemLoc.length > 0 && ( elemLoc.each( function(id,el) { $( el ).replaceWith( $( el ).text() ); }) ); },3000 ); }); } //----------------------------------------------------------------------------------------------------------// // Run Sequence // //----------------------------------------------------------------------------------------------------------// $( document ).ready(function(){ var rImg = $('img'); ( locDoc.search('maps.google') > 0 || locDoc.search('www.panoramio.com/map') > 0 ) ? ( fn_BasicNew(), googleMaps() ) : ( locDoc.search('static.panoramio.com/photos/') > 0 && ( $(rImg).width() === 0 || $(rImg).width() === 0 ) ) && ( rImg.attr('width', rImg.get(0).naturalWidth).attr('height', rImg.get(0).naturalHeight ), rImg.simulate('click'), console.log('IMG width', rImg.get(0).naturalWidth), console.log('IMG width var', rImg.get(0).naturalWidth), alert('IMG width') ); }); //----------------------------------------------------------------------------------------------------------// // The END // //----------------------------------------------------------------------------------------------------------// $( document ).on('click','*',function(e){ this == e.target && console.log('target',e.target); }); }(jQuery));