[1.5.0.beta1] Upgrade has broken local CSS selection menu.
-
Current code if anyone wants to have a dig:
//inject custom menu items Em.run.next(function (){ $('\ <li>\ <ul class="main_menu">\ <li>\ <u>Custom Styles</u>\ <ul class="csssubmenu">\ <li><a data-auto-route="true" class="csslink" href=".?preview-style=5ac5a5e9-c6ed-4197-9ec3-40811fd6ee5d&sticky=true">Discourse Default</a></li>\ <li><a data-auto-route="true" class="csslink" href=".?sticky=true&preview-style=">* TDWTF Default</a></li>\ <li><a data-auto-route="true" class="csslink" href=".?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217&sticky=true">Widescreen+min</a></li>\ </ul>\ </li>\ </ul>\ </li>\ ').insertAfter( $("#user-dropdown li:eq(3)") ); });
Context (i.e. the whole of
</head>
in /admin/customize/css_html) if it matters:<script> /* Copyright (c) 2006-2013 Tyler Uebele * Released under the MIT license. * latest at https://github.com/tyleruebele/details-shim * minified by Google Closure Compiler */ function details_shim(a){if(!(a&&"nodeType"in a&&"tagName"in a))return details_shim.init();var b;if("details"==a.tagName.toLowerCase())b=a.getElementsByTagName("summary")[0];else if(a.parentNode&&"summary"==a.tagName.toLowerCase())b=a,a=b.parentNode;else return!1;if("boolean"==typeof a.open)return a.getAttribute("data-open")||(a.className=a.className.replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g," ")),!1;var c=a.outerHTML||(new XMLSerializer).serializeToString(a),c=c.substring(0,c.indexOf(">")), c=-1!=c.indexOf("open")&&-1==c.indexOf('open=""')?"open":"closed";a.setAttribute("data-open",c);a.className+=" details_shim_"+c;b.addEventListener("click",function(){details_shim.toggle(a)});Object.defineProperty(a,"open",{get:function(){return"open"==this.getAttribute("data-open")},set:function(a){details_shim.toggle(this,a)}});for(b=0;b<a.childNodes.length;b++)if(3==a.childNodes[b].nodeType&&/[^\s]/.test(a.childNodes[b].data)){var c=document.createElement("span"),d=a.childNodes[b];a.insertBefore(c, d);a.removeChild(d);c.appendChild(d)}}details_shim.toggle=function(a,b){b="undefined"===typeof b?"open"==a.getAttribute("data-open")?"closed":"open":b?"open":"closed";a.setAttribute("data-open",b);a.className=a.className.replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g," ")+" details_shim_"+b};details_shim.init=function(){for(var a=document.getElementsByTagName("summary"),b=0;b<a.length;b++)details_shim(a[b])}; window.addEventListener?window.addEventListener("load",details_shim.init,!1):window.attachEvent&&window.attachEvent("onload",details_shim.init); Discourse.TopicListComponent.reopen({ showLikes: true }); $("document").ready(function (){ // Monarch - http://what.thedailywtf.com/t/del-ins-corrector-composer-extension-userscript/48287 window.PagedownCustom.appendButtons.push({ id:"wmd-del-button", description:"del/ins correction", execute:function(a){ a.before+="<del>"+a.selection+"</del><ins>";a.selection=" ";a.after="</ins>"+a.after } }); $(document.body).append('<style> .wmd-del-button::before {content: "\\f12d";}</style>'); // Monarch + boomzilla - abbr composer extension based on http://what.thedailywtf.com/t/del-ins-corrector-composer-extension-userscript/48287 window.PagedownCustom.appendButtons.push({ id:"wmd-abbr-button", description:"add abbr tag", execute:function(a){ a.after = '">'+a.selection+"</abbr>"+a.after;a.before+='<abbr title="';a.selection=" "; } }); $(document.body).append('<style> .wmd-abbr-button::before {content: "\\f05a";}</style>'); // Monarch + PJH - spoiler composer extension based on http://what.thedailywtf.com/t/del-ins-corrector-composer-extension-userscript/48287 window.PagedownCustom.appendButtons.push({ id:"wmd-spoil-button", description:"add [spoiler] tag", execute:function(a){ a.after = "[/spoiler]"+a.after;a.before+='[spoiler]'; } }); $(document.body).append('<style> .wmd-spoil-button::before {content: "\\f070";}</style>'); var View = require('discourse/views/header').default; Em.View.views[$("header").attr("id")].set("renderDropdowns",true); //force discourse to render dropdown in background //inject custom menu items Em.run.next(function (){ $('\ <li>\ <ul class="main_menu">\ <li>\ <u>Custom Styles</u>\ <ul class="csssubmenu">\ <li><a data-auto-route="true" class="csslink" href=".?preview-style=5ac5a5e9-c6ed-4197-9ec3-40811fd6ee5d&sticky=true">Discourse Default</a></li>\ <li><a data-auto-route="true" class="csslink" href=".?sticky=true&preview-style=">* TDWTF Default</a></li>\ <li><a data-auto-route="true" class="csslink" href=".?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217&sticky=true">Widescreen+min</a></li>\ </ul>\ </li>\ </ul>\ </li>\ ').insertAfter( $("#user-dropdown li:eq(3)") ); }); }); // Show Raw button //http://what.thedailywtf.com/t/expanding-replies-hides-raw-button/7399/47?u=pjh (function(){ //@Monarch at what.thedailywtf.com //Button is redelcared and sligthly modified due to new scope. it can be further simplified. Button = function(action, label, icon, opts) { this.action = action; this.label = label; if (typeof icon === "object") { this.opts = icon; } else { this.icon = icon;} this.opts = this.opts || opts || {}; this.render = function (buffer){ var opts = this.opts; buffer.push("<button title=\"" + this.label + "\""); if (opts.className) { buffer.push(" class=\"" + opts.className + "\""); } buffer.push(" data-action=\"" + this.action + "\">"); if (this.icon) { buffer.push("<i class=\"fa fa-" + this.icon + "\"></i>"); } buffer.push("</button>"); } }; var PostMenuComponent = require('discourse/components/post-menu').default; PostMenuComponent.reopen({ buttonForRaw:function(post){ return new Button('raw', 'view raw post', 'code', {className: "raw-button", disabled: false}); }, clickRaw:function(post){ var topicID = post.topic_id, postID = post.post_number, postArea = $("article[data-post-id='"+post.id+"'] div.contents"), $rawButton = $(this.element).find("button.raw-button"), styles = [{backgroundColor: 'transparent', color: '#A7A7A7'},{backgroundColor: '#08C', color: '#FFF'}]; if (postArea.find('.tdwtf-raw-area').length == 0){ var postArea_raw_content = $('<pre class="tdwtf-raw-area"></pre>'), cooked = postArea.find('.cooked'); cooked.after(postArea_raw_content); $.get('/raw/' + topicID + '/' + postID) .done(function (content) { postArea_raw_content.addClass("active"); $rawButton.css(styles[1]);//active postArea_raw_content.css({"white-space":"pre-wrap", 'border':'2px dashed #E7E7E7','padding':'3px'}) .text(content); cooked.hide(); }); } else { var postArea_raw_content = postArea.find('.tdwtf-raw-area'); if ( !postArea_raw_content.hasClass("active") ){ //raw no active postArea.find('.cooked').hide(); postArea.find('.tdwtf-raw-area').show(); postArea_raw_content.addClass("active"); $rawButton.css(styles[1]); } else{ postArea.find('.cooked').show(); postArea.find('.tdwtf-raw-area').hide(); postArea_raw_content.removeClass("active"); $rawButton.css(styles[0]); } } } }); })(); </script>
-
Fcuk... Where the hell do we even put it in this mess?
How would people feel about injecting another button into the ever diminishing icon bar? Pretty much, stick a in place of (now missing) ?
-
Pretty much, stick a in place of (now missing) ?
TBH that's what I would have preferred in the first instance, but the current implementation is what we ended up with.
I'd have no objection, and it would probably render it a tad more immune to the excessive bikeshedding that may ensue in future.
-
Well, I already have most of the code, no idea if it can be optimized the way that raw button was, but it works. I'll see about sticking stylesheets in there and tracking the active one in a sensible way. Worst case, we stick a class to mark the active one in each version.
-
It also breaks the whisper (actually, options menu, but toggling whispers is all that's there) icon in the composer.
-
Fcuk... Where the hell do we even put it in this mess?
Well to be consistent with the current mood of bike-shedding, how about one above and two below the text entry box on the search ?
Mock:
-
one above and two below the text entry box on the search
What if we add more?
I propose random distribution!
-
For the time being, if people want to switch, they should be able to use these links:
-
You really should have a "testing" copy of the forum where you can try upgrades and stuff before applying them to the main one.
Since this is hosted on a DigitalOcean VPS, and apparently they don't charge you for snapshots, I think it could be created and started only when you need it so it would be practically free.
-
Since this is hosted on a DigitalOcean VPS, and apparently they don't charge you for snapshots,
I presume snapshots require some sort of dashboard outside of the VM? I only have shell access...
-
Wtf does the blue dash mean on topics?
-
"new" apparently
-
Yes, it would have to be done by @apapadimoulis .
-
Wtf does the blue dash mean on topics?
If it isn't obvious and intuitive, it means they need to re-visit the shade of blue they picked.
Check back in 6 months.
-
-
Ok, this is not perfect but I'm done with Discourse and it's mutilation of DOM. Menu effects get wonky at times but I lost patience at this point:
// Global defaults tdwtfDefaultStyle = '629b28ba-bb56-4fc3-b90e-7d61007b6dad'; // Utility functions function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') { c = c.substring(1); } if (c.indexOf(name) != -1) { return c.substring(name.length,c.length); } } return ""; } function appendManagementMenu() { if($('.tdwtf-manager-menu').length === 0) { $(' <li class="tdwtf-manager-menu header-dropdown-toggle"></li>').insertBefore('li.current-user'); $('div.panel.clearfix').append(menu); var activeStyle = getCookie('preview_style') || tdwtfDefaultStyle; $('#tdwtf-manager-dropdown').find('a[data-stylesheet!="' + activeStyle + '"]').find('i').removeClass('fa-check-circle').addClass('fa-circle'); $('.tdwtf-manager-menu').append('<a class="icon tdwtf-manager-menuicon" href="#" title="TDWTF customizations manager">\ <i class="fa fa-cog tdwtf-manager-icon"></i>\ </a>').on('click', function(e) { e.preventDefault(); $(this).addClass('active'); $('.header-dropdown-toggle').not($(this)).removeClass('active'); $('.menu-panel.drop-down:not(#tdwtf-manager-dropdown)').addClass('hidden'); $('#tdwtf-manager-dropdown').removeClass('hidden'); }); } $('body').on('click', function(e) { if($(e.target).attr('class')) { if( $(e.target).attr('class').indexOf('tdwtf-manager') == -1 ) { $('.tdwtf-manager-menu').removeClass('active'); $('#tdwtf-manager-dropdown').addClass('hidden'); } } }); } // Template menu = '<div class="menu-panel drop-down hidden" id="tdwtf-manager-dropdown">\ <ul>\ <li>\ <a href="https://what.thedailywtf.com/?preview-style=5ac5a5e9-c6ed-4197-9ec3-40811fd6ee5d;sticky=true" data-stylesheet="5ac5a5e9-c6ed-4197-9ec3-40811fd6ee5d" class="tdwtf-manager-toggle">\ <p style="margin: 0;"><i class="fa fa-check-circle"></i> Discourse default </p>\ </a>\ </li>\ <li>\ <a href="https://what.thedailywtf.com/?preview-style=629b28ba-bb56-4fc3-b90e-7d61007b6dad;sticky=true" data-stylesheet="629b28ba-bb56-4fc3-b90e-7d61007b6dad" class="tdwtf-manager-toggle">\ <p style="margin: 0;"><i class="fa fa-check-circle"></i> TDWTF default </p>\ </a>\ </li>\ <li>\ <a href="https://what.thedailywtf.com/?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217;sticky=true" data-stylesheet="2aeee392-5939-45a8-aaa8-eb7ca3282217" class="tdwtf-manager-toggle">\ <p style="margin: 0;"><i class="fa fa-check-circle"></i> Widescreen </p>\ </a>\ </li>\ </ul>\ </div>';
Either calling or just running the code contained in
appendManagementMenu
withindocument.ready
should hopefully work. As in, the code itself works, I hope it will get inserted properly when ran from there, but can't be sure due to Ember fuckery.
-
mutilation of DOM
lost patience
should hopefully work
I hope it will get inserted properly
can't be sure due to Ember fuckery
Hey, let's fix Discourse with plugins and userscripts!
-
-
Anyone tested the above code? @PJH?
-
I've not been around online much over the past week or so, so I haven't.
-
-
Pretty sure that would happen faster than the heat-death of the universe. So worth it?