☰

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

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

بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @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. */