☰

Window floating container

Adds a fixed header element for use by other scripts

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/18233/187970/Window%20floating%20container.js 

  1. // ==UserScript==
  2. // @name         Window floating container 
  3. // @version      2.0.1
  4. // @description  Adds a fixed header element for use by other scripts
  5. // @author       @_jnblog
  6. // @require      https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
  7. // @grant        GM_addStyle
  8. // @grant        GM_getValue
  9. // @grant        GM_setValue
  10. // ==/UserScript==
  11. /* jshint -W097 */
  12. /* global $ */
  13. /* jshint asi: true, multistr: true */
  14. 'use strict'
  15.  
  16. window.windowFloaterUtils = {
  17.   getFloater: function getFloater() {
  18.     return $('#ijgWindowFloater')
  19.   }
  20. }
  21.  
  22. ;(function _makeFloater() {
  23.   var ijgFloater
  24.   if ($('#ijgWindowFloater').length) {
  25.     return
  26.   }
  27.  
  28.   ijgFloater = $('<div id="ijgWindowFloater">')
  29.   $('.Nav-top').append(ijgFloater).css('z-index', 1001)
  30.   _addStyles()
  31.  
  32.   $('<i class="ijgWindowFloater-toggle">')
  33.     .appendTo(ijgFloater)
  34.     .on('click', function() {
  35.     $('#ijgWindowFloater').toggleClass('ijg-is-closed')
  36.     GM_setValue('ijgWindowFloater-closed', $('#ijgWindowFloater').hasClass('ijg-is-closed'))
  37.   })
  38.  
  39.   var isClosed = GM_getValue('ijgWindowFloater-closed')
  40.   if (isClosed || typeof ijgWindowFloater-closed === 'undefined') {
  41.     $('#ijgWindowFloater').addClass('ijg-is-closed')
  42.   }
  43.  
  44.   function _addStyles () {
  45.   GM_addStyle('\
  46.     #ijgWindowFloater {\
  47.       position: absolute;\
  48.       top: 100%;\
  49.       transform: translateY(-50%);\
  50.       left: 0;\
  51.       z-index: 2000;\
  52.       color: white;\
  53.       background-color: black;\
  54.       box-shadow: 0px 0px 6px 1px white;\
  55.     }\
  56.     #ijgWindowFloater a {\
  57.       color: white !important;\
  58.       padding: 5px;\
  59.       display: inline-block;\
  60.     }\
  61.     #ijgWindowFloater a:hover {\
  62.       text-decoration: underline;\
  63.     }\
  64.     .ijgWindowFloater-item {\
  65.       vertical-align: middle;\
  66.       padding-left: .6em;\
  67.       padding-right: .2em;\
  68.       white-space: nowrap;\
  69.     }\
  70.     .ijg-is-closed .ijgWindowFloater-item {\
  71.       display: none;\
  72.     }\
  73.     .ijgWindowFloater-toggle {\
  74.       cursor: pointer;\
  75.       background-color: transparent;\
  76.       box-shadow: inset 0 0 0 32px;\
  77.       -webkit-transform-origin: right;\
  78.       -ms-transform-origin: right;\
  79.       transform-origin: right;\
  80.       transform: rotate(180deg);\
  81.       vertical-align: middle;\
  82.       display: inline-block;\
  83.       position: relative;\
  84.       font-style: normal;\
  85.       color: transparent;\
  86.       text-align: left;\
  87.       text-indent: -9999px;\
  88.       direction: ltr;\
  89.       box-sizing: border-box;\
  90.       border: 2px solid white;\
  91.       transition: all .2s;\
  92.       border-radius: 50%;\
  93.       width: 24px;\
  94.       height: 24px;\
  95.       margin: 2px 5px 3px 2px;\
  96.       padding: 0;\
  97.       top: 0;\
  98.       left: -22px;\
  99.     }\
  100.     .ijgWindowFloater-toggle:before {\
  101.       content: "";\
  102.       width: 10px;\
  103.       height: 10px;\
  104.       position: absolute;\
  105.       top: 5px;\
  106.       right: 4px;\
  107.       margin: auto 0;\
  108.       pointer-events: none;\
  109.       border-bottom: 3px solid white;\
  110.       border-left: 3px solid white;\
  111.     }\
  112.     .ijgWindowFloater-toggle:before {\
  113.       transform: rotate(45deg);\
  114.     }\
  115.     .ijg-is-closed .ijgWindowFloater-toggle:before {\
  116.       transform: rotate(-135deg);\
  117.       right: 7px;\
  118.     }')
  119.   }
  120. })()