Skip to content

Commit

Permalink
Whonix End of Year Banner
Browse files Browse the repository at this point in the history
  • Loading branch information
Your Name committed Nov 16, 2022
1 parent e32e2a9 commit 5a8bca8
Show file tree
Hide file tree
Showing 20 changed files with 1,457 additions and 0 deletions.
174 changes: 174 additions & 0 deletions usr/share/doc/homepage/whonix-welcome-page/end-of-year-banner/CodeSelect.css
View file
@@ -0,0 +1,174 @@
/* Documentation see Dev/mediawiki */

/* 1. General */

.code-select {
display: inline-block;
background: #f6f6f6;
border-radius: 7px;
box-shadow: inset 2px 2px 6px rgba(0,0,0,0.05);
border: 1px solid #e3e3e3;
padding: 5px 13px 0 40px;
position: relative;
max-width: 100%;
vertical-align: middle;
overflow: hidden;
min-height: 31px;
}
.code-select, .code-select > *:not(.cbutton) {
cursor: copy !important;
}
.code-select:hover {
border-color: #d8d8d8;
background: #f0f0f0;
}

.code-select.js-fully-loaded {
overflow: visible;
padding-left: 38px;
}

/* 2. Tooltip */

.code-select .tooltip2 {
position: absolute;
top: -39px;
left: 6px;
background: white;
color: #337cd9;
border: 1px solid #337cd9;
padding: 6px 10px;
border-radius: 6px;
z-index: 1010;
font-weight: bold;
font-size: 14px;
display: none;
white-space: nowrap;
font-family: Courier, monospace;
}
.code-select .tooltip2::after {
content: " ";
position: absolute;
top: 100%;
left: 7px;
border-width: 7px;
border-style: solid;
border-color: #337cd9 transparent transparent transparent;
}
.code-select .tooltip2 .copied { display: none; }
.code-select .tooltip2 .hover { display: inline-block; }
.code-select.copied .tooltip2 .copied { display: inline-block; }
.code-select.copied .tooltip2 .hover { display: none; }
.code-select.copied .tooltip2 {
display: inline-block;
background: #07c007;
border-color: #01b101;
color: white;
}
.code-select.copied .tooltip2::after {
border-top-color: #00a400;
}

.code-select .tooltip2 .copied > i {
margin-right: 3px;
position: relative;
top: 1px;
}

.code-select > .cbutton:hover ~ .tooltip2 {
display: inline-block;
}

/* 3. Icon */

.code-select > .cbutton {
cursor: pointer;
display: inline-block;
}

.code-select:not([data-button-image-src]) > .cbutton {
position: absolute;
left: 8px;
top: 2px;
height: 25px;
width: 27px;
text-align: center;
padding-top: 4px;
border-radius: 5px;
color: #5594c7;
font-size: 16px;
}

.code-select > .cbutton.fa-check {
color: #00d400;
}

.code-select:not(.copied) > .cbutton:hover {
color: #0054a8;
}

/* 4. Text-Containers */

.code-select .code, .code-select {
font-family: 'Cousine', monospace, Courier;
font-size: 13px;
color: #0054a8;
line-height: 1.6em;
width: 100%;
white-space: pre;
}

.code-select.inline-style .code, .code-select.inline-style {
width: auto;
}

.code-select .code {
overflow: auto;
padding: 0 0 2px 2px;
display: block;
}

/* 5. Variant : Image Button */

.code-select[data-button-image-src] {
border: none;
background: transparent;
padding: 0;
width: auto;
box-shadow: none;
}

.code-select[data-button-image-src]:not(.js-fully-loaded) {
visibility: hidden;
}

.code-select[data-button-image-src] .cbutton {
width: inherit;
height: auto;
transition: filter .3s;
}

.code-select[data-button-image-src] .cbutton:hover {
filter: brightness( .97 );
}

.code-select[data-button-image-src] .tooltip2 {
top: -43px;
left: -1px;
}

.code-select[data-button-image-src] .tooltip2::after {
left: 9px;
}

.code-select[data-button-image-src] .code {
width: 2px;
height: 2px;
display: inline-block;
opacity: 0;
overflow: hidden;
}

/*
[[Category:MultiWiki]]
*/
101 changes: 101 additions & 0 deletions usr/share/doc/homepage/whonix-welcome-page/end-of-year-banner/CodeSelect.js
View file
@@ -0,0 +1,101 @@
(function () {
/* For documentation see Dev/mediawiki
Activates all .code-select fields on the site
By clicking the icon the code is copied to clipboard and tooltip is changed
*/

// Global

var innerContent = $( ""
+ '<i class="far fa-clone fa-rotate-90 cbutton">'
+ '</i>'
+ '<span class="tooltip2">'
+ '<span class="hover">Click = Copy</span>'
+ '<span class="copied">'
+ '<i class="fa fa-check-square-o"></i>'
+ 'Copied to clipboard!'
+ '</span>'
+ '</span>'
+ '<span class="code"></span>'
);
var cbuttonIcons = { normal: 'far fa-clone fa-rotate-90', copied: 'fas fa-check' };

// Private

function markSelection( jqDom ) {
let selection = window.getSelection();
selection.removeAllRanges();

let range = document.createRange();
range.selectNodeContents( jqDom[0] );
selection.addRange(range);
}

// jQuery Extension

$.fn.codeSelect = function( action ) {

// Only allow 'init' at the moment (extendable later)
if( action != 'init' ) return;

$(this).each( function() {
// Prevent double initialization
if( $(this).hasClass('js-fully-loaded') ) return;

// Setup

let codeSelect = $(this);
let htmlMode = codeSelect.hasClass('insert-mode-html');
let content = codeSelect[ htmlMode ? 'html' : 'text' ]();
codeSelect
.empty()
.append( innerContent.clone() )
.find('.code')[ htmlMode ? 'html' : 'text' ]( content );

let imageButton = false;
if( codeSelect.attr('data-button-image-src') ) {
$('<img class="cbutton" src="' + codeSelect.attr('data-button-image-src') + '" />').insertAfter( codeSelect.find('.cbutton') );
codeSelect.find('i.cbutton').remove();
imageButton = true;
}

let cbutton = codeSelect.find('.cbutton');
let tooltip = codeSelect.find('.tooltip2');

// Events

cbutton.on('click', function() {
// copying
markSelection( codeSelect.find('.code') );
document.execCommand("copy");

// feedback and closing
codeSelect.addClass('copied');
if( ! imageButton ) cbutton.removeClass( cbuttonIcons.normal ).addClass( cbuttonIcons.copied );
setTimeout(f1, 3000);
function f1() { tooltip.fadeOut( 600, f2 ); }
function f2() {
codeSelect.removeClass('copied');
if( ! imageButton ) cbutton.removeClass( cbuttonIcons.copied ).addClass( cbuttonIcons.normal );
setTimeout( f3, 200 );
}
function f3() { tooltip.css( 'display', '' ); }
});

codeSelect.find('.code').on('click', function() {
markSelection( $(this).parent().find('.code') );
});

codeSelect.addClass('js-fully-loaded');
});
};

// Enrich selection of standard elements

$('.code-select').codeSelect('init');

})();

/*
[[Category:MultiWiki]]
*/
62 changes: 62 additions & 0 deletions usr/share/doc/homepage/whonix-welcome-page/end-of-year-banner/MiniModal.css
View file
@@ -0,0 +1,62 @@
.mini-modal {
width: 100%;
height: 100vh;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}

.mini-modal:not(.active) {
display: none;
}

.mini-modal .underlay {
background-color: rgba(0,0,0,.5);
width: 100%;
height:100%;
position: absolute;
cursor: pointer;
opacity: 1;
transition: opacity .5s;
}

.mini-modal .underlay:hover {
opacity: .6;
}

.mini-modal .underlay + .mm-close {
position: absolute;
right: 27px;
top: 16px;
font-size: 73px;
color: white;
text-shadow: 1px 2px 3px rgba(0,0,0,.4);
transition: color .3s;
}

.mini-modal .underlay:hover + .mm-close {
color: #ff89a5;
}

.mini-modal > .content {
position: absolute;
width: 100%;
max-width: 650px;
margin: 100px 0 30px;
left: calc( 50% - 325px );
max-height: calc( 100% - 120px );
overflow: auto;
}

@media (max-width: 680px ) {
.mini-modal > .content {
width: calc( 100% - 30px );
left: 0;
margin: 100px 15px 30px;
}
}

/*
[[Category:MultiWiki]]
*/
55 changes: 55 additions & 0 deletions usr/share/doc/homepage/whonix-welcome-page/end-of-year-banner/MiniModal.js
View file
@@ -0,0 +1,55 @@
(function() {

// Functions

function init( $this ) {
$this.each( function() {
if( ! $this.hasClass('mini-modal') || ! $this.attr('id') || $this.hasClass('init-complete') ) {
return;
} else {
$this.addClass('init-complete');
}

let content = $this.children();

$this.empty().append(''
+ '<div class="underlay"></div>'
+ '<i class="fas fa-times mm-close"></i>'
+ '<div class="content"></div>'
);

$this.children('.content').append( content );

// Events

$this.children('.underlay, .mm-close').on( 'click', function() {
$this.miniModal('hide');
});
});
}

// Setup

$.fn.miniModal = function(command) {
switch( command ) {
case 'show':
init($(this));
$(this).addClass('active');
$(this).trigger( 'shown.miniModal' );
break;
case 'hide':
init($(this));
$(this).removeClass('active');
$(this).trigger( 'hidden.miniModal' );
break;
case 'init':
init($(this));
break;
}
}

})();

/*
[[Category:MultiWiki]]
*/

0 comments on commit 5a8bca8

Please sign in to comment.