Contributor Promotion Tool

http://shitake-crude-production.wikidot.com/promotion-tool-contributor/code/1
Original Code: http://shitake-crude-production.wikidot.com/promotion-tool/noredirect/true by 7happy7

This is the Redirect module that redirects the browser directly to the "http://shitake-crude-production.wikidot.com/promotion-tool-contributor/code/1" page.
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/>
<style>
body {
    max-width: 650px;
    padding: 1em;
}
blockquote {
    background-color: #fff;
    border: 1px dashed #999;
    padding: 2em;
    position: fixed;
    text-align: center;
    top: 30%;
}
blockquote:before {
    background: rgba(0,0,0,.25);
    content: "";
    display: block;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -1;
}
form {
    padding: .5em;
}
input[type="text"] {
    appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    border: 1px solid #aaa;
    border-radius: .25em;
    display: block;
    font-size: 1.5em;
    padding: .25em 0;
    text-align: center;
    width: 100%;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    background: #fff;
    border: solid #aaa;
    border-width: 0 1px 1px;
    cursor: pointer;
    padding: 0.25em;
    transition: all .25s ease;
}
li:not(.no):before {
    content: "> ";
}
li:not(.no):hover {
    background: #fff0f0;
    color: #b01;
}
li.no {
    background: #ddd;
    color: #999;
    cursor: auto;
}
a, button {
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    background: #b01;
    border: none;
    box-shadow: 2px 2px 2px #333;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8em;
    font-weight: bold;
    margin: 0 0.5em 0.25em 0;
    outline: none!important;
    padding: 0.25em 1em;
    text-shadow: 0 0 2px #ddd;
    transition: all 0.25s ease-in-out;
}
button {
    background: #33b;
}
a.unverified {
    background: orange;
}
a:hover, a:active,
button:hover, button:active {
    text-shadow: 0 0 4px #fff, 0 0 7px #fff;
}
a:active, button:active {
    box-shadow:  1px 1px 2px #777;
}
div a:before {
    content: "×";
    margin: 0 0.25em 0 0;
}
div a:after {
    content: " ("attr(data-x)")";
}
 
</style>
<script>
    function _Q(query, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4){
                try{
                    var res = JSON.parse(xhr.responseText);
                    res = res[Object.keys(res)[0]];
                    callback(res);
                }catch(e){console.log(e);}
            }
        };
        xhr.open("GET", "/quickmodule.php?module=MemberLookupQModule&s=578002&q=" + query, true);
        xhr.send();
    }
</script>
</head>
<body>
<a href="http://shitake-crude-production.wikidot.com/promotion-tool-contributor/noredirect/true">コード</a>
<hr>
<button onclick="Add()">強制追加(検索にマッチしなかった時用)</button>
<form>
<input type="text" placeholder="2文字以上入力すると、候補が表示されます。"/>
<ul></ul>
</form>
 
<div><span></span></div>
<hr>
<button onclick="Gen()">生成</button>
<pre></pre>
URL: <input type="text" onfocus="this.select();"/>
 
<script>
var _i = document.querySelector('input[type="text"]');
var _u = document.querySelector('ul');
var _d = document.querySelector('div');
var _p = document.querySelector('pre');
_i.oninput = function(e) {
    if(e.target.value.length > 1) {
        _func(e.target.value);
        function _func(que) {
            _Q(que, function(r) {
                for(var _l of document.querySelectorAll('ul > li')) {
                    _l.remove();
                }
                var list = Array.from(document.querySelectorAll('div > *')).map(function(v) {
                    return v.innerHTML;
                }).filter(function(v) {
                    return v;
                });
                if(r) {
                    r.forEach(function(v) {
                        var _li = document.createElement("li");
                        _li.innerHTML = v.name;
                        _u.appendChild(_li);
                        if(list.indexOf(v.name) > -1) {
                            _li.setAttribute("class", "no");
                        }else {
                            _li.onclick = function(e) {
                                Add(e);
                                _i.value = "";
                                _u.innerHTML = "";
                            }
                        }
                    });
                }else {
                    var _li = document.createElement("li");
                    _li.innerHTML = "No results.";
                    _li.setAttribute("class", "no");
                    _u.appendChild(_li);
                }
            });
        }
    }
}
function Add(e) {
    Pop(function(n) {
        var tgt = e ? e.target.innerHTML : _i.value;
        var _a = document.createElement("a");
        _a.innerHTML = tgt;
        _a.setAttribute("data-x", n);
        if(!e){_a.setAttribute("class", "unverified");}
        _d.appendChild(_a);
        _a.onclick = function(e) {Del(e);};
    });
}
function Del(e) {
    e.target.remove();
}
function Pop(callback) {
    var _b = document.createElement("blockquote");
    document.body.appendChild(_b);
    function e(num) {
        var a = document.createElement("button");
        _b.appendChild(a);
        a.onclick = function() {
            callback(Which(num));
            _b.remove();
        }
        a.innerHTML = Which(num);
    }
    for(var i = 0; i <= 3; i++) {e(i)};
}
function Which(n) {
    switch(n) {
        case 0:
            return "タグ・コントリビューター";
        case 1:
            return "財団新聞編集委員";
        case 2:
            return "合作記事剪定コントリビューター";
        case 3:
            return "定例会コントリビューター";
    }
}
function Gen() {
    var obj = {};
    var res = "||~ 候補者 ||~ 職種 ||~ YES ||~ NO ||";
    for(var a of document.querySelectorAll('div > a')) {
        var b = a.getAttribute("data-x");
        var c = a.innerHTML;
        if(!obj[b]) {obj[b] = [];}
        obj[b].push(c);
    }
    var i = 0;
    for(var k in obj) {
        for(var a of obj[k]) {
            i++;
            res += "\n||[[*user " + a + "]]|| " + k + " || || ||";
        }
    }
    _p.innerHTML = res;
 
    document.querySelectorAll('input[type="text"]')[1].value = "http://shitake-crude-production.wikidot.com/promotion-tool/code/2#" + encodeURIComponent(JSON.stringify(obj));
}
</script>
</body>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License