☰

YouTube - Button Container (Align Tweak) (@require)

Creates a button container, under the video, onto which buttons can be added

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greatest.deepsurf.us/scripts/31401/205792/YouTube%20-%20Button%20Container%20%28Align%20Tweak%29%20%28%40require%29.js 

  1. // ==UserScript==
  2. // @name          YouTube - Button Container (Align Tweak) (@require)
  3. // @namespace     http://userscripts.org/users/140397
  4. // @description   Creates a button container, under the video, onto which buttons can be added
  5. // @include       http://*.youtube.com/*
  6. // @include       http://youtube.com/*
  7. // @include       https://*.youtube.com/*
  8. // @include       https://youtube.com/*
  9. // @copyright     JoeSimmons, D. F. Ickus
  10. // @version       1.0
  11. // @license       LGPL version 3 or any later version; http://www.gnu.org/copyleft/lgpl.html
  12. // @grant         GM_addStyle
  13. // ==/UserScript==
  14.  
  15. /* CHANGELOG
  16.  
  17.     1.0 (7/12/2017)
  18.         - original work     https://greatest.deepsurf.us/scripts/2104-youtube-button-container-require/code/YouTube%20-%20Button%20Container%20(@require).js
  19.             - author        JoeSimmons
  20.             - namespace     http://userscripts.org/users/23652
  21.             - license       LGPL version 3 or any later version; http://www.gnu.org/copyleft/lgpl.html
  22.         - removed "text-align: center" style from "#watch7-headline h1"
  23.                         
  24. */
  25.  
  26. var addButtonToContainer = (function () {
  27.     'use strict';
  28.  
  29.     var rYoutubeWhitelistedUrls = /^https?:\/\/([^\.]+\.)?youtube\.com\/(watch|user\/|channel\/)/;
  30.  
  31.     var TEST_MODE = true; // if true, will replace the current style with this one
  32.  
  33.     // helper functions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  34.     function addStyle(contents) {
  35.         var head = document.head || query('html > head'),
  36.             style = document.createElement('style');
  37.  
  38.         style.id = 'underMovieDivStyle';
  39.         style.type = 'text/css';
  40.         style.appendChild( document.createTextNode(contents) );
  41.  
  42.         if (head) {
  43.             head.appendChild(style);
  44.         }
  45.     }
  46.     function id(name) {
  47.         return document.getElementById(name);
  48.     }
  49.     function query(name) {
  50.         return document.querySelector(name);
  51.     }
  52.     // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  53.  
  54.     function waitForHeadReady() {
  55.         if ( document.head || query('html > head') ) {
  56.             window.setTimeout(handleStyleCreation, TEST_MODE === true ? 3000 : 0);
  57.         } else {
  58.             window.setTimeout(waitForHeadReady, 200);
  59.         }
  60.     }
  61.  
  62.     function handleStyleCreation() {
  63.         var umdv = id('underMovieDivStyle'),
  64.             obs = new MutationObserver(function (mutations) {
  65.                 mutations.forEach(function (mutation) {
  66.                     if (mutation.target.id === 'underMovieDivStyle') {
  67.                         handleStyleCreation();
  68.                     }
  69.                 });
  70.             });
  71.  
  72.         if (TEST_MODE === true || !umdv) {
  73.             if (umdv) {
  74.                 umdv.parentNode.removeChild(umdv);
  75.             }
  76.  
  77.             addStyle('' +
  78.                 '#under-movie-div { ' +
  79.                     'background: transparent !important; ' +
  80.                     'display: block; ' +
  81.                     'padding-top: 4px; ' +
  82.                     'padding-bottom: 8px; ' +
  83.                     'text-align: left; ' +
  84.                     'z-index: 999999; ' +
  85.                 '}\n\n' +
  86.                 '.under-movie-div-button { ' +
  87.                     'background-image: linear-gradient(to top, #F6F6F6 0px, #FCFCFC 100%) !important; ' +
  88.                     'border: 1px solid #CCCCCC; ' +
  89.                     'border-radius: 2px; ' +
  90.                     'color: #666666 !important; ' +
  91.                     'font-size: 12px !important; ' +
  92.                     'font-family: arial, sans-serif !important; ' +
  93.                     'font-weight: 400 !important; ' +
  94.                     'height: auto !important; ' +
  95.                     'line-height: 20px !important; ' +
  96.                     'margin-right: 6px; ' +
  97.                     'padding: 2px 10px !important; ' +
  98.                 '}\n\n' +
  99.                 // - - - - - - - - - - - - - - - - - - -
  100.                 '#watch7-headline { ' +
  101.                     'padding: 4px 0 !important; ' +
  102.                 '}\n\n' +
  103.                 '#watch7-headline h1 { ' +
  104.                     'width: 100%; ' +
  105.                 '}\n\n' +
  106.                 '#upsell-video { ' +
  107.                     'overflow: visible !important; ' + // allow the button container to show on non-video pages
  108.                 '}' +
  109.             '');
  110.  
  111.             // observe the style for changes if test mode enabled
  112.             if (TEST_MODE === true) {
  113.                 obs.observe(id('underMovieDivStyle'), {
  114.                     childList : true,
  115.                     attributes : true,
  116.                     characterData : true
  117.                 });
  118.             }
  119.         }
  120.     }
  121.  
  122.     function handleContainerCreation() {
  123.         var holder = query('#watch7-headline, #gh-overviewtab div.c4-spotlight-module-component'),
  124.             container = id('under-movie-div');
  125.  
  126.         if (container == null) {
  127.             container = document.createElement('div');
  128.             container.id = 'under-movie-div';
  129.  
  130.             if (holder) {
  131.                 holder.appendChild(container);
  132.             }
  133.         }
  134.  
  135.         return container;
  136.     }
  137.  
  138.     function add(text, onclick, ID) {
  139.         var upsellVideo = id('upsell-video'),
  140.             container = handleContainerCreation(),
  141.             button = document.createElement('button'),
  142.             span = document.createElement('span');
  143.             ID = ID || text.replace(/[^a-zA-Z0-9-_]/, '');
  144.  
  145.         if ( !location.href.match(rYoutubeWhitelistedUrls) || id(ID) ) { return; }
  146.         if (typeof text !== 'string' || typeof onclick !== 'function') { return; }
  147.  
  148.         span.setAttribute('class', 'yt-uix-button-content');
  149.         span.appendChild( document.createTextNode(text) );
  150.  
  151.         button.id = ID;
  152.         button.addEventListener('click', function () {
  153.             window.setTimeout(onclick, 0);
  154.         }, false);
  155.  
  156.         button.type = 'button';
  157.         button.setAttribute('class', 'under-movie-div-button yt-uix-button yt-uix-button-text yt-uix-tooltip');
  158.         button.appendChild(span);
  159.  
  160.         return container.appendChild(button);
  161.     }
  162.  
  163.     waitForHeadReady();
  164.  
  165.     return add;
  166. }());
  167.  
  168. /* EXAMPLE BUTTON
  169.     addButtonToContainer('A Test Button', function () { alert('Test.'); }, 'test-button');
  170. */