Wikipedia Recommendation System
// ==UserScript==
// @name RecomWP
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Wikipedia Recommendation System
// @homepage https://github.com/AlexanderMisel/RecomWP
// @supportURL https://github.com/AlexanderMisel/RecomWP/issues
// @author Alexander Misel
// @license GPL-3.0
// @match https://zh.wikipedia.org/*
// @grant none
// ==/UserScript==
(function () {
// Polyfill for Wikipedia with no jQuery
if (Array.isArray(window.RLQ) && window.RLQ.length > 1) {
var tempMW = null;
if (window.mw) {
tempMW = window.mw;
}
window.mw = {
config: {
set: function (data) {
for (var key in data) {
window[key] = data[key];
}
}
},
loader: {
load: function (data) {},
state: function () {},
implement: function () {}
}
};
window.RLQ[0]();
window.RLQ[1]();
window.mw = tempMW;
} else {
window.wgAction = mw.config.get('wgAction');
window.wgArticleId = mw.config.get('wgArticleId');
window.wgPageName = mw.config.get('wgPageName');
window.wgNamespaceNumber = mw.config.get('wgNamespaceNumber');
}
var navLink = document.createElement('li');
navLink.id = 'RecomWP';
navLink.innerHTML = '<a href="/wiki/Special:%E7%A9%BA%E7%99%BD%E9%A1%B5%E9%9D%A2/RecomWP" title="为你推荐的条目">推荐条目</a>';
document.querySelector('#p-navigation ul').appendChild(navLink);
if (window.wgNamespaceNumber === 0 || window.wgPageName === 'Special:空白页面/RecomWP') {
var wpdb;
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
console.log('RecomWP initialised.');
var DBOpenRequest = window.indexedDB.open('RecomWP');
DBOpenRequest.onerror = function (event) {
console.log('Error loading database.');
};
DBOpenRequest.onsuccess = function (event) {
console.log('Database initialised.');
// store the result of opening the database in the db variable. This is used a lot below
wpdb = DBOpenRequest.result;
if (window.wgArticleId) {
addData({
pageId: window.wgArticleId,
pageName: window.wgPageName
});
} else if (window.wgAction === 'view') {
var GM_addStyle = function (css) {
const style = document.createElement('style');
style.type = 'text/css';
style.id = 'GM_addStyleBy8626';
style.innerHTML = css;
document.head.appendChild(style);
};
document.title = '推荐条目';
document.getElementById('firstHeading').innerText = '推荐条目';
GM_addStyle('.recom-root:after{clear:both;display:table;content:" "}.ra-read-more{overflow:hidden;max-height:300px;transition:max-height 1s;}#left-recom{float:left;width:66.666667%}#right-recom{float:left;width:33.333333%}.ra-read-more h2{border-bottom:0;font-size:.8em;font-weight:400;color:#72777d;padding-bottom:.5em;text-transform:uppercase;letter-spacing:1px}.ra-read-more ul{margin:0}.ext-related-articles-card-list{border-top:0}.ext-related-articles-card-list{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;flex-flow:row wrap;font-size:1em;list-style:none;overflow:hidden;position:relative}.ext-related-articles-card-list .ext-related-articles-card{border-radius:6px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}.ext-related-articles-card-list .ext-related-articles-card:hover{box-shadow:0 5px 10px rgba(0,0,0,0.25),0 5px 10px rgba(0,0,0,0.22);}.ext-related-articles-card-list .ext-related-articles-card:active{box-shadow:0 2px 4px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.24);}.ext-related-articles-card-list .ext-related-articles-card{background-color:#fff;box-sizing:border-box;margin:0;height:80px;position:relative;border:1px solid rgba(0,0,0,.2);margin-right:1%;margin-bottom:10px;width:49%;}.ext-related-articles-card-list .ext-related-articles-card-thumb{background-color:#eaecf0;background-image:url(/w/extensions/RelatedArticles/resources/ext.relatedArticles.cards/noimage.png?9e3d8);background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 56 56%22%3E %3Cpath fill=%22%23eaecf0%22 d=%22M0 0h56v56h-56%22/%3E %3Cpath fill=%22%2372777d%22 d=%22M36.4 13.5h-18.6v24.9c0 1.4.9 2.3 2.3 2.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2 3.5h5.1v6.4h-5.1v-6.4zm-8.8 0h6v1.8h-6v-1.8zm0 4.6h6v1.8h-6v-1.8zm0 15.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z%22/%3E %3C/svg%3E");background-repeat:no-repeat;background-position:top center;-webkit-background-size:100% 100%;background-size:100% 100%;background-size:cover;float:left;height:100%;width:80px;margin-right:10px}.ext-related-articles-card-list .ext-related-articles-card>a{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.ext-related-articles-card-list .ext-related-articles-card-detail{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.ext-related-articles-card-list h3{font-family:inherit;font-size:1em;max-height:2.6em;line-height:1.3;margin:0;overflow:hidden;padding:0;position:relative;font-weight:500}.ext-related-articles-card-list h3 a{color:#000}.ext-related-articles-card-list h3::after{content:" ";position:absolute;right:0;bottom:0;width:25%;height:1.3em;background-color:transparent;background-image:-webkit-linear-gradient(right,rgba(255,255,255,0),#fff 50%);background-image:-moz-linear-gradient(right,rgba(255,255,255,0),#fff 50%);background-image:-o-linear-gradient(right,rgba(255,255,255,0),#fff 50%);background-image:linear-gradient(to right,rgba(255,255,255,0),#fff 50%)}.ext-related-articles-card-list .ext-related-articles-card-extract{color:#72777d;font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.recom-card{box-shadow:0 2px 4px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.24);padding:10px;transition:all 0.3s cubic-bezier(.25,.8,.25,1);}.recom-card + .recom-card{margin-top:20px;}.recom-card:hover{box-shadow:0 5px 10px rgba(0,0,0,0.25),0 5px 10px rgba(0,0,0,0.22);}.recom-card img,.img-banner img{cursor:pointer;width:100%;}.trend-list{list-style-type:none;}.trend-list li{display:flex;line-height:36px;font-size:24px;cursor:pointer;}.trend-list li:hover{color:#4284f3;}.trend-item-left{display:inline-block;min-width:50px;user-select:none;}');
let landscapeDiv = document.createElement('div');
landscapeDiv.id = 'landscape-recom';
let leftDiv = document.createElement('div');
leftDiv.id = 'left-recom';
let rightDiv = document.createElement('div');
rightDiv.id = 'right-recom';
let rootDiv = document.getElementById('mw-content-text');
rootDiv.innerHTML = '';
rootDiv.classList.add('recom-root');
rootDiv.appendChild(landscapeDiv);
rootDiv.appendChild(leftDiv);
rootDiv.appendChild(rightDiv);
generateRecom();
getTrend();
}
};
DBOpenRequest.onupgradeneeded = function (event) {
wpdb = event.target.result;
wpdb.onerror = function (event) {
console.error('Error loading database.');
};
// Create an objectStore for this database
var objectStore = wpdb.createObjectStore('historyArticles', { keyPath: 'pageId' });
// define what data items the objectStore will contain
objectStore.createIndex('pageName', 'pageName', { unique: true });
objectStore.createIndex('visitCount', 'visitCount', { unique: false });
objectStore.createIndex('lastTime', 'lastTime', { unique: false });
console.log('Object store created.');
};
var addData = function (newItem) {
var transaction = wpdb.transaction(['historyArticles'], 'readwrite');
// report on the success of the transaction completing, when everything is done
transaction.oncomplete = function () {
console.log('Transaction completed: database modification finished.');
};
transaction.onerror = function () {
console.error('Transaction not opened due to error: ' + transaction.error + '');
};
// call an object store that's already been added to the database
var objectStore = transaction.objectStore('historyArticles');
objectStore.openCursor(newItem.pageId).onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
newItem.visitCount = cursor.value.visitCount + 1;
newItem.lastTime = Date.now();
var request = cursor.update(newItem);
request.onsuccess = function () {
console.log('Update success');
};
} else {
newItem.visitCount = 1;
newItem.lastTime = Date.now();
var objectStoreRequest = objectStore.add(newItem);
objectStoreRequest.onsuccess = function (event) {
console.log('Insert success');
};
}
};
};
var removeData = function (pageId) {
wpdb.transaction(['historyArticles'], 'readwrite').objectStore('historyArticles').delete(pageId);
};
var httpGet = function(url, callback) {
let request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
var responseText = JSON.parse(request.responseText);
callback(responseText);
}
};
request.send();
}
var relativeSearch = function (pageName, callback) {
let queryUrl = 'https://zh.wikipedia.org/w/api.php?action=query&format=json&formatversion=2&prop=pageimages|description&piprop=thumbnail&pithumbsize=160&generator=search&gsrsearch=morelike%3A'
+ encodeURI(pageName) + '&gsrnamespace=0&gsrlimit=4&gsrqiprofile=classic_noboostlinks&uselang=content&smaxage=86400&maxage=86400';
httpGet(queryUrl, callback);
};
var dailyFeatured = function (callback) {
let ymd = new Date(Date.now() - 2 * 60 * 60000).toISOString().split('T')[0].replace(/-/g, '/');
let queryUrl = 'https://zh.wikipedia.org/api/rest_v1/feed/featured/' + ymd;
httpGet(queryUrl, callback);
};
// O(n) time & O(n) space
var mergeTwo = function(arr1, arr2) {
let merged = [];
let index1 = 0;
let index2 = 0;
let current = 0;
let duplicate = 0;
while (current + duplicate < (arr1.length + arr2.length)) {
let isArr1Depleted = index1 >= arr1.length;
let isArr2Depleted = index2 >= arr2.length;
if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].views >= arr2[index2].views))) {
merged[current] = arr1[index1];
index1++;
} else {
if (merged[current-1] && merged[current-1].article === arr2[index2].article) {
duplicate++;
current--;
} else {
merged[current] = arr2[index2];
}
index2++;
}
current++;
}
return merged;
}
var dailyTrend = function (params, callback) {
var result = [];
Promise.all(params.split(',')
.map(x => fetch('https://alex-wiki.toolforge.org/topviews?' + x)
.then(response => response.json())
.then(data => {
result = mergeTwo(result, data);
})
)
).then(() => callback(result));
};
var getTrend = function () {
var generateImage = function (imgCard, imageObj) {
let featImg = new Image();
featImg.onclick = function () {
window.location.href = imageObj.file_page
}
// normal image
featImg.src = imageObj.thumbnail.source;
imgCard.className = 'recom-card';
imgCard.appendChild(featImg);
if (imageObj.description) {
imgCard.insertAdjacentHTML('beforeend', imageObj.description.html);
}
};
var trendParams = {
'ACG': 'topic=acg',
'影视娱乐': 'topic=drama|film|show,type=star',
'': 'topic=!drama|!film|!show|!acg&type=!star'
};
var generateTrendList = function (type) {
let trendTitle = document.createElement('h2');
trendTitle.innerHTML = type + '热门条目';
trendTitle.style = 'text-align:center';
let trendCard = document.createElement('div');
trendCard.className = 'recom-card';
trendCard.appendChild(trendTitle)
let trendList = document.createElement('ul');
trendList.className = 'trend-list'
trendCard.appendChild(trendList);
document.getElementById('right-recom').appendChild(trendCard);
dailyTrend(trendParams[type], articles => {
for (let i = 0; i < 10; i++) {
let trendItemLeft = document.createElement('span');
trendItemLeft.className = 'trend-item-left';
trendItemLeft.innerText = i + 1;
let trendItemRight = document.createElement('span');
trendItemRight.className = 'trend-item-right';
if (!articles[i]) break;
trendItemRight.innerText = articles[i].article.replace(/_/g, ' ');
let trendItem = document.createElement('li');
trendItem.onclick = function () {
window.location.href = 'https://zh.wikipedia.org/wiki/' + articles[i].article
}
trendItem.appendChild(trendItemLeft);
trendItem.appendChild(trendItemRight);
trendList.appendChild(trendItem);
}
});
};
let imgCard = document.createElement('div');
document.getElementById('right-recom').appendChild(imgCard);
dailyFeatured(res => {
if (res.image) {
generateImage(imgCard, res.image);
}
});
generateTrendList('');
generateTrendList('影视娱乐');
generateTrendList('ACG');
}
var appendToPage = function (pageName, pages, pageId) {
let titleBar = document.createElement('h2');
titleBar.innerHTML = '<strong>' + pageName + '</strong>相关页面 ';
let alist = document.createElement('ul');
alist.className = 'ext-related-articles-card-list';
pages.forEach(function (item) {
let listItem = document.createElement('li');
listItem.className = 'ext-related-articles-card';
listItem.title = item.title;
let cardDiv = document.createElement('div');
cardDiv.className = 'ext-related-articles-card-thumb';
if (item.thumbnail) {
cardDiv.style['background-image'] = 'url("' + item.thumbnail.source + '")';
}
let cardLink = document.createElement('a');
cardLink.href = '/wiki/' + encodeURI(item.title);
let cardDetail = document.createElement('div');
cardDetail.className = 'ext-related-articles-card-detail';
cardDetail.innerHTML = '<h3>' + item.title + '</h3>';
if (item.description) {
cardDetail.innerHTML += '<p class="ext-related-articles-card-extract">' + item.description + '</p>';
}
listItem.appendChild(cardDiv);
listItem.appendChild(cardLink);
listItem.appendChild(cardDetail);
alist.appendChild(listItem);
});
let blockDiv = document.createElement('div');
blockDiv.className = 'ra-read-more';
let dontLike = document.createElement('a');
dontLike.innerText = '[不感兴趣]';
dontLike.onclick = function () {
removeData(pageId);
blockDiv.style['max-height'] = '0';
};
titleBar.appendChild(dontLike);
blockDiv.appendChild(titleBar);
blockDiv.appendChild(alist);
let leftDiv = document.getElementById('left-recom');
leftDiv.appendChild(blockDiv);
};
var generateRecom = function () {
/*
* Simple implementation of Binary heap
*/
function BinaryHeap (scoreFunction) {
this.content = [];
this.scoreFunction = scoreFunction;
}
BinaryHeap.prototype = {
push: function (element) {
// Add the new element to the end of the array.
this.content.push(element);
// Allow it to bubble up.
this.bubbleUp(this.content.length - 1);
},
pop: function () {
// Store the first element so we can return it later.
var result = this.content[0];
// Get the element at the end of the array.
var end = this.content.pop();
// If there are any elements left, put the end element at the
// start, and let it sink down.
if (this.content.length > 0) {
this.content[0] = end;
this.sinkDown(0);
}
return result;
},
remove: function (node) {
var length = this.content.length;
// To remove a value, we must search through the array to find
// it.
for (var i = 0; i < length; i++) {
if (this.content[i] !== node) continue;
// When it is found, the process seen in 'pop' is repeated
// to fill up the hole.
var end = this.content.pop();
// If the element we popped was the one we needed to remove,
// we're done.
if (i === length - 1) break;
// Otherwise, we replace the removed element with the popped
// one, and allow it to float up or sink down as appropriate.
this.content[i] = end;
this.bubbleUp(i);
this.sinkDown(i);
break;
}
},
size: function () {
return this.content.length;
},
bubbleUp: function (n) {
// Fetch the element that has to be moved.
var element = this.content[n],
score = this.scoreFunction(element);
// When at 0, an element can not go up any further.
while (n > 0) {
// Compute the parent element's index, and fetch it.
var parentN = Math.floor((n + 1) / 2) - 1,
parent = this.content[parentN];
// If the parent has a lesser score, things are in order and we
// are done.
if (score >= this.scoreFunction(parent)) {
break;
}
// Otherwise, swap the parent with the current element and
// continue.
this.content[parentN] = element;
this.content[n] = parent;
n = parentN;
}
},
sinkDown: function (n) {
// Look up the target element and its score.
var length = this.content.length,
element = this.content[n],
elemScore = this.scoreFunction(element);
while (true) {
// Compute the indices of the child elements.
var child2N = (n + 1) * 2, child1N = child2N - 1;
// This is used to store the new position of the element,
// if any.
var swap = null;
// If the first child exists (is inside the array)...
if (child1N < length) {
// Look it up and compute its score.
var child1 = this.content[child1N],
child1Score = this.scoreFunction(child1);
// If the score is less than our element's, we need to swap.
if (child1Score < elemScore) {
swap = child1N;
}
}
// Do the same checks for the other child.
if (child2N < length) {
var child2 = this.content[child2N],
child2Score = this.scoreFunction(child2);
if (child2Score < (swap == null ? elemScore : child1Score)) {
swap = child2N;
}
}
// No need to swap further, we are done.
if (swap == null) break;
// Otherwise, swap and continue.
this.content[n] = this.content[swap];
this.content[swap] = element;
n = swap;
}
}
};
var heap = new BinaryHeap(function (x) {
var res = ((Date.now() - x.lastTime) / 604800000) - x.visitCount;
return res;
});
// Database iterate
var objectStore = wpdb.transaction('historyArticles').objectStore('historyArticles');
objectStore.openCursor().onsuccess = function (event) {
document.getElementById('left-recom').innerHTML = '';
var cursor = event.target.result;
if (cursor) {
heap.push(cursor.value);
cursor.continue();
} else {
// first remove the backmost entries to keep size, default size 127
if (heap.size() >= 128) {
for (let i = 127; i < heap.size(); i++) {
removeData(heap.content[i].pageId);
}
}
var getPage = function () {
if (!heap.size()) {
return false;
}
let topEntry = heap.pop();
let pageName = topEntry.pageName;
relativeSearch(pageName, function (data) {
if (data.batchcomplete) {
if (data.query) {
appendToPage(pageName, data.query.pages, topEntry.pageId);
} else {
removeData(topEntry.pageId);
getPage();
}
}
});
return true;
};
for (let i = 1; i <= 6; i++) {
if (!getPage()) {
break;
}
}
}
};
};
}
})();