Sort Account-Level Course Page Terms in Descending Order

The terms list on the account-level course page is sorted in ascending order. When I filter terms, I almost always want the current term or a recent term. Having to scroll to the bottom of our long list of terms is annoying, so I wrote some JavaScript (with the help of Stack Overflow) to sort the list by term ID in descending order. In case anyone else might find this useful, here it is:

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'accounts'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="comment token"><SPAN>// </SPAN><A class="jive-link-external-small" href="https://stackoverflow.com/questions/20693593" rel="nofollow noopener noreferrer" target="_blank">https://stackoverflow.com/questions/20693593</A></SPAN><BR />    <SPAN class="keyword token">var</SPAN> selectOptions <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'select optgroup[label="Active Terms"] option'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    selectOptions<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>a<SPAN class="punctuation token">,</SPAN>b<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN><BR />        <SPAN class="keyword token">return</SPAN> <SPAN class="token function">parseInt</SPAN><SPAN class="punctuation token">(</SPAN>b<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="token function">parseInt</SPAN><SPAN class="punctuation token">(</SPAN>a<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'select optgroup[label="Active Terms"]'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN>selectOptions<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

(I welcome tips for improvement, carroll-ccsd @James ‌!)

Find more posts tagged with

Admin

Comments

Robert

Hi Daniel,

I think you tagged me in this originally and it landed in my inbox, so I went through a couple hours of testing. Even tried to get rid of jQuery. I was able to replace the first 2 lines with plain old vanilla JavaScript, gave up getting the elements back into the DOM, jQuery's html() method is so nice and easy.

First,

window.location.pathname.indexOf('accounts') > -1 will be true, for any page with accounts in the title, and the code in the block will fire uncessarily. ex: /courses/123/pages/accounts-test

Try to be very specific, especially where users can throw a wrench into the logic.

I've provided an alternative below, including improvements by @James

via https://community.canvaslms.com/message/112296-re-custom-javascript-for-admincourses-page

It ensures /accounts is the root ^ of the pathname, and prevents further matching when the pattern is matched $

Second,

I tried your snippet in Chrome and Firefox, and could not get the sorting to work in Chrome. It worked fine in Firefox. Can you confirm this?

I will share this, which works in Chrome, Firefox, and Safari... and uses a little ES6. Arrow functions - JavaScript | MDN

<SPAN class="comment token">// needs be remain on 1 line</SPAN><BR />selectOptions<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>a<SPAN class="punctuation token">,</SPAN>b<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> b<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">-</SPAN> a<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN>‍‍<BR /><BR /><SPAN class="comment token">// and is equivelent to</SPAN><BR />selectOptions<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>a<SPAN class="punctuation token">,</SPAN>b<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="keyword token">return</SPAN> b<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">-</SPAN> a<SPAN class="punctuation token">.</SPAN>value<BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR /><SPAN class="comment token">// and also</SPAN><BR />selectOptions<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>a<SPAN class="punctuation token">,</SPAN>b<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="keyword token">return</SPAN> b<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">-</SPAN> a<SPAN class="punctuation token">.</SPAN>value<BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

IMO, if you can do it on 1 line, do it in 1 line. Smiley Happy

Additionally, I tried to remove duplicate/longer user defined values, by reusing the selector parts and your variable selectOptions. Since JavaScript is downloaded at the bottom of the page/generally last for users, I try to make the files/byte size/character length as short and sweet as possible. Personally, compress our JavaScript files down with minification before we put them on Canvas, this changes things like var myCamelVar = 1; into var a=1;

Choose for yourself, also if this is for a userscript (w/ Tampermonkey), it doesn't matter.

All together...

<SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />     <SPAN class="string token">'use strict'</SPAN><SPAN class="punctuation token">;</SPAN><BR />     <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/^\/accounts\/\d+$/</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">test</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />          <SPAN class="keyword token">let</SPAN> grp <SPAN class="operator token">=</SPAN> <SPAN class="string token">'select optgroup[label="Active Terms"]'</SPAN><SPAN class="punctuation token">,</SPAN><BR />               opts <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>grp <SPAN class="operator token">+</SPAN><SPAN class="string token">' option'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />          opts<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>a<SPAN class="punctuation token">,</SPAN>b<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> b<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">-</SPAN> a<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />          <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>grp<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN>opts<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />     <SPAN class="punctuation token">}</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

That's about 100 characters/~bytes smaller... (excluding your stack //comment)

...before adding IIFE - MDN Web Docs Glossary: Definitions of Web-related terms | MDN.

The IIFE is important. Providing 2 features: (1) It blocks your code from the global scope, this means grp and opts don't have to be unique to Canvas' JavaScript variables, or any other code blocks you are using where you might use grp/opts or selectOptions. Preventing unwanted interference. (2) It's a function expression, making it immediately invoked upon execution.

Robert

Remembered a couple more thoughts, and I know if I edit that post it's going for moderation, this is easier. :smileygrin:

There's a lot of React attributes in that select, suggesting it is populated by React. I saw 1 instance where the select was empty on page load. It might be necessary to add MutationObserver - Web APIs | MDN, which for /accounts can be taken from Custom JavaScript for Admin/Courses Page. I added the snippet above to a Tampermonkey user script, and it seemed to work fine without a mutation observer. YMMV

Sorting b.value and a.value, I removed the parseInt, see Long ID's in Javascript

It doesn't cause an issue here for sorting, and it allows the code to be more portable.

dgrobani

Robert, thanks so much for taking the time to review my code, offering your improvements, and providing such a clear and thorough explanation of your reasoning. I learned a lot and really appreciate you for sharing your wisdom and experience!

unknown

Not that you need independent confirmation...but this works great for me, too!

donna_lummis

Sorting terms in descending order so that the most active terms are listed first should be the default. I think I found this feature idea at https://community.canvaslms.com/ideas/1248-more-intuitive-term-sortingpresentation. Feel free to vote this idea up.