// ==UserScript==
// @name wikiverify
// @namespace wikiverify-test-001
// @include https://www.wikidata.org/wiki/Q*
// @version 1
// @require https://code.jquery.com/jquery-3.1.1.min.js
// @require https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
// @resource bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
// @grant GM_addStyle
// @grant GM_getResourceText
// ==/UserScript==
//I assume this is something like #include <bootstrap>
$("head").append (
'<link '
+ 'href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" '
+ 'rel="stylesheet" type="text/css">'
);
// container for the button; with this it's 17x17 px big (had to remove padding to get it this small)
$("head").append(
'<style>'
+ '.buttonContainer{padding: 0 !important; margin: 0 !important; width:17px; height:17px;} '
+ '.font-styles{font-size: 0.875em; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} '
+ '.popover-styles{width:20%;} '
+ '.popover-button-styles{padding:5px;}'
+ '.verifiedColor{background: #339966 !important} '
+ '.buttonPopoverColor{background: #006699 !important} '
+ '</style>'
);
// used to center the glyphicon in the button and adjust the size of the glyphicon
$("head").append(
'<style>'
+ '.glyphicon {top: 25%; left: 25%; transform: translate(-50%, -50%); font-size:12px; }'
+ '</style>'
);
//iconspan adds a symbol to the button
var iconspanSuccess = $('<span>')
.addClass('glyphicon glyphicon-ok')
.attr('aria-hidden', 'true');
var iconspanFailed = $('<span>')
.addClass('glyphicon glyphicon-exclamation-sign')
.attr('aria-hidden','true');
// this div contains button and help link, such that both have the same position
var buttondiv = $('<div>')
.attr('style','position:absolute; margin-left:500px; margin-top:-35px;');
//this is a bootstrap-styled button
var verifiedHTML = $('<button>')
.attr('data-container','body')
.attr('name','verifiedReference')
.attr('type','button')
.attr('style','float:left;')
.attr('data-toggle', 'popover')
.addClass('btn btn-success buttonContainer btn-block verifiedColor');
verifiedHTML.append(iconspanSuccess);
var iconspanInfo = $('<span>')
.addClass('glyphicon glyphicon-question-sign')
.attr('aria-hidden', 'true')
.attr('color','white !important');
var infoIcon = $('<button>')
.attr('type','button')
.attr('onclick','window.open("https://www.wikidata.org/wiki/User:WikiverifyUCD2017","_blank")')
.attr('style','color:white; background-color:black;')
.addClass('btn buttonContainer btn-block');
infoIcon.append(iconspanInfo);
var unverifiedHTML = $('<button>')
.attr('data-container','body')
.attr('name','unverifiedReference')
.attr('type','button')
.attr('style','float:left;')
.addClass('btn btn-warning buttonContainer btn-block');
unverifiedHTML.append(iconspanFailed);
//sample clearsign signature via https://www.cs.rutgers.edu/~watrous/pgp-sat.html
var sampleSig = "-----BEGIN PGP SIGNED MESSAGE-----\n\nThis is a sample.\n\nThis is a sample text file. I created it with an editor. If it were\nan actual message, it would contain some useful information.\n\nThis has been a sample.\n\n-----BEGIN PGP SIGNATURE-----\nVersion: 2.6.2\n\niQCVAwUBMoSCcM4T3nOFCCzVAQFJaAP/eaP2nssHHDTHyPBSjgwyzryguwBd2szF\n\nU5IFy5JfU+PAa6NV6m/UWW8IKczNX2cmaKQNgubwl3w0odFQPUS+nZ9myo5QtRZh\nDztuhjzJMEzwtm8KTKBnF/LJ9X05pSQUvoHfLZ/waJdVt4E/xfEs90l8DT1HDdIz\nCvynscaD+wA=\n=Xb9n\n-----END PGP SIGNATURE-----";
//sample public key via https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/4/html/Step_by_Step_Guide/s1-gnupg-export.html
var samplePub = "-----BEGIN PGP PUBLIC KEY BLOCK-----\nVersion: GnuPG v1.2.1 (GNU/Linux)\nComment: For info see http://www.gnupg.org\n\nmQGiBDkHP3URBACkWGsYh43pkXU9wj/X1G67K8/DSrl85r7dNtHNfLL/ewil10k2\nq8saWJn26QZPsDVqdUJMOdHfJ6kQTAt9NzQbgcVrxLYNfgeBsvkHF/POtnYcZRgL\ntZ6syBBWs8JB4xt5V09iJSGAMPUQE8Jpdn2aRXPApdoDw179LM8Rq6r+gwCg5ZZa\npGNlkgFu24WM5wC1zg4QTbMD/3MJCSxfL99Ek5HXcB3yhj+o0LmIrGAVBgoWdrRd\nBIGjQQFhV1NSwC8YhN/4nGHWpaTxgEtnb4CI1wI/G3DK9olYMyRJinkGJ6XYfP3b\ncCQmqATDF5ugIAmdditnw7deXqn/eavaMxRXJM/RQSgJJyVpbAO2OqKe6L6Inb5H\nkjcZA/9obTm499dDMRQ/CNR92fA5pr0zriy/ziLUow+cqI59nt+bEb9nY1mfmUN6\nSW0jCH+pIQH5lerV+EookyOyq3ocUdjeRYF/d2jl9xmeSyL2H3tDvnuE6vgqFU/N\nsdvby4B2Iku7S/h06W6GPQAe+pzdyX9vS+Pnf8osu7W3j60WprQkUGF1bCBHYWxs\nYWdoZXIgPHBhdWxnYWxsQHJlZGhhdC5jb20+iFYEExECABYFAjkHP3UECwoEAwMV\nAwIDFgIBAheAAAoJEJECmvGCPSWpMjQAoNF2zvRgdR/8or9pBhu95zeSnkb7AKCm\n/uXVS0a5KoN7J61/1vEwx11poLkBDQQ5Bz+MEAQA8ztcWRJjW8cHCgLaE402jyqQ\n37gDT/n4VS66nU+YItzDFScVmgMuFRzhibLblfO9TpZzxEbSF3T6p9hLLnHCQ1bD\nHRsKfh0eJYMMqB3+HyUpNeqCMEEd9AnWD9P4rQtO7Pes38sV0lX0OSvsTyMG9wEB\nvSNZk+Rl+phA55r1s8cAAwUEAJjqazvk0bgFrw1OPG9m7fEeDlvPSV6HSA0fvz4w\nc7ckfpuxg/URQNf3TJA00Acprk8Gg8J2CtebAyR/sP5IsrK5l1luGdk+l0M85FpT\n/cen2OdJtToAF/6fGnIkeCeP1O5aWTbDgdAUHBRykpdWU3GJ7NS6923fVg5khQWg\nuwrAiEYEGBECAAYFAjkHP4wACgkQkQKa8YI9JamliwCfXox/HjlorMKnQRJkeBcZ\niLyPH1QAoI33Ft/0HBqLtqdtP4vWYQRbibjW\n=BMEc\n-----END PGP PUBLIC KEY BLOCK-----";
//sample step explanations
var explanation1 = "Please open your local PGP tool in order to manually verify the signature.\nIf you don't have one installed yet, we recommend GnuPG.\nThe manual verification process will require the signature, the signed data and the public key of the signer.\n";
var explanation2 = "The following block contains both the signed data and the signature you want to verify.\n";
var explanation3 = "You need to import this public key into the keyring of your PGP tool.\n";
var explanation4 = "Now run your PGP tool and select the signature file to manually verify.\n";
//this is a bootstrap-styled modal
var manualVerification = ''+
'<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
'<div class="modal-dialog" role="document">'+
'<div class="modal-content" style="-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px">'+
'<div class="modal-header">'+
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" style="font-size: 18px" aria-hidden="true"></span></button>'+
'<h2 class="modal-title" id="myModalLabel">Manual Verification</h2>'+
'</div>'+
'<div class="modal-body">'+
'<h3> <span class="glyphicon glyphicon-console" style="top:unset;left:unset;transform:unset;font-size:unset;" aria-hidden="true"></span> Step 1: Open Local PGP Tool</h3>\n '+explanation1+
'<h3> <span class="glyphicon glyphicon-duplicate" style="top:unset;left:unset;transform:unset;font-size:unset;" aria-hidden="true"></span> Step 2: Save Signature </h3>\n'+explanation2+
'<div class="form-group"><label for="comment"><h4>Signature:</h4></label><textarea class="form-control" rows="3" id="comment" style="resize:none" readonly>'+sampleSig+'</textarea></div>'+
'<button type="button" class="btn btn-default">Save As .asc-File</button> <button type="button" class="btn btn-default">Copy</button>'+
'<h3> <span class="glyphicon glyphicon-download-alt" style="top:unset;left:unset;transform:unset;font-size:unset;" aria-hidden="true"></span> Step 3: Save & Import Public Key </h3>\n'+explanation3+
'<div class="form-group"><label for="comment"><h4>Public Key:</h4></label><textarea class="form-control" rows="3" id="comment" style="resize:none" readonly>'+samplePub+'</textarea></div>'+
'<button type="button" class="btn btn-default">Save As .asc-File</button> <button type="button" class="btn btn-default">Copy</button>'+
'<h3> <span class="glyphicon glyphicon-eye-open" style="top:unset;left:unset;transform:unset;font-size:unset;" aria-hidden="true"></span> Step 4: Verify Signature </h3>\n'+explanation4+
'</div>'+
'</div>'+
'</div>'+
'</div>';
// 854 == "reference URL"; 248 == "stated in"; 143 == "imported from"
// does not really work as intended yet:
// on Obama's Wikidata page an 'imported from' and a 'reference URL' belong to the same reference
// => maybe only use reference URL?
var all_refproperties = $("a[title='Property:P854']");
// all_refproperties.push($("a[title='Property:P248']"));
// all_refproperties.push($("a[title='Property:P143']"));
console.log(all_refproperties.length);
/*
We loop over reference containers which have the property "reference URL".
For each of those, we build up a div-container containing the button and helplink.
After this is done, we search the parent wikibase-snakview item, to insert the newly generated div after this element.
*/
all_refproperties.each(function(){
var $this = $(this);
var $mydiv = buttondiv;
var $mybutton = verifiedHTML;
var $manVer = manualVerification;
$mydiv.append($mybutton);
$mydiv.append($manVer);
var $snakview = $this.closest(".wikibase-snakview")[0];
$snakview.after($mydiv.clone()[0]);
});
// adds tooltip and popover to all elements with the respective name => not pretty but works
$('[name="verifiedReference"]').tooltip({
trigger : 'manual',
html : 'true',
title : '<div style="float:left;padding-right:5px;">Verified Reference</div> '
}).on('mouseenter', function(){
var _this = this;
$(this).tooltip("show");
var temp = $('.tooltip-inner').find('.glyphicon');
if (temp.length==0){
$('.tooltip-inner').append(infoIcon.clone());
}
$('.tooltip').on('mouseenter', function(){
}).on('mouseleave', function(){
var _this = this;
setTimeout(function(){
if (!$('.tooltip:hover').length){
$(_this).tooltip('hide');
}
}, 300);
})
}).on('mouseleave', function(){
var _this = this;
setTimeout(function(){
if (!$('.tooltip:hover').length){
$(_this).tooltip('hide');
}
}, 300);
});
$('[name="unverifiedReference"]').tooltip({
trigger : 'hover',
//placement : 'right',
title : 'Caution: Unable to Verify Reference',
});
var content = $('<div>').addClass('row');
var tableRow1Col1 = $('<div>').addClass('col-md-5').html("Signer");
var tableRow1Col2 = $('<div>').addClass('col-md-5').html("signer_name");
var tableRow2Col1 = $('<div>').addClass('col-md-5').html("Date");
var tableRow2Col2 = $('<div>').addClass('col-md-5').html("YYYY-MM-DD");
var tableRow3 = $('<div>').addClass('col-md-10');
var text = $('<p>').attr('style','color:#339966;padding-top: 10px;').html("This signature is correctly verified");
tableRow3.append(text);
content.append(tableRow1Col1);
content.append(tableRow1Col2);
content.append(tableRow2Col1);
content.append(tableRow2Col2);
content.append(tableRow3);
$('[name="verifiedReference"]').popover({
trigger : 'manual',
placement : 'right',
html : 'true',
title : 'Signature Details',
content : content,
template : '<div class="popover"><div class="arrow"></div>'+
'<h3 class="popover-title"></h3><div class="popover-content">'+
'</div><div class="popover-footer">' +
'<div class="btn-group btn-group-justified">'+
'<div class="btn-group popover-button-styles"><button type="button" class="btn btn-primary popover-submit font-styles buttonPopoverColor">Contact Signer</button></div>' +
'<div class="btn-group popover-button-styles"><button id="manual" type="button" class="btn btn-primary popover-submit font-styles buttonPopoverColor" data-toggle="modal" data-target="#myModal">Manual Verification</button></div>'
}).click(function(e) {
$(this).popover('show');
$('.popover').addClass('font-styles');
$.each($('.popover-title'), function(idx, val){
var temp = $(val).find('.close');
console.log(temp);
if (temp.length==0){
$(val).append('<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" style="font-size: 18px" aria-hidden="true"></span></button>');
}
});
$('.close').click(function(e){
$(this).closest('.popover').popover('hide');
});
e.preventDefault();
});
$('[name="unverifiedReference"]').popover({
trigger : 'focus',
placement : 'right',
html : 'true',
title : 'Signature Details <button>Test</button>',
content : 'Test',
template : '<div class="popover font-styles"><div class="arrow"></div>'+
'<h3 class="popover-title"></h3><div class="popover-content">'+
'</div><div class="popover-footer">' +
'<button type="button" class="btn btn-primary popover-submit">Contact Signer</button>' +
'<button id="manual" type="button" class="btn btn-primary popover-submit" data-toggle="modal" data-target="#myModal">Manual Verification</button>'
});
$('#myModal').on('shown.bs.modal', function() {
$(this).before($('.modal-backdrop'));
$('.popover').popover('hide');
});
