hyperzlib
/
IsekaiWidgets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix incompatible for PHP 8.2

Browse Source
master
落雨楓 2 years ago
parent 07183c8155
commit 3e21fb44bc
3 changed files with 2247 additions and 0 deletions
Show Stats Download Patch File Download Diff File

1392
modules/tile/ext.isekai.tile.css
View File

File diff suppressed because it is too large Load Diff

1
modules/tile/ext.isekai.tile.js
View File

File diff suppressed because one or more lines are too long

854
src/tile/ext.isekai.tile.js
Unescape Escape View File

@ -0,0 +1,854 @@
/* global Colors */
import './tile.less';
import { registerModule } from '../moduleRegister';
var TileDefaultConfig = {
tileDeferred: 0,
size: "medium",
cover: "",
coverPosition: "center",
effect: "",
effectInterval: 3000,
effectDuration: 500,
target: null,
canTransform: true,
onClick: () => {},
onTileCreate: () => {},
};
var METRO_THROWS = true;
var GRID_GAP = 10;
class IsekaiTile {
static setup(options) {
TileDefaultConfig = jQuery.extend({}, TileDefaultConfig, options);
}
static init() {
}
}
registerModule('ui.tile', IsekaiTile);
(function($){
function rand(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}
var Utils = {
isValue: function(val){
return val !== undefined && val !== null && val !== "";
},
isUrl: function (val){
/* eslint-disable-next-line */
return /^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(val);
},
isTag: function(val){
/* eslint-disable-next-line */
return /^<\/?[\w\s="/.':;#-\/\?]+>/gi.test(val);
},
isType: function(o, t){
if (!Utils.isValue(o)) {
return false;
}
if (typeof o === t) {
return o;
}
if (Utils.isTag(o) || Utils.isUrl(o)) {
return false;
}
if (typeof window[o] === t) {
return window[o];
}
if (typeof o === 'string' && o.indexOf(".") === -1) {
return false;
}
if (typeof o === 'string' && o.indexOf("/") !== -1) {
return false;
}
if (typeof o === 'string' && o.indexOf(" ") !== -1) {
return false;
}
if (typeof o === 'string' && o.indexOf("(") !== -1) {
return false;
}
if (typeof o === 'string' && o.indexOf("[") !== -1) {
return false;
}
if (typeof o === "number" && t.toLowerCase() !== "number") {
return false;
}
var ns = o.split(".");
var i, context = window;
for(i = 0; i < ns.length; i++) {
context = context[ns[i]];
}
return typeof context === t ? context : false;
},
isFunc: function(f){
return Utils.isType(f, 'function');
},
/**
*
* @param {TouchEvent|Event|MouseEvent} e
* @returns {{x: (*), y: (*)}}
*/
pageXY: function(e){
return {
x: e.changedTouches ? e.changedTouches[0].pageX : e.pageX,
y: e.changedTouches ? e.changedTouches[0].pageY : e.pageY
};
},
isRightMouse: function(e){
return "which" in e ? e.which === 3 : "button" in e ? e.button === 2 : undefined;
},
func: function(f){
/* jshint -W054 */
return new Function("a", f);
},
exec: function(f, args, context){
var result;
if (f === undefined || f === null) {return false;}
var func = Utils.isFunc(f);
if (func === false) {
func = Utils.func(f);
}
try {
result = func.apply(context, args);
} catch (err) {
result = null;
if (METRO_THROWS === true) {
throw err;
}
}
return result;
},
};
var FrameAnimation = {
duration: 100,
func: "linear",
switch: function(current, next){
current.hide();
next.css({top: 0, left: 0}).show();
},
slideUp: function(current, next, duration, func){
var h = current.parent().outerHeight(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current
.css("z-index", 1)
.animate({
draw: {
top: -h,
opacity: 0
},
dur: duration,
ease: func
});
next
.css({
top: h,
left: 0,
zIndex: 2
})
.animate({
draw: {
top: 0,
opacity: 1
},
dur: duration,
ease: func
});
},
slideDown: function(current, next, duration, func){
var h = current.parent().outerHeight(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current
.css("z-index", 1)
.animate({
draw: {
top: h,
opacity: 0
},
dur: duration,
ease: func
});
next
.css({
left: 0,
top: -h,
zIndex: 2
})
.animate({
draw: {
top: 0,
opacity: 1
},
dur: duration,
ease: func
});
},
slideLeft: function(current, next, duration, func){
var w = current.parent().outerWidth(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current
.css("z-index", 1)
.animate({
draw: {
left: -w,
opacity: 0
},
dur: duration,
ease: func
});
next
.css({
left: w,
zIndex: 2
})
.animate({
draw: {
left: 0,
opacity: 1
},
dur: duration,
ease: func
});
},
slideRight: function(current, next, duration, func){
var w = current.parent().outerWidth(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current
.css("z-index", 1)
.animate({
draw: {
left: w,
opacity: 0
},
dur: duration,
ease: func
});
next
.css({
left: -w,
zIndex: 2
})
.animate({
draw: {
left: 0,
opacity: 1
},
dur: duration,
ease: func
});
},
fade: function(current, next, duration){
if (duration === undefined) {duration = this.duration;}
current
.animate({
draw: {
opacity: 0
},
dur: duration
});
next
.css({
top: 0,
left: 0,
opacity: 0
})
.animate({
draw: {
opacity: 1
},
dur: duration
});
}
};
var Colors = {
PALETTES: {
ALL: "colorList",
METRO: "colorListMetro",
STANDARD: "colorListStandard"
},
colorListMetro: {
lime: '#a4c400',
green: '#60a917',
emerald: '#008a00',
blue: '#00AFF0',
teal: '#00aba9',
cyan: '#1ba1e2',
cobalt: '#0050ef',
indigo: '#6a00ff',
violet: '#aa00ff',
pink: '#dc4fad',
magenta: '#d80073',
crimson: '#a20025',
red: '#CE352C',
orange: '#fa6800',
amber: '#f0a30a',
yellow: '#fff000',
brown: '#825a2c',
olive: '#6d8764',
steel: '#647687',
mauve: '#76608a',
taupe: '#87794e'
},
colorListStandard: {
aliceBlue: "#f0f8ff",
antiqueWhite: "#faebd7",
aqua: "#00ffff",
aquamarine: "#7fffd4",
azure: "#f0ffff",
beige: "#f5f5dc",
bisque: "#ffe4c4",
black: "#000000",
blanchedAlmond: "#ffebcd",
blue: "#0000ff",
blueViolet: "#8a2be2",
brown: "#a52a2a",
burlyWood: "#deb887",
cadetBlue: "#5f9ea0",
chartreuse: "#7fff00",
chocolate: "#d2691e",
coral: "#ff7f50",
cornflowerBlue: "#6495ed",
cornsilk: "#fff8dc",
crimson: "#dc143c",
cyan: "#00ffff",
darkBlue: "#00008b",
darkCyan: "#008b8b",
darkGoldenRod: "#b8860b",
darkGray: "#a9a9a9",
darkGreen: "#006400",
darkKhaki: "#bdb76b",
darkMagenta: "#8b008b",
darkOliveGreen: "#556b2f",
darkOrange: "#ff8c00",
darkOrchid: "#9932cc",
darkRed: "#8b0000",
darkSalmon: "#e9967a",
darkSeaGreen: "#8fbc8f",
darkSlateBlue: "#483d8b",
darkSlateGray: "#2f4f4f",
darkTurquoise: "#00ced1",
darkViolet: "#9400d3",
deepPink: "#ff1493",
deepSkyBlue: "#00bfff",
dimGray: "#696969",
dodgerBlue: "#1e90ff",
fireBrick: "#b22222",
floralWhite: "#fffaf0",
forestGreen: "#228b22",
fuchsia: "#ff00ff",
gainsboro: "#DCDCDC",
ghostWhite: "#F8F8FF",
gold: "#ffd700",
goldenRod: "#daa520",
gray: "#808080",
green: "#008000",
greenYellow: "#adff2f",
honeyDew: "#f0fff0",
hotPink: "#ff69b4",
indianRed: "#cd5c5c",
indigo: "#4b0082",
ivory: "#fffff0",
khaki: "#f0e68c",
lavender: "#e6e6fa",
lavenderBlush: "#fff0f5",
lawnGreen: "#7cfc00",
lemonChiffon: "#fffacd",
lightBlue: "#add8e6",
lightCoral: "#f08080",
lightCyan: "#e0ffff",
lightGoldenRodYellow: "#fafad2",
lightGray: "#d3d3d3",
lightGreen: "#90ee90",
lightPink: "#ffb6c1",
lightSalmon: "#ffa07a",
lightSeaGreen: "#20b2aa",
lightSkyBlue: "#87cefa",
lightSlateGray: "#778899",
lightSteelBlue: "#b0c4de",
lightYellow: "#ffffe0",
lime: "#00ff00",
limeGreen: "#32dc32",
linen: "#faf0e6",
magenta: "#ff00ff",
maroon: "#800000",
mediumAquaMarine: "#66cdaa",
mediumBlue: "#0000cd",
mediumOrchid: "#ba55d3",
mediumPurple: "#9370db",
mediumSeaGreen: "#3cb371",
mediumSlateBlue: "#7b68ee",
mediumSpringGreen: "#00fa9a",
mediumTurquoise: "#48d1cc",
mediumVioletRed: "#c71585",
midnightBlue: "#191970",
mintCream: "#f5fffa",
mistyRose: "#ffe4e1",
moccasin: "#ffe4b5",
navajoWhite: "#ffdead",
navy: "#000080",
oldLace: "#fdd5e6",
olive: "#808000",
oliveDrab: "#6b8e23",
orange: "#ffa500",
orangeRed: "#ff4500",
orchid: "#da70d6",
paleGoldenRod: "#eee8aa",
paleGreen: "#98fb98",
paleTurquoise: "#afeeee",
paleVioletRed: "#db7093",
papayaWhip: "#ffefd5",
peachPuff: "#ffdab9",
peru: "#cd853f",
pink: "#ffc0cb",
plum: "#dda0dd",
powderBlue: "#b0e0e6",
purple: "#800080",
rebeccaPurple: "#663399",
red: "#ff0000",
rosyBrown: "#bc8f8f",
royalBlue: "#4169e1",
saddleBrown: "#8b4513",
salmon: "#fa8072",
sandyBrown: "#f4a460",
seaGreen: "#2e8b57",
seaShell: "#fff5ee",
sienna: "#a0522d",
silver: "#c0c0c0",
slyBlue: "#87ceeb",
slateBlue: "#6a5acd",
slateGray: "#708090",
snow: "#fffafa",
springGreen: "#00ff7f",
steelBlue: "#4682b4",
tan: "#d2b48c",
teal: "#008080",
thistle: "#d8bfd8",
tomato: "#ff6347",
turquoise: "#40e0d0",
violet: "#ee82ee",
wheat: "#f5deb3",
white: "#ffffff",
whiteSmoke: "#f5f5f5",
yellow: "#ffff00",
yellowGreen: "#9acd32"
},
colorList: {},
colors: function(palette){
var c = [];
palette = palette || this.PALETTES.ALL;
$.each(this[palette], function(){
c.push(this);
});
return c;
},
}
function Tile(options, element){
this.init = function(options, element) {
this.effectInterval = false;
this.images = [];
this.slides = [];
this.currentSlide = -1;
this.options = $.extend({}, TileDefaultConfig, options);
this.element = element;
this.hasIcon = false;
this.hasBranding = false;
this._fixSizeCallback = this.resize.bind(this);
this._create();
};
this._create = function(){
this._createTile();
this._createEvents();
this.element.trigger("tilecreate");
};
this._createTile = function(){
function switchImage(el, img_src, i){
setTimeout(function(){
el.fadeOut(500, function(){
el.css("background-image", "url(" + img_src + ")");
el.fadeIn();
});
}, i * 300);
}
var that = this, element = this.element, o = this.options;
var slides = element.find(".slide");
var slides2 = element.find(".slide-front, .slide-back");
element.addClass("tile-" + o.size);
if(element.find('.icon').length > 0){
this.hasIcon = true;
}
if(element.find('.branding-bar')){
this.hasBranding = true;
}
if (o.effect.indexOf("hover-") > -1) {
element.addClass("effect-" + o.effect);
$.each(slides2, function(){
var slide = $(this);
if (slide.data("cover") !== undefined) {
that._setCover(slide, slide.data("cover"), slide.data("cover-position"));
}
})
}
if (o.effect.indexOf("animate-") > -1 && slides.length > 1) {
$.each(slides, function(i){
var slide = $(this);
that.slides.push(this);
if (slide.data("cover") !== undefined) {
this._setCover(slide, slide.data("cover"), slide.data("cover-position"));
}
if (i > 0) {
if (["animate-slide-up", "animate-slide-down"].indexOf(o.effect) > -1) slide.css("top", "100%");
if (["animate-slide-left", "animate-slide-right"].indexOf(o.effect) > -1) slide.css("left", "100%");
if (["animate-fade"].indexOf(o.effect) > -1) slide.css("opacity", 0);
}
});
this.currentSlide = 0;
this._runEffects();
}
if (o.cover !== "") {
this._setCover(element, o.cover);
}
if (o.effect === "image-set") {
element.addClass("image-set");
$.each(element.children("img"), function(){
var imgElem = document.createElement('img');
imgElem.src = this.src;
imgElem.srcset = this.srcset;
imgElem.alt = this.alt;
that.images.push(imgElem);
$(this).remove();
});
var temp = this.images.slice();
for(var i = 0; i < 5; i++) {
var rnd_index = rand(0, temp.length - 1);
var div = $("<div>").addClass("img -js-img-"+i).css("background-image", "url("+temp[rnd_index].src+")");
element.prepend(div);
if (temp.length > 1) {
temp.splice(rnd_index, 1);
}
}
var a = [0, 1, 4, 3, 2];
setInterval(function(){
var temp = that.images.slice();
var colors = Colors.colors(Colors.PALETTES.ALL), bg;
bg = colors[rand(0, colors.length - 1)];
element.css("background-color", bg);
for(var i = 0; i < a.length; i++) {
var rnd_index = rand(0, temp.length - 1);
var div = element.find(".-js-img-"+a[i]);
switchImage(div, temp[rnd_index].src, i);
if (temp.length > 1) {
temp.splice(rnd_index, 1);
}
}
a = a.reverse();
}, 5000);
}
};
this._runEffects = function(){
var o = this.options;
if (this.effectInterval === false) this.effectInterval = setInterval(function(){
var current, next;
current = $(this.slides[this.currentSlide]);
this.currentSlide++;
if (this.currentSlide === this.slides.length) {
this.currentSlide = 0;
}
next = this.slides[this.currentSlide];
if (o.effect === "animate-slide-up") FrameAnimation.slideUp($(current), $(next), o.effectDuration);
if (o.effect === "animate-slide-down") FrameAnimation.slideDown($(current), $(next), o.effectDuration);
if (o.effect === "animate-slide-left") FrameAnimation.slideLeft($(current), $(next), o.effectDuration);
if (o.effect === "animate-slide-right") FrameAnimation.slideRight($(current), $(next), o.effectDuration);
if (o.effect === "animate-fade") FrameAnimation.fade($(current), $(next), o.effectDuration);
}, o.effectInterval);
};
this._stopEffects = function(){
clearInterval(this.effectInterval);
this.effectInterval = false;
};
this.resize = function(){
var ratio = 1;
var padding = 0;
var grid = this.element.parent('.tiles-grid');
var gridWidth = 0;
if(grid.length > 0){
gridWidth = grid.width();
}
if(this.options.size == 'wide'){
ratio = 0.5;
}
//修正长宽比
var height = this.element.width() * ratio - padding;
//this.element.height(height);
if(this.hasIcon){
var fontSize = height * 0.33;
var iconDom = this.element.find('.icon');
iconDom.css('font-size', fontSize + 'px');
if(this.hasBranding){ //计算与标签的重叠
var iconBottom = (height + fontSize) / 2;
var brandingTop = height - this.element.find('.branding-bar').outerHeight();
var overlap = iconBottom - brandingTop + (height * 0.1);
if(overlap > 0){
iconDom.css('padding-bottom', overlap + 'px');
}
}
}
}
this._setCover = function(to, src, pos){
if (!Utils.isValue(pos)) {
pos = this.options.coverPosition;
}
to.css({
backgroundImage: "url("+src+")",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: pos
});
};
this._createEvents = function(){
var element = this.element, o = this.options;
element.on('mousedown touchstart', function(e){
var tile = $(this);
var dim = {w: element.width(), h: element.height()};
var X = Utils.pageXY(e).x - tile.offset().left,
Y = Utils.pageXY(e).y - tile.offset().top;
var side;
if (Utils.isRightMouse(e) === false) {
if (X < dim.w * 1 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) {
side = 'left';
} else if (X > dim.w * 2 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) {
side = 'right';
} else if (X > dim.w * 1 / 3 && X < dim.w * 2 / 3 && Y > dim.h / 2) {
side = 'bottom';
} else {
side = "top";
}
if (o.canTransform === true) tile.addClass("transform-" + side);
if (o.target !== null) {
setTimeout(function(){
document.location.href = o.target;
}, 100);
}
Utils.exec(o.onClick, [side], element[0]);
element.trigger("click", {
side: side
});
}
});
element.on('mouseup touchend mouseleave', function(){
$(this)
.removeClass("transform-left")
.removeClass("transform-right")
.removeClass("transform-top")
.removeClass("transform-bottom");
});
$(window).on('resize', this._fixSizeCallback);
$(this._fixSizeCallback);
};
this.destroy = function(){
var element = this.element;
element.off('mousedown touchstart');
element.off('mouseup touchend mouseleave');
$(window).off('resize', this._fixSizeCallback);
this._stopEffects();
};
this.init(options, element);
};
function getElementOptions(element){
var options = {};
$.each(element[0].attributes, function (index, attribute){
if(attribute.name.startsWith('data-')){
options[attribute.name.substr(5)] = attribute.value;
}
});
return options;
}
$.fn.extend({
tile: function(action, ...args){
var result;
this.each(function(){
var element = $(this);
if(element.attr('data-role') !== 'tile'){
throw new Error('This element isn\'t a tile element');
}
var tileObj = element.data('tile');
if(action == 'init'){
if(tileObj){
throw new Error('Tile already inited.');
}
var options = args[0] || {};
options = $.extend({}, options, getElementOptions(element));
tileObj = new Tile(options, element);
element.data('tile', tileObj);
} else {
if(!tileObj){
throw new Error('Tile not inited.');
}
if(!tileObj[action]){
throw new Error('Method: ' + action + ' not exists.');
}
result = tileObj[action].apply(tileObj, ...args);
}
});
if(result == undefined){
return this;
} else {
return result;
}
}
});
function resizeGrid(){
$('.tiles-grid').each(function(){
var dom = $(this);
var width = dom.width();
var gridSize = width / 4 - GRID_GAP;
dom.css({
gridTemplateColumns: 'repeat(4, ' + gridSize + 'px)',
gridAutoRows: gridSize + 'px',
});
});
}
$('*[data-role="tile"]').tile('init');
$(window).on('resize', resizeGrid);
$(resizeGrid);
function onCollapseDivChange(mutationsList){
mutationsList.forEach((item) => {
if(item.type == 'attributes' && item.attributeName == 'class'){
$('*[data-role="tile"]').tile('resize');
resizeGrid();
}
});
}
if($('body').hasClass('skin-minerva')){
$('#mw-content-text .collapsible-block').each(function(){
var dom = $(this);
if(dom.find('*[data-role="tile"]').length > 0){ //存在tile，监听这个dom
var observer = new MutationObserver(onCollapseDivChange);
observer.observe(dom[0], {
attributes: true,
});
}
});
}
})(jQuery);
Write Preview
Loading…
Cancel
Save