useless-stuff
2/17/2016 - 10:33 PM

WP - Gister plugin

WP - Gister plugin

<?php
/*
Plugin Name:Gister
Plugin URI:http://diego.anniballo.com/a-5-minutes-plugin-to-show-your-gist-code-into-posts/
Description:Show gist code in a wp page with git clone options
Version:2.0
Author:Diego Anniballo
Author URI:http://diego.anniballo.com
License:GPLv3
*/

// Define a plugin view templates
const GISTER_SUCCESS_TEMPLATE = 'success_template.php';
const GISTER_ERROR_TEMPLATE = 'error_template.php';

// Add short tag to wordpress environment
add_shortcode('gister', 'GISTER_shortCode');
function GISTER_shortCode($params)
{
    GISTER_appendJavascripts();
    if (!isset($params['snippet-id'])) {

        return GISTER_getTemplate(GISTER_ERROR_TEMPLATE);
    }

    $snippetId = $params['snippet-id'];
    $snippetSelector = str_replace('/','_',$params['snippet-id']);
    return str_replace(array('%SNIPPET_ID%','%SNIPPET_SELECTOR%'),array($snippetId,$snippetSelector),GISTER_getTemplate(GIST_SUCCESS_TEMPLATE));
}

function GISTER_getTemplate($template){
    // todo: maybe this part can be optimized by a native function of wordpress but I've not found it in one minute ;)
    return file_get_contents(plugin_dir_path(__FILE__).$template);
}

function GISTER_appendJavascripts(){
    // Append clipboardjs, https://clipboardjs.com/
    wp_register_script('gister_clipboard', plugins_url('js/clipboard.min.js', __FILE__),false,'1.5.8',true);
    wp_enqueue_script('gister_clipboard');
    // Append main script of plugin
    wp_register_script('gister_main', plugins_url('js/main.js', __FILE__),'gister_clipboard',false,true);
    wp_enqueue_script('gister_main');
}
<div class="input-group gister-copy-to-clipboard">
    <input id="gister-git-clone-%SNIPPET_SELECTOR%" type="text" class="form-control" value="git clone https://gist.github.com/%SNIPPET_ID%.git">
    <span class="input-group-btn">
        <button class="btn btn-default gister-copy-to-clipboard-button" type="button" data-clipboard-target="#gister-git-clone-%SNIPPET_SELECTOR%">
            <svg aria-hidden="true" height="15" width="11" role="img" version="1.1" viewBox="0 0 14 16" width="14"><path d="M2 12h4v1H2v-1z m5-6H2v1h5v-1z m2 3V7L6 10l3 3V11h5V9H9z m-4.5-1H2v1h2.5v-1zM2 11h2.5v-1H2v1z m9 1h1v2c-0.02 0.28-0.11 0.52-0.3 0.7s-0.42 0.28-0.7 0.3H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h3C4 0.89 4.89 0 6 0s2 0.89 2 2h3c0.55 0 1 0.45 1 1v5h-1V5H1v9h10V12zM2 4h8c0-0.55-0.45-1-1-1h-1c-0.55 0-1-0.45-1-1s-0.45-1-1-1-1 0.45-1 1-0.45 1-1 1h-1c-0.55 0-1 0.45-1 1z"></path></svg>
        </button>
    </span>
</div>
<script src="https://gist.github.com/%SNIPPET_ID%.js"></script>
// it's require https://clipboardjs.com, https://jquery.com and http://getbootstrap.com
var clipboard = new Clipboard('.gister-copy-to-clipboard-button');
clipboard.on('success', function (e) {
	e.clearSelection();
});
jQuery('.gister-copy-to-clipboard-button').tooltip({
	placement: 'top',
	title: 'Copied',
	trigger: 'focus',
	delay: {"hide": 500}
});
<div class="error">
    Gister plugin: you must specified a snippet id attribute for render gist code, try with [gister snippet-id="put here the code"]
</div>