How do I add this List Filter to Etherpad-Lite using the Small_List plugin?

341 views Asked by At

Problem: I am trying to add this list filter (available here, http://listjs.com/examples) to the home page of the Etherpad-Lite with the plug-in "small_list" installed. The idea is that this filter will filter through all the pads listed on the homepage.

I wouldn't call myself a programmer at all, so bear with me! But these are the steps I've taken to try to figure it out by myself. I've spent the last two days trying to figure it out, so I am hoping someone out there will have some pity for me. I'm assuming anyone that will help me will already have node.js installed on their computer, you can then get etherpad-lite from here: https://github.com/ether/etherpad-lite and then in the settings.json file, uncomment this:

"users": {
"admin": {
  "password": "changeme1",
  "is_admin": true
},
"user": {
  "password": "changeme1",
  "is_admin": false
} 
},

At this point, you can type in cd etherpad-lite/bin/run.sh and it will run on localhost:9001. Go to localhost:9001/admin and type the credentials above and then quickly install the plug-in: "small_list".

The plug-in files themselves located at etherpad-lite/node_modules/ep_small_list/. From my poor understanding is that index.js is somehow importing a div into the actual index html page of the application located at etherpad-lite/src/templates/index.html.

I've done so many different things to try and make the list filter (list.js) work on the small_list plug-in.

Currently, I have this:

var padManager = require('ep_etherpad-lite/node/db/PadManager');
var async =  require('../../src/node_modules/async');
exports.eejsBlock_indexWrapper= function(hook_name, args, cb) {
args.content += '<div id="small_list"></div><script src="/static/js/jquery.js"></script>           
<script>$(function () { $("#small_list").load("/small_list"); });</script>';};

exports.registerRoute = function(hook_name, args, cb) {
args.app.get("/small_list", function(req, res) {


    async.waterfall([
        function(callback) {
            padManager.listAllPads(callback);
        },
        function(data, callback) {
            r = '<input class="search" placeholder="Search"><button class="sort" data-sort="name">Sort by name</button><ul class="list">';
            for (p in data.padIDs){
                r += '<li><h3 class="name"><a href="/p/' + data.padIDs[p] + '">' + data.padIDs[p] + '</li>';
            }
            r += '</ul>';
            res.send(r);
        },
    ]);
});
};

and I have on the index.html file:

<script src="http://listjs.com/no-cdn/list.js"></script>

<script>
var options = {valueNames: [ 'name' ]};
var userList = new List("small_list", options);
</script>

Any help would be greatly appreciated! Thanks in advance.

0

There are 0 answers