☰

Window floating container

Adds a fixed header element for use by other scripts

当前为 2017-01-23 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/18233/171235/Window%20floating%20container.js 

  1. // ==UserScript==
  2. // @name         Window floating container 
  3. // @version      2.0.0
  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.     .ijgWindowFloater-toggle:after {\
  102.       content: "";\
  103.       width: 14px;\
  104.       height: 2px;\
  105.       position: absolute;\
  106.       bottom: 0;\
  107.       margin: auto 0;\
  108.       box-shadow: inset 0 0 0 32px;\
  109.       -webkit-transform-origin: right;\
  110.       -ms-transform-origin: right;\
  111.       transform-origin: right;\
  112.       pointer-events: none;\
  113.       width: 9px;\
  114.       right: 6.5px;\
  115.       color: white;\
  116.     }\
  117.     .ijgWindowFloater-toggle:before {\
  118.       top: 2px;\
  119.       -webkit-transform: rotate(45deg);\
  120.       -ms-transform: rotate(45deg);\
  121.       transform: rotate(45deg);\
  122.     }\
  123.     .ijgWindowFloater-toggle:after {\
  124.       top: 0;\
  125.       -webkit-transform: rotate(-45deg);\
  126.       -ms-transform: rotate(-45deg);\
  127.       transform: rotate(-45deg);\
  128.     }\
  129.     .ijg-is-closed .ijgWindowFloater-toggle:before {\
  130.       top: 12px;\
  131.       right: 8px;\
  132.     }\
  133.     .ijg-is-closed .ijgWindowFloater-toggle:after {\
  134.       top: -10px;\
  135.       right: 8px;\
  136.     }')
  137.   }
  138. })()