您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
A Mouse Gestures script is the same as in the old Opera
- // ==UserScript==
- // @name Mouse Gestures like Opera
- // @namespace https://greasyfork.org/users/37096/
- // @homepage https://greasyfork.org/scripts/33398/
- // @supportURL https://greasyfork.org/scripts/33398/feedback
- // @version 1.1.0
- // @description A Mouse Gestures script is the same as in the old Opera
- // @author Hồng Minh Tâm
- // @require https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
- // @icon https://png.icons8.com/ultraviolet/40/000000/mouse-right-click.png
- // @include *
- // @compatible chrome
- // @license GNU GPLv3
- // @grant GM_addStyle
- // @grant GM_openInTab
- // @grant GM_registerMenuCommand
- // @grant GM_setValue
- // @grant GM_getValue
- // @grant window.close
- // @grant window.focus
- // @grant unsafeWindow
- // @noframes
- // ==/UserScript==
- (function () {
- 'use strict';
- GM_addStyle([
- '[class*="mglo-"], [class*="mglo-"] * { background-color: transparent; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; padding: 0; margin: 0; min-width: auto; min-height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }',
- '[class*="mglo-"]:before, [class*="mglo-"]:after, [class*="mglo-"] *:before, [class*="mglo-"] *:after { background-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }',
- /*main*/
- '.mglo { z-index: 10000000000; position: fixed; overflow: hidden; border: 1px solid #CCC; white-space: nowrap; font-family: sans-serif; background-color: rgba(0, 0, 0, 0.7); color: #333; border-radius: 50%; width: 400px; height: 400px; }',
- '.mglo .mglo-middle, .mglo .mglo-up, .mglo .mglo-down, .mglo .mglo-left, .mglo .mglo-right { display: table; position: absolute; height: 160px; width: 160px; padding: 0; margin: 0; }',
- '.mglo .mglo-middle { top: 50%; left: 50%; margin-top: -20px; margin-left: -80px; width: 160px; height: 160px; text-align: center; }',
- '.mglo .mglo-up { top: 0; left: 50%; margin-left: -80px; }',
- '.mglo .mglo-down { bottom: 0; left: 50%; margin-left: -80px; }',
- '.mglo .mglo-left { top: 50%; left: 0; margin-top: -80px; }',
- '.mglo .mglo-right { top: 50%; right: 0; margin-top: -80px; }',
- '.mglo .mglo-label { color: #fff; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-weight: 700; font-size: 16px; text-transform: none; letter-spacing: normal; white-space: pre-wrap; padding: 0; margin: 0; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; line-height: 22px; }',
- '.mglo .mglo-up > .mglo-label { display: table-cell; vertical-align: bottom; text-align: center; padding-bottom: 50px; }',
- '.mglo .mglo-down > .mglo-label { display: table-cell; vertical-align: top; text-align: center; padding-top: 50px; }',
- '.mglo .mglo-left > .mglo-label { display: table-cell; vertical-align: middle; text-align: right; padding-right: 50px; }',
- '.mglo .mglo-right > .mglo-label { display: table-cell; vertical-align: middle; text-align: left; padding-left: 50px; }',
- '.mglo .mglo-icon { position: absolute; width: initial; display: initial; }',
- '.mglo .mglo-middle > .mglo-icon { position: initial; }',
- '.mglo .mglo-up > .mglo-icon { bottom: 0; left: 50%; margin-left: -20px; }',
- '.mglo .mglo-down > .mglo-icon { top: 0; left: 50%; margin-left: -20px; }',
- '.mglo .mglo-left > .mglo-icon { top: 50%; right: 0; margin-top: -20px; }',
- '.mglo .mglo-right > .mglo-icon { top: 50%; left: 0; margin-top: -20px; }',
- '.mglo .active > .mglo-label { background-color: transparent; color: #ffff00; }',
- '.mglo .mglo-up.active > .mglo-label { padding-bottom: 10px; }',
- '.mglo .mglo-down.active > .mglo-label { padding-top: 10px; }',
- '.mglo .mglo-left.active > .mglo-label { padding-right: 10px; }',
- '.mglo .mglo-right.active > .mglo-label { padding-left: 10px; }',
- '.mglo .active > .mglo-icon { display: none; }',
- '.mglo.hide, .mglo .hide { display: none; }',
- /*list icon*/
- '.mglo-list-icon { line-height: 0; margin-bottom: 10px; }',
- '.mglo-list-icon > .mglo-icon { width: 30px; height: 30px; -webkit-user-drag: none; user-select: none; }',
- '.mglo-list-icon-group > label { display: inline-block; margin-bottom: 5px; }',
- '.mglo-list-icon-group.inline .mglo-list-icon { display: inline-block; }',
- /*dialog*/
- '.mglo-dialog { z-index: 9999999999; padding-top: 30px; padding-bottom: 30px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); }',
- '.mglo-dialog-content { max-height: 100%; min-height: 200px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-flow: column; -ms-flex-direction: column; flex-flow: column; margin: auto; background-color: #fff; position: relative; outline: 0; width: 600px; }',
- '.mglo-dialog-form { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-flow: column; -ms-flex-direction: column; flex-flow: column; }',
- '.mglo-dialog-header { color: #fff; background-color: #2196F3; padding: 15px; font-weight: 700; position: relative; }',
- '.mglo-dialog-body { overflow: auto; padding: 15px; }',
- '.mglo-dialog-footer { background-color: #f9f9f9; border-top: 1px solid #ddd; padding: 8px 15px; text-align: right; }',
- '.mglo-dialog-footer > button + button { margin-left: 8px; }',
- '.mglo-dialog-footer:empty { display: none; }',
- '.mglo-dialog-footer:before, .mglo-dialog-footer:after { content: ""; display: table; clear: both; }',
- '.mglo-dialog .mglo-close { position: absolute; right: 0; top: 0; bottom: 0; padding: 0 20px; border: none; box-shadow: none; border-radius: 0; outline: 0; text-decoration: none; color: inherit; background-color: inherit; font-size: 24px; font-weight: 700; }',
- '.mglo-dialog .mglo-close:hover { color: #fff; background-color: #f44336; }',
- /*form*/
- '.mglo-form-group > label { display: inline-block; margin-bottom: 5px; }',
- '.mglo-form-control { padding: 5px 10px; color: #333; background-color: #fff; border: 1px solid #ccc; width: 100%; display: block; margin-bottom: 10px }',
- '.mglo-form-group.inline .mglo-form-control { display: inline-block; margin-left: 8px; width: auto; }',
- '.mglo-form-control[disabled] { background-color: #eee; color: #888 }',
- '.mglo-form-check { display: block; margin-bottom: 10px; }',
- '.mglo-form-group.inline .mglo-form-check { display: inline-block; }',
- '.mglo-form-group.inline .mglo-form-check + .mglo-form-check { margin-left: 10px; }',
- '.mglo-form-check-label { position: relative; padding: 0; margin: 0; display: inline-block; }',
- '.mglo-form-check-input { display: none !important; }',
- 'input.mglo-form-check-input + span, input.mglo-form-check-input + span { padding: 0; margin: 0; }',
- '.mglo-form-check-input + span:before { position: relative; top: 5px; display: inline-block; width: 20px; height: 20px; content: ""; border: 2px solid #c0c0c0; margin-right: 8px; background-color: #fff; }',
- '.mglo-form-check-input:checked + span:before { border-color: #3e97eb; }',
- '.mglo-form-check-input:checked + span:after { content: ""; position: absolute; }',
- '.mglo-form-check-input[type="checkbox"] +span:before { border-radius: 2px; }',
- '.mglo-form-check-input[type="checkbox"]:checked + span:before { background: #3e97eb; }',
- '.mglo-form-check-input[type="checkbox"]:checked + span:after { top: 8px; left: 7px; width: 6px; height: 12px; transform: rotate(45deg); border: 2px solid #fff; border-top: 0; border-left: 0; }',
- '.mglo-form-check-input[type="radio"] +span:before { border-radius: 50%; }',
- '.mglo-form-check-input[type="radio"]:checked + span:after { top: 10px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background: #3e97eb; }',
- '.mglo-form-no-label, .mglo-form-no-label input, .mglo-form-no-label select { margin-bottom: 0; }',
- '.mglo-form-no-label .mglo-form-check-input + span:before { margin-right: 0; }',
- '.mglo-form-no-label .mglo-form-check-label { height: 30px; }',
- '.mglo-form-no-label .mglo-list-icon { margin-bottom: 0; }',
- /*button*/
- '.mglo-btn { padding: 5px 10px; color: #333; background-color: #fff; border: 1px solid #ccc; }',
- '.mglo-btn:hover { color: #333; background-color: #e6e6e6; }',
- '.mglo-btn:active { background-color: #c6c6c6; }',
- '.mglo-btn.blue { color: #fff; background-color: #2196F3; border-color: #2196F3; }',
- '.mglo-btn.red { color: #fff; background-color: #f44336; border-color: #f44336; }',
- '.mglo-btn.left { float: left; }',
- '.mglo-btn.right { float: right; }',
- /*inputmg*/
- '.mglo-form-group.mglo-form-group-record { display: flex; }',
- '.mglo-form-group.mglo-form-group-record .mglo-btn.mglo-btn-record:before { display: block; content: ""; background-color: #808080; width: 12px; height: 12px; border-radius: 50%; transition: 0.2s; }',
- '.mglo-form-group.mglo-form-group-record .mglo-btn.mglo-btn-record:hover:before { background-color: #f44336; transition: 0.2s; }',
- '.mglo-form-group.mglo-form-group-record .mglo-form-control { text-transform: uppercase; font-weight: 700; }',
- '.mglo-record-backdrop { z-index: 9999999999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); }',
- '.mglo-record-backdrop .mglo-list-icon { position: absolute; bottom: 0; left: 0; right: 0;text-align: center; background-color: rgba(0,0,0,0.5); }',
- '.mglo-record-backdrop .mglo-list-icon > .mglo-icon { margin-top: 20px; margin-bottom: 20px; }',
- /*table*/
- '.mglo-table { border: 1px solid #c0c0c0; border-collapse: collapse; border-spacing: 0; width: 100%; }',
- '.mglo-table th { font-weight: 700; }',
- '.mglo-table tr { border-bottom: 1px solid #c0c0c0; }',
- '.mglo-table td, .mglo-table th { padding: 8px; vertical-align: top; }',
- '.mglo-table tr:nth-child(even) { background-color: #f1f1f1; }',
- /*item*/
- '.mglo-item { padding: 8px; border: 1px solid #ccc; }',
- '.mglo-item + .mglo-item { margin-top: 5px; }',
- '.mglo-item>*:last-child, .mglo-item>*:last-child>*:last-child { margin-bottom: 0; }'
- ].join('\n'));
- var varw = (function (context) {
- return function (varName, varValue, setEvent) {
- var value = varValue;
- Object.defineProperty(context, varName, {
- get: function () {
- return value;
- },
- set: function (v) {
- value = v;
- if (setEvent) {
- setEvent(v);
- }
- }
- });
- };
- })(unsafeWindow);
- varw('isRecord', false, function (value) {
- recordMG(value);
- });
- var SENSITIVITY = 20;
- var startX, startY;
- var gesture = '';
- var gestures;
- var values;
- var preventContextMenu = false;
- var mouseDownTriggered = false;
- var timeoutDelay;
- var dialogSetting;
- var icon = {
- up: getIcons8('ultraviolet', 'up', 40, '000000'),
- down: getIcons8('ultraviolet', 'down', 40, '000000'),
- left: getIcons8('ultraviolet', 'left', 40, '000000'),
- right: getIcons8('ultraviolet', 'right', 40, '000000'),
- mouseRightClick: getIcons8('ultraviolet', 'mouse-right-click', 40, '000000')
- };
- var $contentSetting = $('<div/>');
- var $buttonReset = $('<button/>', {
- class: 'mglo-btn',
- type: 'reset',
- text: 'Reset'
- });
- var $buttonSave = $('<button/>', {
- class: 'mglo-btn blue',
- text: 'Save'
- });
- var $buttonFooterSettings = [$buttonReset, $buttonSave];
- var $currentInputMG;
- var $recordBackdrop = $('<div/>', {
- class: 'mglo-record-backdrop'
- });
- var gestureStrings = {
- up: 'u',
- down: 'd',
- left: 'l',
- right: 'r'
- };
- var defaultActions = {
- closeTab: {
- label: 'Close tab',
- category: 'Tab',
- fn: function () {
- window.top.close();
- }
- },
- newTab: {
- label: 'New tab',
- category: 'Tab',
- fn: function () {
- defaultActions.openInNewTab.fn();
- }
- },
- duplicateTab: {
- label: 'Duplicate tab',
- category: 'Tab',
- fn: function () {
- defaultActions.openInNewTab.fn(unsafeWindow.location.href);
- }
- },
- openInNewTab: {
- label: 'Open link in new tab',
- category: 'Tab',
- fn: function (link) {
- GM_openInTab(link, false);
- },
- onLink: true
- },
- openInNewBackgroundTab: {
- label: 'Open link in new background tab',
- category: 'Tab',
- fn: function (link) {
- GM_openInTab(link, true);
- },
- onLink: true
- },
- scrollUp: {
- label: 'Scroll up',
- category: 'Scroll',
- fn: function () {
- $('html, body').animate({
- scrollTop: '-=600'
- }, 'slow');
- }
- },
- scrollDown: {
- label: 'Scroll down',
- category: 'Scroll',
- fn: function () {
- $('html, body').animate({
- scrollTop: '+=600'
- }, 'slow');
- }
- },
- scrollToTop: {
- label: 'Scroll to top',
- category: 'Scroll',
- fn: function () {
- $('html, body').animate({
- scrollTop: 0
- }, 'slow');
- }
- },
- scrollToBottom: {
- label: 'Scroll to bottom',
- category: 'Scroll',
- fn: function () {
- $('html, body').animate({
- scrollTop: $(document).height()
- }, 'slow');
- }
- },
- scrollUpOnElement: {
- label: 'Scroll up on element',
- category: 'Scroll',
- fn: function () {
- var scrollChange = (values.$vScrollBarUp.is('html, body') ? $(window).height() : values.$vScrollBarUp.innerHeight()) * 5 / 7;
- values.$vScrollBarUp.animate({
- scrollTop: '-=' + scrollChange
- }, 'slow');
- }
- },
- scrollDownOnElement: {
- label: 'Scroll down on element',
- category: 'Scroll',
- fn: function () {
- var scrollChange = (values.$vScrollBarDown.is('html, body') ? $(window).height() : values.$vScrollBarDown.innerHeight()) * 5 / 7;
- values.$vScrollBarDown.animate({
- scrollTop: '+=' + scrollChange
- }, 'slow');
- }
- },
- back: {
- label: 'Back',
- category: 'Navigation',
- fn: function () {
- unsafeWindow.history.back();
- }
- },
- forward: {
- label: 'Forward',
- category: 'Navigation',
- fn: function () {
- unsafeWindow.history.forward();
- }
- },
- reload: {
- label: 'Reload',
- category: 'Load',
- fn: function () {
- unsafeWindow.location.reload();
- }
- },
- reloadWithoutCache: {
- label: 'Reload without cache',
- category: 'Load',
- fn: function () {
- unsafeWindow.location.reload(true);
- }
- },
- // settingsMGLO: {
- // label: 'Settings Mouse Gestures like Opera',
- // category: 'Other',
- // fn: function () {
- // showDialogSetting();
- // }
- // },
- };
- var defaultGestures = {
- u: {
- gesture: 'scrollUpOnElement',
- },
- d: {
- gesture: 'scrollDownOnElement',
- },
- // u: {
- // gesture: 'scrollUp',
- // },
- // d: {
- // gesture: 'scrollDown',
- // },
- l: {
- gesture: 'back',
- },
- r: {
- gesture: 'forward',
- },
- ud: {
- gesture: 'reload',
- },
- ur: {
- gesture: 'newTab',
- },
- du: {
- gesture: 'duplicateTab',
- },
- dl: {
- gesture: 'openInNewTab',
- },
- dr: {
- gesture: 'closeTab',
- },
- // lu: {
- // gesture: 'scrollUpOnElement',
- // },
- // ld: {
- // gesture: 'scrollDownOnElement',
- // },
- ru: {
- gesture: 'scrollToTop',
- },
- rd: {
- gesture: 'scrollToBottom',
- },
- udu: {
- gesture: 'reloadWithoutCache',
- },
- dld: {
- gesture: 'openInNewBackgroundTab',
- },
- // dudu: {
- // gesture: 'settingsMGLO',
- // }
- };
- function getIcons8(style, id, size, color) {
- return 'https://png.icons8.com/' + style + '/' + size + '/' + color + '/' + id + '.png';
- }
- // function setGestures() {
- // GM_setValue('gestures', gestures);
- // }
- // function getGestures() {
- // return GM_getValue('gestures');
- // }
- // function loadGestures() {
- // var valueGestures = getGestures();
- // if (valueGestures) {
- // gestures = valueGestures;
- // } else {
- // resetGestures();
- // }
- // }
- // function resetGestures() {
- // gestures = defaultGestures;
- // setGestures();
- // }
- // loadGestures();
- gestures = defaultGestures;
- var $mouseGestures = $('<div/>', {
- class: 'mglo hide'
- }).appendTo(document.body);
- var widthMouseGestures = $mouseGestures.width();
- var heightMouseGestures = $mouseGestures.height();
- var halfWidthMouseGestures = widthMouseGestures / 2;
- var halfHeightMouseGestures = heightMouseGestures / 2;
- var $up = $('<div/>', {
- class: 'mglo-up'
- }).appendTo($mouseGestures);
- var $upIcon = $('<img/>', {
- class: 'mglo-icon',
- src: icon.up
- }).appendTo($up);
- var $upLabel = $('<div/>', {
- class: 'mglo-label'
- }).appendTo($up);
- var $down = $('<div/>', {
- class: 'mglo-down'
- }).appendTo($mouseGestures);
- var $downIcon = $('<img/>', {
- class: 'mglo-icon',
- src: icon.down
- }).appendTo($down);
- var $downLabel = $('<div/>', {
- class: 'mglo-label'
- }).appendTo($down);
- var $left = $('<div/>', {
- class: 'mglo-left'
- }).appendTo($mouseGestures);
- var $leftIcon = $('<img/>', {
- class: 'mglo-icon',
- src: icon.left
- }).appendTo($left);
- var $leftLabel = $('<div/>', {
- class: 'mglo-label'
- }).appendTo($left);
- var $right = $('<div/>', {
- class: 'mglo-right'
- }).appendTo($mouseGestures);
- var $rightIcon = $('<img/>', {
- class: 'mglo-icon',
- src: icon.right
- }).appendTo($right);
- var $rightLabel = $('<div/>', {
- class: 'mglo-label'
- }).appendTo($right);
- var $middle = $('<div/>', {
- class: 'mglo-middle'
- }).appendTo($mouseGestures);
- var $middleIcon = $('<img/>', {
- class: 'mglo-icon',
- src: icon.mouseRightClick
- }).appendTo($middle);
- var $middleLabel = $('<div/>', {
- class: 'mglo-label'
- }).appendTo($middle);
- var ListIcon = (function () {
- function ListIcon(label, attribute) {
- this.gesture = '';
- var $control = $('<div/>', {
- class: 'mglo-list-icon-group'
- });
- if (typeof label === 'undefined') {
- $control.addClass('mglo-form-no-label');
- } else {
- var $label = $('<label/>');
- $label.text(label);
- $label.appendTo($control);
- }
- var $listIcon = $('<div/>', attribute);
- $listIcon.addClass('mglo-list-icon');
- $listIcon.appendTo($control);
- this.$listIcon = $listIcon;
- this.$element = $control;
- this.setGesture(attribute.gesture);
- }
- ListIcon.prototype = {
- setGesture: function (gesture) {
- var _this = this;
- this.gesture = gesture;
- this.$listIcon.empty();
- this.$listIcon.data('data-gesture', gesture);
- gesture.split('').forEach(function (c) {
- switch (c) {
- case gestureStrings.up:
- $upIcon.clone().appendTo(_this.$listIcon);
- break;
- case gestureStrings.down:
- $downIcon.clone().appendTo(_this.$listIcon);
- break;
- case gestureStrings.left:
- $leftIcon.clone().appendTo(_this.$listIcon);
- break;
- case gestureStrings.right:
- $rightIcon.clone().appendTo(_this.$listIcon);
- break;
- }
- });
- }
- };
- return ListIcon;
- })();
- var Form = {
- Control: (function () {
- function Control(type, label, attribute, event) {
- if (typeof attribute !== 'object') {
- attribute = {};
- }
- if (typeof attribute.id === 'undefined') {
- attribute.id = 'mglo-' + type + '-' + new Date().getTime();
- }
- var $control = $('<div/>', {
- class: 'mglo-form-group'
- });
- if (typeof label === 'undefined') {
- $control.addClass('mglo-form-no-label');
- } else {
- var $label = $('<label/>', {
- for: attribute.id
- });
- $label.text(label);
- $label.appendTo($control);
- }
- var $input = $('<input/>', attribute);
- $input.attr({
- type: type,
- class: 'mglo-form-control'
- });
- $input.appendTo($control);
- this.label = label;
- this.id = attribute.id;
- this.$input = $input;
- this.$element = $control;
- if (type === 'number') {
- $input.on('input.mglo', function (e) {
- e.target.value = parseInt(e.target.value) ? e.target.value.replace(/^0+/, '') : (this.min || 0);
- event(e);
- });
- } else {
- $input.on('input.mglo', event);
- }
- }
- Control.prototype = {
- oninput: function (event) {
- this.$input.on('input.mglo', function (e) {
- e.target.value = parseInt(e.target.value) ? e.target.value.replace(/^0+/, '') : (this.min || 0);
- event(e);
- });
- }
- };
- return Control;
- }()),
- Select: (function () {
- function Select(label, attribute, event) {
- var items = [],
- itemElements = [],
- value;
- if (typeof attribute !== 'object') {
- attribute = {};
- }
- if (typeof attribute.id === 'undefined') {
- attribute.id = 'mglo-select-' + new Date().getTime();
- }
- if (typeof attribute.items !== 'undefined') {
- items = $.extend(true, [], attribute.items);
- delete attribute.items;
- }
- if (typeof attribute.value !== 'undefined') {
- value = attribute.value;
- }
- var $control = $('<div/>', {
- class: 'mglo-form-group',
- });
- if (typeof label === 'undefined') {
- $control.addClass('mglo-form-no-label');
- } else {
- var $label = $('<label/>', {
- for: attribute.id
- });
- $label.text(label);
- $label.appendTo($control);
- }
- var $select = $('<select/>', attribute);
- $select.attr('class', 'mglo-form-control');
- $select.appendTo($control);
- if (!Array.isArray(items)) {
- items = [items];
- }
- for (var i = 0; i < items.length; i++) {
- var text = items[i].label;
- var $item = $('<option/>', items[i]);
- $item.text(text);
- if (value === items[i].value) {
- $item.prop('selected', true);
- }
- if (typeof items[i].optgroup !== 'undefined') {
- if ($select.find('optgroup[label="' + items[i].optgroup + '"]').size()) {
- $select.find('optgroup[label="' + items[i].optgroup + '"]').append($item);
- } else {
- var $optgroup = $('<optgroup/>', {
- label: items[i].optgroup
- });
- $optgroup.append($item);
- $optgroup.appendTo($select);
- }
- } else {
- $item.appendTo($select);
- }
- itemElements.push($item);
- }
- this.label = label;
- this.id = attribute.id;
- this.$select = $select;
- this.$element = $control;
- this.items = itemElements;
- $select.on('change.mglo', event);
- }
- Select.prototype = {
- onchange: function (event) {
- this.$select.on('change.mglo', event);
- }
- };
- return Select;
- }()),
- CheckInput: (function () {
- function CheckInput(type, label, attribute, event) {
- if (typeof attribute !== 'object') {
- attribute = {};
- }
- if (typeof attribute.id === 'undefined') {
- attribute.id = 'mglo-' + type + '-' + new Date().getTime();
- }
- var $checkInput = $('<div/>', {
- class: 'mglo-form-check',
- });
- if (typeof label === 'undefined') {
- $checkInput.addClass('mglo-form-no-label');
- }
- var $label = $('<label/>', {
- class: 'mglo-form-check-label'
- }).appendTo($checkInput);
- var $input = $('<input/>', attribute);
- $input.attr({
- type: type,
- class: 'mglo-form-check-input'
- });
- $input.appendTo($label);
- var $text = $('<span/>').text(label);
- $text.appendTo($label);
- this.label = label;
- this.id = attribute.id;
- this.$input = $input;
- this.$element = $checkInput;
- $input.on('change.mglo', event);
- }
- CheckInput.prototype = {
- onchange: function (event) {
- this.$input.on('change.mglo', event);
- },
- };
- CheckInput.createGroup = function (name, checkInputs) {
- var $checkInputGroup = $('<div/>', {
- class: 'mglo-form-group',
- id: name
- });
- for (var i = 0; i < checkInputs.length; i++) {
- var checkInput = checkInputs[i];
- checkInput.$input.name = name;
- $checkInputGroup.append(checkInput.$element);
- }
- return $checkInputGroup;
- };
- return CheckInput;
- }()),
- InputMG: (function () {
- function InputMG(label, attribute) {
- if (typeof attribute !== 'object') {
- attribute = {};
- }
- if (typeof attribute.id === 'undefined') {
- attribute.id = 'mglo-input-mg-' + new Date().getTime();
- }
- var $control = $('<div/>', {
- class: 'mglo-form-group mglo-form-group-record'
- });
- if (typeof label === 'undefined') {
- $control.addClass('mglo-form-no-label');
- } else {
- var $label = $('<label/>', {
- for: attribute.id
- });
- $label.text(label);
- $label.appendTo($control);
- }
- var $input = $('<input/>', attribute);
- $input.attr({
- type: 'text',
- class: 'mglo-form-control'
- });
- $input.appendTo($control);
- var $recordButton = $('<button/>', {
- class: 'mglo-btn mglo-btn-record'
- });
- $recordButton.on('click.mglo', function (e) {
- e.preventDefault();
- $currentInputMG = $(this).parent().find('input.mglo-form-control');
- isRecord = true;
- });
- $recordButton.appendTo($control);
- this.label = label;
- this.id = attribute.id;
- this.$input = $input;
- this.$element = $control;
- this.$recordButton = $recordButton;
- $input.on('keypress.mglo', function (e) {
- var key = e.keyCode;
- key = String.fromCharCode(key);
- var regex = /(\b(?:([UDLRudlr])(?!\2{1}))+\b)/g;
- if (!regex.test(key)) {
- e.returnValue = false;
- if (e.preventDefault) e.preventDefault();
- }
- }).on('input.mglo', function (e) {
- $(this).val(function (i, val) {
- return val.toLowerCase();
- });
- });
- }
- return InputMG;
- }()),
- };
- var recordListIcon = new ListIcon(undefined, {
- gesture: gesture
- });
- function mouseMoveMG(e) {
- if (startY - e.clientY > 10 || e.clientY - startY > 10 || startX - e.clientX > 10 || e.clientX - startX > 10) {
- preventContextMenu = false;
- if (mouseDownTriggered) {
- mouseDownTriggered = false;
- } else {
- clearTimeout(timeoutDelay);
- showMG(e);
- checkMG(e);
- }
- }
- }
- function mouseDownMG(e, data) {
- e = data || e;
- if (e.which === 3) {
- getValues(e);
- preventContextMenu = false;
- mouseDownTriggered = true;
- startX = e.clientX;
- startY = e.clientY;
- gesture = '';
- loadMG();
- timeoutDelay = setTimeout(function () {
- showMG(e);
- }, 500);
- $(document).on('mousemove.mglo', mouseMoveMG);
- }
- }
- function mouseUpMG(e) {
- clearTimeout(timeoutDelay);
- $(document).off('mousemove.mglo');
- if (isRecord === false && checkTypeItemMG('link', gesture, true)) {
- switch (gesture.slice(-1)) {
- case gestureStrings.up:
- $down.addClass('hide');
- $left.addClass('hide');
- $right.addClass('hide');
- break;
- case gestureStrings.down:
- $up.addClass('hide');
- $left.addClass('hide');
- $right.addClass('hide');
- break;
- case gestureStrings.left:
- $up.addClass('hide');
- $down.addClass('hide');
- $right.addClass('hide');
- break;
- case gestureStrings.right:
- $up.addClass('hide');
- $down.addClass('hide');
- $left.addClass('hide');
- break;
- }
- $mouseGestures.delay(300).addClass('hide');
- } else {
- $mouseGestures.addClass('hide');
- if (isRecord === true && gesture) {
- isRecord = false;
- }
- }
- gesture = '';
- }
- function contextMenuMG(e) {
- if (preventContextMenu) e.preventDefault();
- }
- $(document).on('mousedown.mglo', mouseDownMG)
- .on('mouseup.mglo', mouseUpMG)
- .on('contextmenu.mglo', contextMenuMG);
- function showMG(e) {
- preventContextMenu = true;
- var mouseX = e.pageX - $(window).scrollLeft();
- var mouseY = e.pageY - $(window).scrollTop();
- $mouseGestures.css({
- left: mouseX - halfWidthMouseGestures,
- top: mouseY - halfHeightMouseGestures
- }).stop(true, true);
- $mouseGestures.removeClass('hide');
- }
- function checkMG(e) {
- checkMove(startY - e.clientY, gestureStrings.up, e);
- checkMove(e.clientY - startY, gestureStrings.down, e);
- checkMove(startX - e.clientX, gestureStrings.left, e);
- checkMove(e.clientX - startX, gestureStrings.right, e);
- if (isRecord === true) {
- recordListIcon.setGesture(gesture);
- }
- }
- function checkMove(p, t, e) {
- if (p >= SENSITIVITY) {
- startX = e.clientX;
- startY = e.clientY;
- if (gesture.slice(-1) != t) {
- gesture += t;
- loadMG();
- }
- }
- }
- function loadMG() {
- if (checkTypeItemMG('link', gesture + gestureStrings.up)) {
- $up.removeClass('active hide');
- $upLabel.text(getGesture(gesture + gestureStrings.up, 'label'));
- } else {
- $up.addClass('hide');
- }
- if (checkTypeItemMG('link', gesture + gestureStrings.down)) {
- $down.removeClass('active hide');
- $downLabel.text(getGesture(gesture + gestureStrings.down, 'label'));
- } else {
- $down.addClass('hide');
- }
- if (checkTypeItemMG('link', gesture + gestureStrings.left)) {
- $left.removeClass('active hide');
- $leftLabel.text(getGesture(gesture + gestureStrings.left, 'label'));
- } else {
- $left.addClass('hide');
- }
- if (checkTypeItemMG('link', gesture + gestureStrings.right)) {
- $right.removeClass('active hide');
- $rightLabel.text(getGesture(gesture + gestureStrings.right, 'label'));
- } else {
- $right.addClass('hide');
- }
- if (checkTypeItemMG('link', gesture)) {
- switch (gesture.slice(-1)) {
- case gestureStrings.up:
- $up.removeClass('hide').addClass('active');
- break;
- case gestureStrings.down:
- $down.removeClass('hide').addClass('active');
- break;
- case gestureStrings.left:
- $left.removeClass('hide').addClass('active');
- break;
- case gestureStrings.right:
- $right.removeClass('hide').addClass('active');
- break;
- }
- }
- }
- function recordMG(isTurn) {
- if (isTurn === true) {
- if (dialogSetting && dialogSetting.isShow) {
- $recordBackdrop.insertAfter(dialogSetting.$dialog);
- } else {
- $recordBackdrop.appendTo(document.body);
- }
- recordListIcon.$element.appendTo($recordBackdrop);
- } else if (isTurn === false && gesture) {
- $currentInputMG.val(gesture);
- recordListIcon.setGesture('');
- $recordBackdrop.remove();
- }
- }
- function getValues(e) {
- values = {};
- values.$target = $(e.target);
- if (values.$target.closest('a').length) {
- values.link = values.$target.closest('a').prop('href');
- }
- values.$vScrollBar = values.$target.vScrollBarParent();
- values.$vScrollBarUp = values.$target.vScrollBarParent('up');
- values.$vScrollBarDown = values.$target.vScrollBarParent('down');
- }
- function getGesture(gesture, prototype) {
- if (typeof prototype !== 'undefined') {
- if (gestures[gesture].gesture !== 'custom') {
- return defaultActions[gestures[gesture].gesture][prototype];
- } else {
- return gestures[gesture].custom[prototype];
- }
- } else {
- if (gestures[gesture].gesture !== 'custom') {
- return defaultActions[gestures[gesture].gesture];
- } else {
- return gestures[gesture].custom;
- }
- }
- }
- function checkTypeItemMG(type, gesture, runFunction) {
- if (typeof runFunction === 'undefined') {
- runFunction = false;
- }
- if (gestures[gesture]) {
- if (getGesture(gesture, 'on' + type.toCapitalize().replace(' ', ''))) {
- if (values[type]) {
- if (runFunction === true) {
- getGesture(gesture, 'fn')(values[type]);
- }
- return true;
- } else {
- return false;
- }
- } else {
- if (runFunction === true) {
- getGesture(gesture, 'fn')();
- }
- return true;
- }
- } else {
- return false;
- }
- }
- String.prototype.toCapitalize = function () {
- return this.replace(/(\b)([a-zA-Z])/g, function (m) {
- return m.toUpperCase();
- });
- };
- var Dialog = (function () {
- function Dialog(title, $content, $buttonFooters, isForm, id) {
- if (typeof id === 'undefined') {
- id = 'dialog-' + new Date().getTime();
- }
- if (typeof isForm === 'undefined') {
- isForm = false;
- }
- this.title = title;
- this.$content = $content.clone(true, true);
- this.id = id;
- this.isShow = false;
- this.status = 'create';
- var $dialog = $('<div/>', {
- class: 'mglo-dialog',
- id: this.id
- });
- this.$dialog = $dialog;
- $dialog.get(0).onclick = this.close.bind(this);
- var $dialogContent = $('<div/>', {
- class: 'mglo-dialog-content'
- });
- $dialogContent.appendTo($dialog);
- var $dialogForm = $('<form/>', {
- class: 'mglo-dialog-form'
- });
- if (isForm === true) {
- $dialogForm.appendTo($dialogContent);
- }
- var $dialogHeader = $('<div/>', {
- class: 'mglo-dialog-header'
- });
- $dialogHeader.append(this.title);
- if (isForm === true) {
- $dialogHeader.appendTo($dialogForm);
- } else {
- $dialogHeader.appendTo($dialogContent);
- }
- var $buttonClose = $('<button/>', {
- class: 'mglo-close'
- });
- $buttonClose.html('\u00d7');
- $buttonClose.get(0).onclick = this.close.bind(this);
- $buttonClose.appendTo($dialogHeader);
- var $dialogBody = $('<div/>', {
- class: 'mglo-dialog-body'
- });
- $dialogBody.append(this.$content);
- if (isForm === true) {
- $dialogBody.appendTo($dialogForm);
- } else {
- $dialogBody.appendTo($dialogContent);
- }
- var $dialogFooter = $('<div/>', {
- class: 'mglo-dialog-footer'
- });
- if (isForm === true) {
- $dialogFooter.appendTo($dialogForm);
- } else {
- $dialogFooter.appendTo($dialogContent);
- }
- if (typeof $buttonFooters !== 'undefined') {
- if ($buttonFooters instanceof jQuery) {
- $buttonFooters.each(function () {
- $(this).clone(true, true).appendTo($dialogFooter);
- });
- } else if ($buttonFooters instanceof Array) {
- $.each($buttonFooters, function (index, $button) {
- $button.clone(true, true).appendTo($dialogFooter);
- });
- } else if ($buttonFooters instanceof Object) {
- $.each($buttonFooters, function (key, $button) {
- $button.clone(true, true).appendTo($dialogFooter);
- });
- }
- }
- $dialogContent.click(function (e) {
- e.stopPropagation();
- });
- }
- Dialog.prototype = {
- show: function () {
- if ($mouseGestures.size()) {
- this.$dialog.insertBefore($mouseGestures);
- } else {
- this.$dialog.appendTo(document.body);
- }
- this.isShow = true;
- this.status = 'show';
- },
- close: function () {
- this.$dialog.remove();
- this.isShow = false;
- this.status = 'close';
- }
- };
- return Dialog;
- })();
- var ItemMG = (function () {
- function ItemMG(gesture, action, options) {
- var _this = this;
- this.gesture = gesture;
- this.action = action;
- var $itemMG = $('<div/>', {
- class: 'mglo-item'
- });
- var listIcon = new ListIcon('Gesture', {
- gesture: gesture
- });
- listIcon.$element.appendTo($itemMG);
- var itemActions = [];
- $.each(defaultActions, function (nameGesture, value) {
- if (options.onLink !== true && value.onLink !== true || options.onLink === true && value.onLink === true) {
- var item = {};
- item.value = nameGesture;
- item.label = value.label;
- item.optgroup = value.category;
- $.each(gestures, function (gesture, value) {
- if (value.gesture === nameGesture && nameGesture !== action) {
- item.disabled = true;
- }
- });
- itemActions.push(item);
- }
- });
- var inputMG = new Form.InputMG(undefined, {
- value: gesture
- });
- inputMG.$element.appendTo($itemMG);
- var selectAction = new Form.Select('Action', {
- required: true,
- items: itemActions,
- value: action
- }, function (e) {
- return _this.setAction(e.target.value);
- });
- selectAction.$element.appendTo($itemMG);
- this.listIcon = listIcon;
- this.inputMG = inputMG;
- this.selectAction = selectAction;
- this.$element = $itemMG;
- }
- ItemMG.prototype = {
- setGesture: function (gesture) {
- this.gesture = gesture;
- this.listIcon.setGesture(gesture);
- },
- setAction: function (action) {
- this.action = action;
- this.selectAction.$select.val(action);
- }
- };
- return ItemMG;
- })();
- // var Table = (function () {
- // function Table(options) {
- // var $table = $('<table/>', {
- // class: 'mglo-table'
- // });
- // var $trHeader = $('<tr/>').appendTo($table);
- // options.columns.forEach(function (column) {
- // $('<th/>').text(column.header).appendTo($trHeader);
- // });
- // options.data.forEach(function (row, index) {
- // var $trRow = $('<tr/>').appendTo($table);
- // options.columns.forEach(function (column) {
- // $.each(row, function (key, value) {
- // if (column.binding === key) {
- // var $td = $('<td/>', column).append(value).appendTo($trRow);
- // }
- // });
- // });
- // });
- // this.$element = $table;
- // }
- // return Table;
- // }());
- function showDialogSetting() {
- if (dialogSetting && dialogSetting.isShow) {
- dialogSetting.close();
- }
- dialogSetting = new Dialog('Settings', $contentSetting, $buttonFooterSettings, true);
- dialogSetting.show();
- }
- $contentSetting.append('On Page');
- $.each(gestures, function (gesture, value) {
- if (getGesture(gesture, 'onLink') !== true) {
- var itemMG = new ItemMG(gesture, value.gesture, {});
- itemMG.$element.appendTo($contentSetting);
- }
- });
- $contentSetting.append('On Link');
- $.each(gestures, function (gesture, value) {
- if (getGesture(gesture, 'onLink') === true) {
- var itemMG = new ItemMG(gesture, value.gesture, {
- onLink: true
- });
- itemMG.$element.appendTo($contentSetting);
- }
- });
- $buttonSave.on('click.mglo', function (e) {
- e.preventDefault();
- });
- // GM_registerMenuCommand('Settings', function () {
- // showDialogSetting();
- // });
- $.fn.isScrollToTop = function () {
- return this.scrollTop() === 0;
- };
- $.fn.isScrollToBottom = function () {
- return this.get(0).scrollHeight - this.scrollTop() <= this.outerHeight();
- };
- $.fn.hasVScrollBar = function (includeHidden) {
- var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
- return !(/(HTML)/.test(this.get(0).tagName)) && overflowRegex.test(this.css('overflow')) && overflowRegex.test(this.css('overflow-y')) && this.get(0).scrollHeight > this.innerHeight();
- };
- $.fn.vScrollBarParent = function (scrollUpOrDown, includeHidden) {
- if (this.hasVScrollBar() && (scrollUpOrDown !== 'up' && scrollUpOrDown !== 'down' || scrollUpOrDown === 'up' && !this.isScrollToTop() || scrollUpOrDown === 'down' && !this.isScrollToBottom())) {
- return this;
- }
- var position = this.css('position'),
- excludeStaticParent = position === 'absolute',
- vScrollBarParent = this.parents().filter(function () {
- var parent = $(this);
- if (excludeStaticParent && parent.css('position') === 'static' || scrollUpOrDown === 'up' && parent.isScrollToTop() || scrollUpOrDown === 'down' && parent.isScrollToBottom()) {
- return false;
- }
- return parent.hasVScrollBar();
- }).eq(0);
- return position === 'fixed' || !vScrollBarParent.length ? $('html, body') : vScrollBarParent;
- };
- })();