raw.html

<!--
version 1.0.0 with docs - copied from http://jsfiddle.net/grungerabbit/wLuezzzv/28/
-->

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/mochaGrunge.png);
}
sappy {
    display: block;
    padding: 0.5em 1em;
    line-height: 1.75;
}
.sappy__docs sappy {
    font-size: 1.5em;
    border-bottom: 2px solid #222;
    text-align: center;
}
.sappy__docs .sappy__header {
    text-align: left;
}
sappy > h1 {
    line-height: 1.25;
}

/* examples */
.docs__heading, .docs__subheading {
    padding: 2.5em;
    text-align: center;
    line-height: 1;
}
.docs__heading {
    font-size: 48px;
    margin: 8rem 0;
}
.docs__heading:first-of-type {
    margin-top: 0;
}
.docs__heading + .docs__subheading {
    margin-top: -8rem;
}
.docs__subheading {
    font-size: 36px;
}
.docs__heading p {
    margin-top: 1em;
}
.docs__heading .sappy__emoji {
    display: block;
    font-size: 22px;
    margin: 1em;
}
.sappy--eg {
    margin: 3rem;
    padding: 1em;
}
.love__letter {
    font-size: 3.5em;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 50px;
}
.love__letter .sappy__emoji {
    display: block;
    font-size: 150%;
}

.live-through-this {
    font-size: 2.5em;
}

.nirvana__quote {
    font-size: 1.75em;
    text-align: right;
    line-height: 1.5em;
}
.nirvana__quote > .sappy__emoji {
    display: inline;
}
.nirvana__quote > sappy {
    text-align: center;
    letter-spacing: 0.25em;
    margin: 0.5rem 0 0.75rem;
}
</style>


<div class="docs__heading">
    <h1>Sappy.js</h1>
    <p>a jquery plugin that styles the sappy things you say - to make him happy</p>
    <p>by @grungerabbit // cheryl wu</p>
</div>

<article class="sappy__docs">
    <sappy class="sappy__header"><h1>you make me<br>feel like I'm living a<br>teenage dream</h1></sappy>
    <sappy>You are so great. I am so lucky we found each other. Thank you for being there for me.</sappy>
    <sappy>One day, we're gonna live in Paris... I promise, I'm on it</sappy>
    <sappy>We'll always have Paris</sappy>
    <sappy>A moment of love</sappy>
    <sappy>A dream</sappy>
    <sappy>A laugh</sappy>
    <sappy>A kiss</sappy>
    <sappy>A cry</sappy>
    <sappy>Our rights</sappy>
    <sappy>Our wrongs</sappy>
    <sappy>I know it, I can't see it, but I know it enough to believe it</sappy>

    <sappy class="sappy__header"><h1>flower sniffin<br>kitty pettin<br>baby kissin</h1></sappy>
    <sappy>and if you save yourself, you will make him happy</sappy>
    <sappy>he'll keep you in a jar, and you'll think you're happy</sappy>
    <sappy>he'll give you breathing holes, then you'll think you're happy</sappy>
    <sappy>he'll cover you with grass, then you'll think you're happy</sappy>
    <sappy>now</sappy>
    <sappy>you're in a laundry room</sappy>
    <sappy>conclusion came to you</sappy>
</article>

<div class="docs__heading">
    <h1>Custom Elements</h1>
    <p>Call Sappy.js as a jQuery Plugin: $("element").sappy();</p>
</div>
        
<div class="docs__subheading sp--normcore">
    <h1>"normcore"</h1>
    <p>a sappy love letter written for your bae</p>
</div>
        
<blockquote class="sappy--eg love__letter sp--normcore">Hello my darling, I love you so very much. Never change. You are my sunshine, my only sunshine. You make me happy when skies are grey.</blockquote>
        
<div class="docs__subheading sp--mixed">
    <h1>"mixed"</h1>
    <p>slightly bipolar, crazy-bitch-exgirlfriend-style</p>
</div>

<blockquote class="sappy--eg live-through-this sp--mixed">
    Was she asking for it? Was she asking nice?
</blockquote>
<blockquote class="sappy--eg live-through-this sp--mixed">
    Yeah she was asking for it, did she ask you twice?
</blockquote>
<blockquote class="sappy--eg live-through-this sp--mixed">
    If you live through this with me, I swear that I would die for you
</blockquote>
        
<div class="docs__subheading sp--nirr">
    <h1>"nirr"</h1>
    <p>for corporate sellout blowout sales only</p>
</div>
        
<blockquote class="sappy--eg nirvana__quote sp--nirr">
    She eyes me like a Pisces when I am weak.<br>
    I've been locked inside your heart-shaped box for weeks.<br>
    I've been drawn into your magnet tar pit trap.<br>
    I wish I could eat your cancer when you turn back.<br>
    
    <sappy class="sp--nirr"><h1>Hey! Wait! I've got a new complaint!</h1></sappy>
    <h2>Forever in debt to your priceless advice</h1>
</blockquote>


<script>
var sappyJs = {
    // sappy.js // version 1.0.0 
	// @grungerabbit // cheryl wu 
	// - - - - - - - - - - - - - - - - 
	// ? / ! / ... / $%@#& ~~> https://github.com/grungerabbit/sappy.js
    "config": {
        "version": "1.0.0",
        "repo": "https://github.com/grungerabbit/sappy.js",
        "setNames": ["normcore", "nirr"],
        "selected": "alt", // setNames || "mixed" || "alt"
        "startIndex": 0,
        "increment": false,
        "commonEmoji": ["💖", "🌺", "💎", "💐", "🐝", "👶", "🌷", "🌸", "🌹", "🐥", "🐰", "😸", "😽", "😻", "🎶"],
        "maxEmoji": 20,
        "normcore": {
            "colors": ["#E2BBAC", "#F2919B", "#ED9357", "#F25467", "#F2744B", "#DEEFB7", "#98DFAF", "#5FB49C", "#414288", "#682D63", "#D30C7B", "#DBB4AD", "#894498", "#774C60", "#F1E3F3", "#3590F3"],
            "emoji": ["✨", "🎉", "💒", "👠", "🔮", "👗", "💕", "💗", "💌", "🎀", "💍", "🇫🇷", "🏠", "🎩", "💃", "👰", "👨‍👩‍👧‍👦","💑"],
            "fonts": [
                "Dancing Script",
                "Satisfy",
                "Cookie",
                "Great Vibes",
                "Calligraffitti",
                "Homemade Apple",
                "Love Ya Like A Sister",
                "Mountains of Christmas",
                "Mystery Quest"
            ],
            "transform": "none"
        },
        "nirr": {
            "colors": ["black", "yellow", "#303F3E", "#F9FCFF", "#D8E8FF", "#3F7787", "#1E4949", "#FF715B", "#4C5454", "#FBF2C0", "#C06E52", "#F96F5D", "#D56F3E", "#523F38", "#1A1423", "#363020"],
            // doubled the emoji set to weigh it more against the common set
            "emoji": ["💩", "🙀", "👃", "💸", "📉", "💣", "👖", "👔", "🔫", "💉", "💊", "™", "🎸", "💔", "💥", "👯", "💀", "🔥", "😵", "🍆", "🍌","💩", "🙀", "👃", "💸", "📉", "💣", "👖", "👔", "🔫", "💉", "💊", "™", "🎸", "💔", "💥", "👯", "💀", "🔥", "😵", "🍆", "🍌"],
            "fonts": [
            	"Oswald",
            	"Anton",
            	"Pathway Gothic One",
            	"Playfair Display",
            	"Special Elite",
            	"Contrail One",
            	"Six Caps",
            	"Allerta Stencil",
            	"Unica One",
            	"Averia Sans Libre"
            ],
            "transform": "uppercase"
        }
    },
    "init": function(settings) {
        console.log("// sappy.js // version " + sappyJs.config.version + " \n" 
                    + "// @grungerabbit // cheryl wu" 
                    + " \n// - - - - - - - - - - - - - - - - \n" 
                    + "// ? / ! / ... / $%@#& ~~> " + sappyJs.config.repo);
        sappyJs.applyAll(settings);
    },
    "rng": function(max) {
    	return Math.floor(Math.random() * (max));
    },
    "selectSet": function() {
    	var setObj;
        var randomSet = sappyJs.config.setNames[sappyJs.rng(sappyJs.config.setNames.length)];
        var setName = sappyJs.config.selected;
        
        switch (sappyJs.config.selected) {
            case "mixed":
                // {?} mélangé
                setObj = sappyJs.config[randomSet];
                break;
            case "alt":
                // {?} every other
                startIndex = sappyJs.config.startIndex;
                var chosen = sappyJs.config.setNames[startIndex];
                setObj = sappyJs.config[chosen];
                break;
            default:
                setObj = sappyJs.config[setName];
                break;
        }
        return setObj;
    },
    "versechorusverse": function(dataset, reroll) {        
        var currentSet = sappyJs.selectSet()[dataset];
        var roll;

        // {?} add in the lulz common emoji
        if (dataset === "emoji") {
        	currentSet = currentSet.concat(sappyJs.config.commonEmoji);
        }
        
        roll = currentSet[sappyJs.rng(currentSet.length)];
        
        // {?} to avoid invisible text
        while (roll === reroll) {
        	roll = currentSet[sappyJs.rng(currentSet.length)];
        }
    	return roll;
    },
    "emojiRoll": function(pos) {
        var vcv = sappyJs.versechorusverse;
        var rng = sappyJs.rng;
        
        // {?} pos controls spacing
        emojiList = [" "];
        for (var i = 0; i < rng(sappyJs.config.maxEmoji); i++) {
            pos === "after" ? emojiList.push(vcv("emoji")) : emojiList.unshift(vcv("emoji"));
        }
            
        // {?} if we rolled a 0
        emojiList = emojiList.length === 1 ? [" ", vcv("emoji")] : emojiList;
        return '<span class="sappy__emoji">' + emojiList.join("") + '</span>';
    },
    "SappyStyle": function(set) {
        this["font-family"] = sappyJs.versechorusverse("fonts");
        this["text-transform"] = set.transform;
        this.color = sappyJs.versechorusverse("colors");
        this.backgroundColor = sappyJs.versechorusverse("colors", this.color);
    },
    "sappyMods": function($el, settings) {
        if (!!settings) {
        	for (var prop in settings) {
                sappyJs.config[prop] = settings[prop];
            }
        }
        
    	return $el.css(new sappyJs.SappyStyle(sappyJs.selectSet()))
                .prepend(sappyJs.emojiRoll())
                .append(sappyJs.emojiRoll("after"));
    },
	"applyAll": function(settings) {
        $("sappy").each(function() {
            sappyJs.sappyMods($(this), settings);

            // {?} alternate
            if (sappyJs.config.increment === false) {
            	sappyJs.config.increment = true;
                sappyJs.config.startIndex = 1;
            } else {
            	sappyJs.config.increment = false;
                sappyJs.config.startIndex = 0;
            }
        });
    }
}
WebFontConfig = {
	google: { families: [ 'Dancing+Script::latin', 'Satisfy::latin', 'Cookie::latin', 'Great+Vibes::latin', 'Calligraffitti::latin', 'Homemade+Apple::latin', 'Love+Ya+Like+A+Sister::latin', 'Mountains+of+Christmas::latin', 'Mystery+Quest::latin', 'Oswald::latin', 'Anton::latin', 'Pathway+Gothic+One::latin', 'Playfair+Display:900:latin', 'Special+Elite::latin', 'Contrail+One::latin', 'Six+Caps::latin', 'Allerta+Stencil::latin', 'Unica+One::latin', 'Averia+Sans+Libre:300:latin' ] }
};
(function() {
    // GOOGLE WEBFONTS
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
$.fn.sappy = function(options) {
    var settings = $.extend({
        selected: "alt"
    }, options);
    
	sappyJs.sappyMods(this, settings);
    return this;
}

$(document).ready(function() {
    // all <sappy> tags
    sappyJs.init({selected: "alt"});
    
    // any element you feel
    $(".docs__heading").each(function() {
        $(this).sappy({selected: "nirr"});
    });
    
    $(".sp--normcore").each(function() {
        $(this).sappy({selected: "normcore"});
    });
    
    $(".sp--mixed").each(function() {
        $(this).sappy({selected: "mixed"});
    });
    
    $(".sp--nirr").each(function() {
        $(this).sappy({selected: "nirr"});
    });
});
</script>