Difference between revisions of "Userscript experimental local features"
(2 intermediate revisions 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 | + | == 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 | + | 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. | |
− | |||
− | |||
− | |||
− | |||
+ | '''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: | ||
− | + | '''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. | ||
− | + | <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 == | ||
Line 61: | Line 99: | ||
# Specific to trentstudents.org | # Specific to trentstudents.org | ||
# Not public i.e. unlisted on directory | # Not public i.e. unlisted on directory | ||
− | # Requires a userscript manager (install page for | + | # Requires a userscript manager (install page for Violentmonkey recommended) |
# Should be easily adaptable source viewable [http://tinyurl.com/ntsuserscript here] | # Should be easily adaptable source viewable [http://tinyurl.com/ntsuserscript here] |
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.
Contents
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:
- Events
- Products
- Promotions
- Groups
- Articles
- Resources
- 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
What if I have caused issues?
Really easy to disable just a couple of clicks
Notes on the script:
- Specific to trentstudents.org
- Not public i.e. unlisted on directory
- Requires a userscript manager (install page for Violentmonkey recommended)
- Should be easily adaptable source viewable here