surfingkeys.js

surfingkeys.js

const {
    aceVimMap,
    mapkey,
    imap,
    imapkey,
    getClickableElements,
    vmapkey,
    map,
    unmap,
    cmap,
    addSearchAlias,
    removeSearchAlias,
    tabOpenLink,
    readText,
    Clipboard,
    Front,
    Hints,
    Visual,
    RUNTIME
} = api;

// an example to create a new mapping `ctrl-y`
api.mapkey('<Ctrl-j>', 'Show me the money', function() {
  Front.showPopup(
    'a well-known phrase uttered by characters in the 1996 film Jerry Maguire (Escape to close).',
  );
});

// an example to remove mapkey `Ctrl-i`
// unmap('<Ctrl-i>');

// I removed this
unmap('zz');
unmap('ZZ');

// Copied this from someone else's config
// ---- Functions ----
api.mapkey('<Ctrl-y>', "Open the clipboard's URL in the current tab", function() {
    Clipboard.read(function(response) {
        window.location.href = response.data;
    });
});

/* set theme */
settings.theme = `
.sk_theme {
    font-family: D2Coding, Input Sans Condensed, Charcoal, sans-serif;
    font-size: 10pt;
    background: #282828;
    color: #ebdbb2;
}
.sk_theme tbody {
    color: #b8bb26;
}
.sk_theme input {
    color: #d9dce0;
}
.sk_theme .url {
    color: #98971a;
}
.sk_theme .annotation {
    color: #b16286;
}
.sk_theme .omnibar_highlight {
    color: #ebdbb2;
}
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
    background: #282828;
}
.sk_theme #sk_omnibarSearchResult ul li.focused {
    background: #d3869b;
}
#sk_status, #sk_find {
    font-size: 20pt;
}
`;

settings.smoothScroll = true;
settings.scrollStepSize = 180;
settings.hintAlign = 'left';

/**
 * Styling.
 *
 * @link https://github.com/brookhong/Surfingkeys#styling
 */

// link hints
// Hints.style(`
//   border: solid 3px #552a48 !important; 
//   font-size: 20px !important; 
//   color:#EBDBB5 !important; 
//   background: initial !important;
//   background-color: #458588 !important;
//   background: initial !important;
//   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,Arial,sans-serif  !important;
//   transition: opacity .2s !important;
// `);

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'https://iosevka-webfonts.github.io/iosevka-slab/iosevka-slab.css');

document.head.appendChild(link);
console.log(document.head);


Hints.style(`
    border: solid 2px #552a48; 
    font-size: 20px; 
    color:#EBDBB5; 
    background: #f12711; 
    background: -webkit-linear-gradient(to bottom right, #f5af19, #f12711);  background: linear-gradient(to bottom right, #f5af19, #f12711);
    font-family: "Iosevka Slab Web";
    letter-spacing: 0.1em;
    text-shadow: 2px 2px #5555554f;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    box-shadow: 2px 2px 5px #552a48ba2px 2px 5px #552a48ba;
	  -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	  animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
`);

// text hints
Hints.style(`
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); 
  font-size: 20px; 
  border: solid 3px #552a48; 
  background: #00f2fe;
  `, 'text');


//Hints.style(
//  'border: solid 3px #552a48; font-size: 14px; color:#FF9100; background: #FBF1C7; background-color: #552a48;',
//  'text',

// Hints.style(
//  'border: solid 3px #552a48; font-size: 20px; color:#EBDBB5 background: initial; background-color: #458588;',


// Tabs
api.mapkey('gT', '#3Go one tab left', 'RUNTIME("previousTab")');
api.mapkey('gt', '#3Go one tab right', 'RUNTIME("nextTab")');

// Blacklist Sites
//settings.blacklistPattern = /.*mail.google.com.*|.*voice.google.com.*|codepen.io|duolingo.com|youtube.com|udemy.com;
// settings.blocklistPattern = /.*mail.google.com.*|.*inbox.google.com.*|codepen.io.*|gitpod.io.*|replit.com.*|.*shapez.io.*/ig;
settings.blocklistPattern = /.*mail.google.com.*|.*inbox.google.com.*|codepen.io.*|gitpod.io.*|figma.com.*|codesandbox.io.*|replit.com.*|replit.co.*|shapez.io.*/ig;
//settings.blacklistPattern = /.*mail.google.com.*|.*voice.google.com.*|codepen.io;

// click `Save` button to make above settings to take effect.

// Copy link in markdown format
api.mapkey('yY', '#7Copy page title and url as markdown', function() {
  Clipboard.write('['+document.title+']'+'('+window.location.href+')' );
});