Testing.... voting widget plugin dev

rob

Testing custom javascript for voting widgets (etc)

You can click on any of the little code blocks (which are code elements, with bracketed "hints" as to enhanced behavior), and they will toggle between normal behavior (just a code block) and enhanced (the "widgets"). Look at the bracketed sections (in the original elements) to see how they specify parameters.

Here's the custom js code:

(function (path, jq) {
    if(path) {
      let scr = document.createElement('script');
      scr.src = path + 'Widgetizer.js';
      document.head.appendChild(scr);
    } else  {
      console.log('(no Widgetizer source path specified)');
    }
    
    [
      'action:ajaxify.contentLoaded',
      'action:ajaxify.end',
      'action:posts.edited',
      'action:posts.loaded'
    ].forEach((eventString) => {
        jq(window).on(eventString, function() {
            if(window.Widgetizer) {
              Widgetizer.updateWidgets(path, eventString);
            }
          });
      });
  })(
  {
    localhost : 'http://localhost:9999/votingtheory/',
    votingtheory : 'https://votingtheory.com/publicJSFiles/',
    pianoply:  'https://pianop.ly/votingtheory/',
    none: null
  }[localStorage.getItem('widgetizerAddress')],
  jQuery
);

And this is the javascript file it pulls, which can be hosted at a variety of servers, as specified in the localStorage "widgetizerSource" setting. I can point it at my server running on localhost, or even set it to none (currently the default). Eventually it will hopefully pull it from the votingtheory.org server.

(function () {
window.Widgetizer = window.Widgetizer || {
    handlers: {},
    widgets: []
  };

// this removes elements from our list when they leave the page etc
function clearOrphans() {
  for(var i=Widgetizer.widgets.length-1; i>=0; i--) {
    var w = Widgetizer.widgets[i];
    if(!(document.body.contains(w.newElem) || document.body.contains(w.origElem))) {
        Widgetizer.widgets.splice(i, 1);
    }
  }
}

var types = [
    ['ballots', 'BallotHandler'],
    ['matrix', 'MatrixHandler'] // not implemented yet
    ];

// this one is global so it can be called from custom js
Widgetizer.updateWidgets = function (){
  var self = Widgetizer; 
  var a = document.body.getElementsByTagName('code');
  var codeElems = [], i;
  for(var i=0; i<a.length; i++) {
    codeElems.push(a[i]);
  }
  for(i=0; i<codeElems.length; i++) {
    var elem, codeElem = codeElems[i];
    if(codeElem.parentNode.tagName === 'PRE') {
      elem = codeElem.parentNode;
    } else {
      elem = codeElem;
    }
    var text = elem.innerText;
    
    for(var j=0; j<types.length; j++) {
        var typeName = types[j][0];
        var startText = '[' + typeName, i1, i2;
        
        if((i1 = text.indexOf(startText)) !== -1) {
          if ((i2 = text.indexOf(']', i1 + startText.length)) !== -1) {
            var json = '{' + text.substring(i1+startText.length, i2) + '}';
            var data;
            try {
              data = JSON.parse(json);
            } catch(e) {}
            var widget = {
                type: typeName,
                origElem: elem,
                newElem: null,
                data: data,
                text: text.substring(0, i1) + text.substring(i2+1)
            }
            self.widgets.push(widget);
            if(self.handlers[typeName]) {
                if(self.handlers[typeName] !== 'queued') {
                    self.handlers[typeName].replaceWithNewElement(widget);
                }
            } else {
                self.handlers[typeName] = 'queued';
                var scr = document.createElement('script');
                // todo: make this dependent on localStorage
                scr.src = 'https://pianop.ly/votingtheory/' + types[j][1] + '.js';
                document.body.appendChild(scr);
            }
          }
        }
    }
  }
  clearOrphans();
}
}
)();

Eventually we'll be able to do all kinds of cool stuff, but in the meantime, I'm learning what is possible.

Currently I'm just making sure I can find the code block elements, parse the bracketed hints, and replace the block with another element. You can set the background color, font, background image, and width with some json in the brackets. (these are just experimental, I'll use the json for more useful things).

2: a[5] b[4] c[2] d[1] e[0] f[0]
2: a[3] b[4] c[5] d[2] e[0] f[0]
2: a[1] b[0] c[0] d[3] e[5] f[4]
2: a[0] b[0] c[1] d[4] e[5] f[5]
2: a[5] b[3] c[4] d[3] e[0] f[2]
a[1] b[0] c[3] d[4] e[4] f[5]
a[0] b[1] c[3] d[4] e[5] f[3]
a[0] b[1] c[2] d[4] e[5] f[2]
a[5] b[5] c[0] d[2] e[3] f[3]
a[5] b[3] c[0] d[5] e[5] f[5]
a[3] b[1] c[0] d[4] e[5] f[5]
a[4] b[3] c[5] d[3] e[1] f[0]
a[5] b[3] c[0] d[3] e[4] f[4]
a[4] b[5] c[4] d[1] e[0] f[0]
[ballots  "color": "#fdc", "bgColor": "#700", "font": "comic sans ms","height": 120, "width": 250, "transform": "perspective(550px)  rotate3d(-1,1,1,40deg) scale(2) translate(190px,-5px)"]

asdf asdf asdf asdfa sdfa
sdf
asdf
as
df a
sdf
asdf
asdf
asd
f a
sdf a
sdf
asdf
afsd fselklaksdjklfalsdkjflajsdfj; aslkdjf; alskdjf. asf

rob

asdfasdfasdf

134: a[5] b[4] c[2] d[1] e[0] f[0]
64: a[5] b[4] c[3] d[1] e[0] f[0]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
55: a[0] b[1] c[4] d[3] e[5] f[3]
48: a[0] b[0] c[5] d[3] e[5] f[5]
30: a[1] b[0] c[1] d[3] e[3] f[5]
30: a[0] b[1] c[2] d[5] e[5] f[4]
28: a[2] b[1] c[0] d[3] e[3] f[5]
27: a[0] b[0] c[0] d[3] e[5] f[5]
26: a[0] b[1] c[3] d[3] e[5] f[3]
22: a[1] b[0] c[0] d[3] e[4] f[5]
[ballots "bgColor":"#8cf", "width": 490, "font": "arial black" ]

rob

Testing background image (not that this will be a real feature)

134: a[5] b[4] c[2] d[1] e[0] f[0]
64: a[5] b[4] c[3] d[1] e[0] f[0]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
55: a[0] b[1] c[4] d[3] e[5] f[3]
[ballots 
"width": 400, 
"height": 500, 
"color" : "#ff8",
 "font" : "arial black", 
"bgImg": "url(http://sfwallpaper.com/images/cute-animal-pics-22.jpg)"
]

rob

asdfasdf asdf asdfa sdfa sdf asf

134: a[5] b[4] c[2] d[1] e[0] f[0]
64: a[5] b[4] c[3] d[1] e[0] f[0]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
55: a[0] b[1] c[4] d[3] e[5] f[3]
[ballots "color": "#008", "font": "papyrus", "height": 150, "width": 300, "bgColor" : "rgba(0,255,150,.5)", "transform": "perspective(750px) translate(50px,-5px) rotate3d(1,-1,1,60deg) scale(1.25)"]

asdfasd fasdf asd
f adsfasd
fasdf as
df dfsa

asdf
asd
f asd
f a
sdfa df

rob

@rob said in Testing.... voting widget plugin dev:

@rob

134: a[5] b[4] c[2] d[1] e[0] f[0]
64: a[5] b[4] c[3] d[1] e[0] f[0]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
55: a[0] b[1] c[4] d[3] e[5] f[3]
[ballots "bgColor": "rgba(100,0,0,.5)", "color": "rgba(0,0,0,0.1)", width" : 62, "height": 73]

rob

@rob said in Testing.... voting widget plugin dev:

@rob

134: a[5] b[4] c[2] d[1] e[0] f[0]
64: a[5] b[4] c[3] d[1] e[0] f[0]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
55: a[0] b[1] c[4] d[3] e[5] f[3]
[ballots "bgColor": "#ff7", "width" : 650]

rob

@rob said in Testing.... voting widget plugin dev:

Testing background image (not that this will be a real feature)

134: a[5] b[4] c[2] d[1] e[0] f[0]
64: a[5] b[4] c[3] d[1] e[0] f[0]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
94: a[3] b[5] c[4] d[1] e[0] f[0]
70: a[2] b[2] c[5] d[2] e[0] f[0]
63: a[0] b[0] c[0] d[3] e[4] f[5]
55: a[0] b[0] c[1] d[3] e[5] f[4]
55: a[0] b[1] c[4] d[3] e[5] f[3]
[ballots "width":500]

rob

@rob from my phone

Dhdjdjfjfifififjfidid
[ballots "color":"#f50"]
,,

rob

@rob said in Testing.... voting widget plugin dev:

@rob from my phone

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
[ballots "color":"#f50", "bgColor": "#cdf"]