Difference between revisions of "Userscript experimental local features"

From UnionCloud Support
Jump to: navigation, search
(violentmonkey not violetmonkey)
 
(One intermediate revision by one other user not shown)
Line 6: Line 6:
 
A user script is a small javascript file which modifies websites as they run locally on your machine.
 
A user script is a small javascript file which modifies websites as they run locally on your machine.
  
== Why would I want todo that? ==
+
== Why would I want to do that? ==
  
To tweak your experience as a stop gap solution whose features will eventually be added to the platform by NUS. See ideas on get satisfaction.  
+
To tweak your experience as a stop gap solution whose features will eventually be added to the platform by NUS. See ideas on get satisfaction.
  
 
== Example Features ==
 
== Example Features ==
  
A staff logon button for the homepage. (On our page we have to click sign then, then select non student.)
+
A staff logon button for the homepage.(On our page, we have to click sign them, then select a non student.)
 
I have added Links to the navigation to automatically view all:
 
I have added Links to the navigation to automatically view all:
 
# Events
 
# Events
Line 18: Line 18:
 
# Promotions
 
# Promotions
 
# Groups
 
# Groups
 +
# Articles
 +
# Resources
 +
# Positions
  
 
It appends new links to the DOM with  
 
It appends new links to the DOM with  
Line 23: Line 26:
 
   ?grid%5Border%5D=start_date&grid%5Border_direction%5D=asc&grid%5Bpp%5D=189
 
   ?grid%5Border%5D=start_date&grid%5Border_direction%5D=asc&grid%5Bpp%5D=189
  
where D is the total number of results at the end of the chosen section.
+
Where D is the total number of results at the end of the chosen section.
 
 
Add new event from the nav e.g. administrator/events/new
 
 
 
Hide items marked as deleted in the shop
 
  
 +
'''Hide items marked as deleted in the shop:
 +
'''
 
   if(location.pathname=="/administrator/products"){
 
   if(location.pathname=="/administrator/products"){
 
   $("tr td:contains('OLD Clothing Stock')").parent().hide();
 
   $("tr td:contains('OLD Clothing Stock')").parent().hide();
Line 35: Line 36:
  
  
Finally added a save button direct from product edit page.
+
'''Adding a save button direct from product edit page:
 +
'''
 +
 
 +
This is done by loading the product variants page in a frame on the side.
 +
 
 +
<pre> if(location.pathname.match(/^\/administrator\/products\/\d\d\d\d\/edit/)){    var x = window.location.href.match(/(.*)(\/\d*)/)[1]+/product_variants/    document.body.innerHTML += '<div style="display:block;position:absolute;top:47%;left:91%;z-index:997;"><iframe id="saver" src="" frameborder="0" allowtransparency="yes" scrolling="no" style="border: 0px none; margin-left: -36px; height: 912px; margin-top: -480px; width: 650px;position:relative; left:-20px;top:30px;" ></iframe> </div>';          var saverFrame = document.getElementById("saver")          saverFrame.src=x </pre>
 +
 
 +
'''Adding a next ticket button on hover:
 +
'''
 +
 
 +
Increments the final number in the URL to load the next ticket on hover over the new button.
  
This is done by loading the product variants page in an iframe at the side.
+
<pre>
 +
if (/event_ticket_types/.test(window.location.href)) {
 +
$(".button-holder").attr("id","nextTicketButton");
 +
var nextTicketButton = document.getElementById('nextTicketButton');
 +
nextTicketButton.insertAdjacentHTML('afterend','<button id="nxtTicketBtn" style="transform:translate(300%,-165%);border:0" class="btn btn-default">Next Ticket Hover</button>');   
 +
  var nextTicketFinal = document.getElementById('nxtTicketBtn');
 +
  nextTicketFinal.addEventListener("mouseover",function(){
 +
    var e, s;
 +
    var IB = 1;
  
 +
    function isDigit(c) {
 +
        return ("0" <= c && c <= "9");
 +
    }
 +
    var L = location.href;
 +
    var LL = L.length;
 +
    for (e = LL - 1; e >= 0; --e)
 +
        if (isDigit(L.charAt(e))) {
 +
            for (s = e - 1; s >= 0; --s)
 +
                if (!isDigit(L.charAt(s))) break;
 +
            break;
 +
        }++s;
 +
    if (e < 0) return;
 +
    var oldNum = L.substring(s, e + 1);
 +
    var newNum = "" + (parseInt(oldNum, 10) + IB);
 +
    while (newNum.length < oldNum.length) newNum = "0" + newNum;
 +
    location.href = L.substring(0, s) + newNum + L.slice(e + 1);
 +
});
  
 +
  }
 +
</pre>
  
 
== How do I get started ==
 
== How do I get started ==

Latest revision as of 12:07, 15 August 2018

After collecting feedback in certain areas of the dashboard I implemented by own test userscript (Example given NTSU) to ease use of the dashboard.

What is a userscript?

A user script is a small javascript file which modifies websites as they run locally on your machine.

Why would I want to do that?

To tweak your experience as a stop gap solution whose features will eventually be added to the platform by NUS. See ideas on get satisfaction.

Example Features

A staff logon button for the homepage.(On our page, we have to click sign them, then select a non student.) I have added Links to the navigation to automatically view all:

  1. Events
  2. Products
  3. Promotions
  4. Groups
  5. Articles
  6. Resources
  7. Positions

It appends new links to the DOM with

 ?grid%5Border%5D=start_date&grid%5Border_direction%5D=asc&grid%5Bpp%5D=189

Where D is the total number of results at the end of the chosen section.

Hide items marked as deleted in the shop:

 if(location.pathname=="/administrator/products"){
 $("tr td:contains('OLD Clothing Stock')").parent().hide();
 $("tr td:contains('Delete')").parent().hide();
 };


Adding a save button direct from product edit page:

This is done by loading the product variants page in a frame on the side.

 if(location.pathname.match(/^\/administrator\/products\/\d\d\d\d\/edit/)){     var x = window.location.href.match(/(.*)(\/\d*)/)[1]+/product_variants/     document.body.innerHTML += '<div style="display:block;position:absolute;top:47%;left:91%;z-index:997;"><iframe id="saver" src="" frameborder="0" allowtransparency="yes" scrolling="no" style="border: 0px none; margin-left: -36px; height: 912px; margin-top: -480px; width: 650px;position:relative; left:-20px;top:30px;" ></iframe> </div>';          var saverFrame = document.getElementById("saver")          saverFrame.src=x 

Adding a next ticket button on hover:

Increments the final number in the URL to load the next ticket on hover over the new button.

 if (/event_ticket_types/.test(window.location.href)) {
 $(".button-holder").attr("id","nextTicketButton");
 var nextTicketButton = document.getElementById('nextTicketButton');
 nextTicketButton.insertAdjacentHTML('afterend','<button id="nxtTicketBtn" style="transform:translate(300%,-165%);border:0" class="btn btn-default">Next Ticket Hover</button>');    
  var nextTicketFinal = document.getElementById('nxtTicketBtn');
  nextTicketFinal.addEventListener("mouseover",function(){ 
    var e, s;
    var IB = 1;

    function isDigit(c) {
        return ("0" <= c && c <= "9");
    }
    var L = location.href;
    var LL = L.length;
    for (e = LL - 1; e >= 0; --e)
        if (isDigit(L.charAt(e))) {
            for (s = e - 1; s >= 0; --s)
                if (!isDigit(L.charAt(s))) break;
            break;
        }++s;
    if (e < 0) return;
    var oldNum = L.substring(s, e + 1);
    var newNum = "" + (parseInt(oldNum, 10) + IB);
    while (newNum.length < oldNum.length) newNum = "0" + newNum;
    location.href = L.substring(0, s) + newNum + L.slice(e + 1);
});

  }

How do I get started

Install violentmonkey (link assumes chrome available on firefox/opera/maxthon)

Install the script from here

Open dashboard Open dashboard

Edit Edit Script

What if I have caused issues?

Really easy to disable just a couple of clicks

How to disable script

Notes on the script:

  1. Specific to trentstudents.org
  2. Not public i.e. unlisted on directory
  3. Requires a userscript manager (install page for Violentmonkey recommended)
  4. Should be easily adaptable source viewable here