Skip to content

Instantly share code, notes, and snippets.

@omarstreak
omarstreak / content.js
Created June 8, 2016 18:55
Gmail iframes
/* this file is the "app" file that loads the sdk and brings up the iframe */
function log() {
console.log.apply(console, ['iframe-test'].concat(Array.prototype.slice.call(arguments)));
}
InboxSDK.load(1, 'iframe-test').then(function(sdk) {
sdk.Compose.registerComposeViewHandler(function(composeView) {
composeView.addButton({
title: "iframe test",
/*! Streak launches new features to users every day. Users love our fast updates and quick response to bugs.
* In order to accomplish this we use the popular InboxSDK library (www.inboxsdk.com). Its used by
* several large organizations:
* Dropbox (https://chrome.google.com/webstore/detail/dropbox-for-gmail-beta/dpdmhfocilnekecfjgimjdeckachfbec)
* HubSpot (https://chrome.google.com/webstore/detail/hubspot-sales/oiiaigjnkhngdbnoookogelabohpglmd)
* Stripe (https://chrome.google.com/webstore/detail/stripe-for-gmail/dhnddbohjigcdbcfjdngilgkdcbjjhna)
* Giphy (https://chrome.google.com/webstore/detail/giphy-for-gmail/andgibkjiikabclfdkecpmdkfanpdapf)
* Clearbit (https://chrome.google.com/webstore/detail/clearbit-connect-supercha/pmnhcgfcafcnkbengdcanjablaabjplo)
* The use of the library is similar to using other popular javascript libraries like jQuery and Underscore
*
/*
To inject a button into composes there's 5 main strategies an extension developer can use, each strategy has large tradeoffs
mainly around performance and ease of implementation. The result is that most extension developers opt for the
easy to implement but poor performing strategy.
*/
/*
Strategy 1
document.addEventListener('DOMNodeInserted', function(e){
if(e.target.classList.contains('An')){
addButton(e.target);
}
});
$('.An').forEach(addButton);
function addButton(composeNode){
var button = $('<div class="wG J-Z-I"><div class="J-J5-Ji J-Z-I-Kv-H"><div class="J-J5-Ji J-Z-I-J6-H"><div class="aA7 aaA aMZ"><img src="//composeIcon" /></div></div></div></div>');
button.click(function(e){
@omarstreak
omarstreak / load.js
Last active October 24, 2017 19:38
sdk load example
InboxSDK.load(2, 'YOUR_APP_ID_HERE', {suppressAddonTitle: 'YOUR_ADD_ON_TITLE_HERE'}).then(function(sdk){
//more code
});
@omarstreak
omarstreak / getCursorContext.js
Created December 6, 2017 22:53
Function to get information around cursor
/* @flow */
/* this code heavily borrows from https://github.com/zurb/tribute */
export type CursorContext = {
textNode: Node;
textNodeParent: Node;
textNodeContent: string;
textBeforeCursor: string;
textAfterCursor: string;
@omarstreak
omarstreak / positionMenu.js
Created December 6, 2017 23:10
Positioning the menu at the caret
import containByScreen from 'contain-by-screen';
function positionMenuAtCaret({menuContainer, cursorContext, activeQuery}: {menuContainer: HTMLElement; cursorContext: CursorContext; activeQuery: string;}){
let textNode = cursorContext.textNode;
const menuLeftEdgeCharaterPosition = Math.max(cursorContext.cursorCharacterPosition - activeQuery.length, 0);
const range = document.createRange();
range.setStart(textNode, menuLeftEdgeCharaterPosition);
range.setEnd(textNode, menuLeftEdgeCharaterPosition);
range.collapse(true);
function pasteText({replacementText, cursorContext, activeQuery}: {replacementText: string; cursorContext: CursorContext; activeQuery: string;}){
// update text node content with replaced text
const lastIndex = cursorContext.textBeforeCursor.lastIndexOf(activeQuery);
cursorContext.textNode.textContent = cursorContext.textNodeContent.substring(0, lastIndex) + replacementText + cursorContext.textAfterCursor;
const selection = document.getSelection();
if(!selection) return;
// put cursor at the end of the replaced text
const range = document.createRange();
@omarstreak
omarstreak / cursorEvents.js
Created December 18, 2017 18:52
Kefir cursor handling
Kefir.merge([
Kefir.fromEvents(input, 'keyup'),
Kefir.fromEvents(input, 'input'),
Kefir.fromEvents(input, 'click'),
Kefir.fromEvents(input, 'focus')
])
.takeUntilBy(elementDestroyedObservable)
.debounce(100)
.onValue(() => /* do some stuff */)
<div contenteditable="true">
<div>
hi <span contenteditable="false">&lt;contact_givenName&gt;</span>,
</div>
<div>
How are you?
</div>
</div>