A potentially handy Greasemonkey script for glowficcers

If it's germane, yet doesn't fit into another category, it can go here.

A potentially handy Greasemonkey script for glowficcers

Postby Kappa » Wed Jan 21, 2015 8:16 pm

Code: Select all
// ==UserScript==
// @name        DW Icon Preview
// @namespace   Pythian Habenero
// @description Handy preview of icons of logged-in user on Dreamwidth
// @include     http://*.dreamwidth.org/*
// @version     1
// @grant       none
// ==/UserScript==

// i love the internet
Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

// Scooped from that one userscript last seen as a googlegroups attachment
var sns = document.getElementsByClassName("ljuser");
if(document.body.hasClass("has-navstrip")) {
  probablyMine = sns[0];
} else {
  probablyMine = sns[sns.length-1];
}
var probablyMe = probablyMine.getAttribute("lj:user");
var iconUrl = "http://" + probablyMe + ".dreamwidth.org/icons?sortorder=keyword";

var canvas = document.getElementById("canvas");

var btn = document.createElement("div");
// var btnTxt = document.createTextNode(probablyMe);
// btn.appendChild(btnTxt);
btn.innerHTML = "<a href=\"" + iconUrl + "\">" + probablyMe + "</a>";

var pmLink = probablyMine.childNodes[1];
var clr = "#C1272D";
if(pmLink.currentStyle)
  clr = pmLink.currentStyle["color"];
else if(window.getComputedStyle)
  clr = document.defaultView.getComputedStyle(pmLink, null).getPropertyValue("color");

btn.style.position="fixed";
btn.style.top="1em";
btn.style.right="1em";
btn.style.padding="0.25em";
btn.style.backgroundColor="#ffffff";
btn.style.color=clr;
btn.style.fontWeight="bold";
btn.style.border="0.25em solid " + clr;
btn.style.borderRadius = "0.5em";
btn.style.zIndex="2112";

canvas.appendChild(btn);


I'm working on a much fancier version, but until then, this plops a link in the top right corner of any Dreamwidth page that sends you to the keyword-sorted icon page of the currently logged in user. (If you're logged out, it probably goes to the person whose journal you are browsing but may behave unpredictably.)

I haven't tested it extensively, but it has yet to break on me in any terrible way, and it saves me having to keep my characters' keyword-sorted icon pages open in extraneous tabs while I'm threading.
User avatar
Kappa
 
Posts: 3492
Joined: Fri Mar 21, 2014 5:47 pm
Location: under a pile of Jokers
Pronouns: 'He' or 'she', interchangeably

Re: A potentially handy Greasemonkey script for glowficcers

Postby Marri » Wed Jan 21, 2015 11:12 pm

I made a slightly fancier version.

Code: Select all
// ==UserScript==
// @name        Dreamwidth icons preview
// @namespace   Marri Nikari
// @include     http://*.dreamwidth.org/*
// @exclude     http://*.dreamwidth.org/icons?sortorder=keyword
// @version     1
// @grant       none
// ==/UserScript==
var username=$("input[name='user']").val();
if (username != "") {
  $("body").prepend("<div id='toggle-iframe' style='right:0px;font-size:12px;font-weight:bold;width:260px;text-align:center;height:15px;padding:5px;background-color:white;z-index:100;position:fixed;border:1px black solid;border-top:0px;top:0px;'>Toggle Icons Window</div><div id='right-col' style='border-left:2px black solid; border-bottom: 2px black solid; display:none;overflow:hidden; width:260px;right:0px;padding:5px;position:fixed;z-index:99;background-color:white;text-align:center;font-size:12px;height:100%;min-height:100%'></div>");
  $("#right-col").html("<iframe src='http://" + username + ".dreamwidth.org/icons?sortorder=keyword' id='icons-frame' style='position: relative; top: -330px; width: 330px; left: -60px;' />");
  var height = $("#right-col").height();
  $("#icons-frame").css("height",height+350+"px");
  $("#toggle-iframe").click(function() { $("#right-col").toggle(); });
}


I apologize for the ugly. It was, as far as I could tell, unavoidable. I did what I could with the magic of 'move shit around on the page to hide the edges'. (For the curious: Because Javascript is the Worst Thing and considers x.dreamwidth.org to be a different website than y.dreamwidth.org and disallows editing of the 'foreign' site.)

It should behave properly for both the logged in and logged out cases. If you find any bugs you should tell them to me so I can fix them :)
User avatar
Marri
 
Posts: 1021
Joined: Mon Mar 31, 2014 7:47 am

Re: A potentially handy Greasemonkey script for glowficcers

Postby Kappa » Sat Jan 24, 2015 1:11 pm

I screwed around with Marri's fancier version until it became somewhat less ugly, at least on my exact specific display:

Code: Select all
// ==UserScript==
// @name        Dreamwidth icons preview
// @namespace   Marri Nikari
// @include     http://*.dreamwidth.org/*
// @exclude     http://*.dreamwidth.org/icons?sortorder=keyword
// @version     1.1
// @grant       none
// ==/UserScript==
var username = $('input[name=\'user\']').val();
if (username != '') {
  $('body').prepend('<div id=\'toggle-iframe\' style=\'right:-1px;font-size:12px;font-weight:bold;width:360px;text-align:center;height:15px;padding:5px;background-color:white;z-index:100;position:fixed;border:1px black solid;border-top:0px;top:0px;\'>Toggle Icons Window</div><div id=\'right-col\' style=\'border-left:1px black solid; border-bottom: 2px black solid; display:none;overflow:hidden; width:360px;right:0px;padding:5px;position:fixed;z-index:99;background-color:white;text-align:center;font-size:12px;height:100%;min-height:100%\'></div>');
  $('#right-col').html('<iframe src=\'http://' + username + '.dreamwidth.org/icons?sortorder=keyword\' id=\'icons-frame\' style=\'position: relative; top: -305px; width: 550px; left: -60px;\' />');
  var height = $('#right-col').height();
  $('#icons-frame').css('height', height + 410 + 'px');
  $('#toggle-iframe').click(function () {
    $('#right-col').toggle();
  });
}


But oh my god editing that shit on a text editor that inexplicably lacks word wrap is TERRIBLE. XD
User avatar
Kappa
 
Posts: 3492
Joined: Fri Mar 21, 2014 5:47 pm
Location: under a pile of Jokers
Pronouns: 'He' or 'she', interchangeably

Re: A potentially handy Greasemonkey script for glowficcers

Postby PlainDealingVillain » Sat Jan 24, 2015 2:57 pm

I think the numbers may need to be tweaked on each individual system to fix the ugly. To make the whole icon show up in the box on my screen, I changed them to
Code: Select all
$('#right-col').html('<iframe src=\'http://' + username + '.dreamwidth.org/icons?sortorder=keyword\' id=\'icons-frame\' style=\'position: relative; top: -305px; width: 530px; left: -40px;\' />');


Also, you can add line breaks yourself to do word wrap by hand, which is usually the preferred method for programming-oriented text editors. Replace the long line with this
Code: Select all
  $('body').prepend('<div id=\'toggle-iframe\' style=\'right:-1px;font-size:12px;font-weight:bold;width:360px;text-align:center;height:15px;padding:5px;background-color:white; \
z-index:100;position:fixed;border:1px black solid;border-top:0px;top:0px;\'>Toggle Icons Window</div><div id=\'right-col\' style=\'border-left:1px black solid; \
border-bottom: 2px black solid; display:none;overflow:hidden; width:360px;right:0px;padding:5px;position:fixed;z-index:99;background-color:white;text-align:center;font-size:12px;height:100%;\
min-height:100%\'></div>');

and it works just fine.

EDIT: That doesn't come out as easy to read with a different wrap width (duh). The critical bit is putting a '\' before each newline within the string; this escapes them so the parser knows not to treat that as the end of a line and to continue reading the string as though you'd left it on one stupidly-long line. This kind of weirdness between different screen sizes for word wrap is why programmers generally do their wraps by hand; there's also a standard size you wrap them to, which is the default width of a terminal window on Unix systems. (IIRC, 80 characters, fixed-width)
User avatar
PlainDealingVillain
 
Posts: 620
Joined: Tue Apr 01, 2014 10:15 pm
Pronouns: he etc.

Re: A potentially handy Greasemonkey script for glowficcers

Postby Kappa » Sat Jan 24, 2015 3:36 pm

I changed some other things:

Code: Select all
// ==UserScript==
// @name        Dreamwidth icons preview
// @namespace   Marri Nikari
// @include     http://*.dreamwidth.org/*
// @exclude     http://*.dreamwidth.org/icons?sortorder=keyword
// @version     1.2
// @grant       none
// ==/UserScript==
var username = $('input[name=\'user\']').val();
if (username != '') {
  $('body').prepend('<div id=\'toggle-iframe\' style=\'right:-1px;font-size:12px;width:360px;text-align:center;height:15px;padding:5px;background-color:white;z-index:100;position:fixed;border:1px black solid;border-top:0px;top:0px;\'>\Show Icons: <b>' + username + '</b></div><div id=\'right-col\' style=\'border-left:1px black solid; border-bottom: 2px black solid; display:none;overflow:hidden; width:360px;right:0px;padding:5px;position:fixed;z-index:99;background-color:white;text-align:center;font-size:12px;height:100%;min-height:100%\'></div>');
  $('#right-col').html('<iframe src=\'http://' + username + '.dreamwidth.org/icons?sortorder=keyword\' id=\'icons-frame\' style=\'position: relative; top: -305px; width: 550px; left: -60px;\' />');
  var height = $('#right-col').height();
  $('#icons-frame').css('height', height + 410 + 'px');
  $('#toggle-iframe').click(function () {
    $('#right-col').toggle();
  });
}


Maybe if you identify exactly which numbers you need to change to make it fit nice on your display, they can be separated out from the rest for easier fiddling?

Also, re: word wrap: I mean, gvim wraps text adequately for my purposes... it's just the built-in editor I get when I edit a Greasemonkey script from within Firefox doesn't.
User avatar
Kappa
 
Posts: 3492
Joined: Fri Mar 21, 2014 5:47 pm
Location: under a pile of Jokers
Pronouns: 'He' or 'she', interchangeably

Re: A potentially handy Greasemonkey script for glowficcers

Postby PlainDealingVillain » Sun Jan 25, 2015 4:08 am

I mean, I changed the width and left bits of that line, but I'm not sure what other things might need to be customized from display to display? It worked the same on both OSes of my laptop, so it may be purely a resolution issue, which would suggest a percentage-based solution could be hardcoded.

The Chrome equivalent doesn't have wrapping either. I think it may be that it's hard to code word wrapping in a text editor written in Javascript, and whoever wrote Greasemonkey/Tampermonkey just didn't care to bother.
User avatar
PlainDealingVillain
 
Posts: 620
Joined: Tue Apr 01, 2014 10:15 pm
Pronouns: he etc.


Return to Miscellanea

Who is online

Users browsing this forum: No registered users and 1 guest