[1.5.0.beta1] Upgrade has broken local CSS selection menu.


  • Discourse touched me in a no-no place

    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&amp;sticky=true">Discourse Default</a></li>\
                        <li><a data-auto-route="true" class="csslink" href=".?sticky=true&amp;preview-style=">* TDWTF Default</a></li>\
                        <li><a data-auto-route="true" class="csslink" href=".?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217&amp;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&amp;sticky=true">Discourse Default</a></li>\
                        <li><a data-auto-route="true" class="csslink" href=".?sticky=true&amp;preview-style=">* TDWTF Default</a></li>\
                        <li><a data-auto-route="true" class="csslink" href=".?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217&amp;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>
    

  • BINNED

    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) ?


  • Discourse touched me in a no-no place

    @Onyx said:

    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.


  • BINNED

    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.


  • ♿ (Parody)

    It also breaks the whisper (actually, options menu, but toggling whispers is all that's there) icon in the composer.


  • Discourse touched me in a no-no place

    @Onyx said:

    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:


  • BINNED

    @PJH said:

    one above and two below the text entry box on the search

    What if we add more?

    I propose random distribution!


  • ♿ (Parody)

    For the time being, if people want to switch, they should be able to use these links:

    DC Default
    TDWTF Default
    Widescreen



  • 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.


  • Discourse touched me in a no-no place

    @anonymous234 said:

    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?


  • FoxDev

    "new" apparently



  • Yes, it would have to be done by @apapadimoulis .


  • Trolleybus Mechanic

    @Matches said:

    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.


  • Discourse touched me in a no-no place

    @Lorne_Kates said:

    Check back in 6 months.

    When it'll be grey because colour is distracting.


  • BINNED

    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 within document.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.


  • Trolleybus Mechanic

    @Onyx said:

    mutilation of DOM

    @Onyx said:

    lost patience

    @Onyx said:

    should hopefully work

    @Onyx said:

    I hope it will get inserted properly :giggity:

    @Onyx said:

    can't be sure due to Ember fuckery

    Hey, let's fix Discourse with plugins and userscripts!


  • Discourse touched me in a no-no place

    @Lorne_Kates said:

    Hey, let's fix Discourse with plugins and userscripts!

    Well, there is that...


  • BINNED

    Anyone tested the above code? @PJH?


  • Discourse touched me in a no-no place

    I've not been around online much over the past week or so, so I haven't.



  • @Lorne_Kates said:

    let's fix Discourse

    Let's move the Pacific Ocean with a teaspoon.



  • Pretty sure that would happen faster than the heat-death of the universe. So worth it?


Log in to reply