☰

Window floating container

Adds a fixed header element for use by other scripts

Fra og med 29.11.2016. Se den nyeste version.

Dette script bør ikke installeres direkte. Det er et bibliotek, som andre scripts kan inkludere med metadirektivet // @require https://updategreasyfork.deno.dev/scripts/18233/160571/Window%20floating%20container.js 

// ==UserScript==
// @name         Window floating container 
// @version      1.1.8
// @description  Adds a fixed header element for use by other scripts
// @author       @_jnblog
// @require      https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==
/* jshint -W097 */
/* global $ */
/* jshint asi: true, multistr: true */
'use strict'


function getFloater() {
  return $('#ijgWindowFloater')
}

var ijgFloater = getFloater()

if (!$('#ijgWindowFloater').length) {
  ijgFloater = $('<div id="ijgWindowFloater">')
  $('.nav-Top').append(ijgFloater).css('z-index', 1001)
  addStyles()

  $('<i class="ijgWindowFloater-toggle">')
      .appendTo(ijgFloater)
      .on('click', function() {
    $('#ijgWindowFloater').toggleClass('ijg-is-closed')
    GM_setValue('ijgWindowFloater-closed', $('#ijgWindowFloater').hasClass('ijg-is-closed'))
  })

  var isClosed = GM_getValue('ijgWindowFloater-closed')
  if (isClosed || typeof ijgWindowFloater-closed === 'undefined') {
    $('#ijgWindowFloater').addClass('ijg-is-closed')
  }
}



function addStyles () {
  GM_addStyle('#ijgWindowFloater {\
    position: absolute;\
    top: 100%;\
    transform: translateY(-50%);\
    left: 0;\
    z-index: 2000;\
    color: white;\
    background-color: #EB6841;\
    box-shadow: 0px 0px 6px 1px white;\
  }\
  #ijgWindowFloater a {\
    color: white !important;\
    padding: 5px;\
    display: inline-block;\
  }\
  #ijgWindowFloater a:hover {\
    color: #FAF667 !important;\
  }\
  .ijgWindowFloater-item {\
    vertical-align: middle;\
    padding-left: .6em;\
    padding-right: .2em;\
    white-space: nowrap;\
  }\
  .ijg-is-closed .ijgWindowFloater-item {\
    display: none;\
  }\
  .ijgWindowFloater-toggle {\
    cursor: pointer;\
    background-color: transparent;\
    box-shadow: inset 0 0 0 32px;\
    -webkit-transform-origin: right;\
    -ms-transform-origin: right;\
    transform-origin: right;\
    transform: rotate(180deg);\
    vertical-align: middle;\
    display: inline-block;\
    position: relative;\
    font-style: normal;\
    color: transparent;\
    text-align: left;\
    text-indent: -9999px;\
    direction: ltr;\
    box-sizing: border-box;\
    border: 2px solid white;\
    transition: all .2s;\
    border-radius: 50%;\
    width: 24px;\
    height: 24px;\
    margin: 2px 5px 3px 2px;\
    padding: 0;\
    top: 0;\
    left: -22px;\
  }\
  .ijgWindowFloater-toggle:before,\
  .ijgWindowFloater-toggle:after {\
    content: "";\
    width: 14px;\
    height: 2px;\
    position: absolute;\
    bottom: 0;\
    margin: auto 0;\
    box-shadow: inset 0 0 0 32px;\
    -webkit-transform-origin: right;\
    -ms-transform-origin: right;\
    transform-origin: right;\
    pointer-events: none;\
    width: 9px;\
    right: 6.5px;\
    color: white;\
  }\
  .ijgWindowFloater-toggle:before {\
    top: 2px;\
    -webkit-transform: rotate(45deg);\
    -ms-transform: rotate(45deg);\
    transform: rotate(45deg);\
  }\
  .ijgWindowFloater-toggle:after {\
    top: 0;\
    -webkit-transform: rotate(-45deg);\
    -ms-transform: rotate(-45deg);\
    transform: rotate(-45deg);\
  }\
  .ijg-is-closed .ijgWindowFloater-toggle:before {\
    top: 12px;\
    right: 8px;\
  }\
  .ijg-is-closed .ijgWindowFloater-toggle:after {\
    top: -10px;\
    right: 8px;\
  }')
}