Lightweight interface to cast votes?

[LanX]

Hi

I wanted to address the problem that we need to scroll down in order to click the vote button, which is annoying when reading longer sub-threads.

(At least when using a mobile I can't just hit return to submit)

I can think of a nodelet hack injecting buttons which does am AJAX request and updates the result.

Problem is that this would cause unnecessary overhead because the whole page is returned.

I was browsing thru our XML generators but couldn't find any mention of a light weight interface.

Am I missing something?

updated

improved wording, added emphasize

[roboticus]

LanX:

For years, I've been using the suggestion in Re: The big Vote button to put a little CSS in the display settings to put the vote button in my UL corner. Since it's already built into perlmonks.org, it won't increase the traffic. You can also use an external CSS style sheet with this method.

I use the first clause below (I'm leaving the rest here in case I bungle my settings in the future and need to find it again):

input[name="sexisgreat"] {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index:1;
  padding: 5px;
  border: 4px solid red;
}

pre.code tt.codetext
{ counter-reset: codeLines; }

pre.code i::before
{ counter-increment: codeLines;
  content: counter(codeLines,decimal-leading-zero) ": ";
}

span.line-breaker { content: '' }

div.readmore { background-color: inherit; 
  padding-left: 4px; 
  border-left-width: 5px; 
  border-left-color: #00ff00; 
  border-left-style: solid;
  margin-left: -9px;
}

input[name="viewedNewNodes"] {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index:1;
  padding: 5px;
  border: 4px solid green;
}

Just drop it in the "On Site CSS Markup" section of the "Style Sheet Settings" are in the Display Settings page. Alternatively, put it on your hard drive and link it as an external style sheet in the "Link to External CSS Stylesheet" box (I use C:/Work/DATA/PM.css).

Edit: tweaked last paragraph.

Edit: The last section puts the "Check for newer nodes" / "I've checked all these" button on the Newest Nodes page up in the UL corner as well. I put an ugly big border on them so I can find them quickly with my old tired myopic eyes... ;^)

...roboticus

When your only tool is a hammer, all problems look like your thumb.

[LanX]

Roboticus

Thanks, nice! :)

But without having tested, I'm wondering how this solves the overhead problem which could be solved by a lightweight interface?

Like extra ...

• ... traffic size
• ... delay
• ... server load
• ... need to rebuild the whole page
?

[roboticus]

LanX

I might've misunderstood what you were asking in regards to the overhead. The only problem it solves that I'm aware of is keeping the button on the screen for easy access. When you mentioned the AJAX and such, I thought that your JSON nodelet hack was going to do extra work to incur the overhead that you were talking about.

...roboticus

When your only tool is a hammer, all problems look like your thumb.

[LanX]

For a start:

Here a simplistic Free Nodelet hack which duplicates the vote-button next to all vote-radios.

Ugly but effective.

NB: This is still not solving the problem of unnecessary overhead by

• traffic,
• load-time
• need to rebuild the page

Add the following to your Free Nodelet Settings

<script>
//<!--
( function (){
    var button = document.getElementsByClassName('voteit')[0].firstChi
+ld.firstChild;
    var votes  = document.getElementsByClassName('reputation');
    for ( i in votes ) { 
        el= votes[i];  
        if ( el.id == "" ) {
             el.firstChild.appendChild( button.cloneNode() )  
        }
    }
  })()
// -->
</script>

[LanX]

The DOM around the vote-radios and buttons changed recently, you'll need to update the JS to make it work again.

<script>
//<!--
( function (){
    var button = document.getElementsByClassName('voteit')[0].firstChi
+ld;
    var votes  = document.getElementsByClassName('reputation');
    for ( i in votes ) { 
        el= votes[i];  
        if ( el.id == "" ) {
             el.appendChild( button.cloneNode() )  
        }
    }
  })()
// -->
</script>

This nodelet hack is very handy trying to vote on longer (sub)threads - especially when visiting with a mobile browser°. No need to scroll to the button now.

°) with a desktop browser you can still type RETURN to submit the form.

[Anonymous Monk]

I think i posed a low overhead url

[LanX]

I looked into the "vote/voteit" code and realized the deeper problem is the desire to block "votebots" manipulating the reputation of nodes.

So realizing an xml interface would contradict this to a certain extend , but ironically the workarounds I described show how limited the security measures are at the moment* ...

*) @Pm Devs see details in pmdev to-do wiki

[LanX]

FWIW, here a found a partial solution ...

Adding a parameter displaytype with the value xml to the vote request/form will result in returning an xml instead of HTML.

For instance

<node id="1202729" title="regex replace a string" created="2017-11-03 
+19:37:29" updated="2017-11-03 19:37:29">
    <type id="115">perlquestion</type>
    <author id="1139608">OldChamp</author>
    <data>
         <field name="doctext">
<p> In a text file there are constant string1, for example Event "?" f
+ollowed by some text and then a string2, which is spacebspace- or spa
+cewspace-.</p>
<p> I want to replace string1 with Event "Black to move" or Event "Whi
+te to move" dependant on srting2.</p>
         </field>
         <field name="reputation">-2</field>
    </data>
</node>

Load wise it's still not optimal, because the raw content of the root post is still returned in field doctext but it's OK for an XML-HTTP-request.

One can also vote on posts of the subtree, but the resulting reputation is not included, and needs to be gathered separately.

[Discipulus]

hello LanX

just casually found this post with jquery and CSS vote caustomization. Might be of inerest.

L*

[LanX]

Thank you. I agree that CSS is the best approach if you just want to "move" the button. ( see also this reply)

But my goal is to have an AJAX solution, which avoids reloading the whole page.

Reloading includes

• seconds of delay
• losing the scroll / position.
Please compare how it is solved at sites like stack overflow.

I already suggested a fix to allow this and am waiting for reaction.

Unfortunately the number of gods being around at the moment is very limited.

UPDATE

see also Let's Make PerlMonks Great Again!