sim2github · May 6, 2019 16:12
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);

    body {
        margin:0;
        padding:0;
        background-color:#e6f5fc;

    }

    H2, H3, H4 {
        font-family:Trebuchet MS;
        font-weight:bold;
        margin:0;
        padding:0;
    }

    H2 {
        font-size:28px;
        color:#263842;
        padding-bottom:6px;
    }

    H3 {
        font-family:Trebuchet MS;
        font-weight:bold;
        font-size:22px;
        color:#253741;
        margin-top:43px;
        margin-bottom:8px;
    }

    H4 {
        font-family:Trebuchet MS;
        font-weight:bold;
        font-size:21px;
        color:#222222;
        margin-bottom:4px;
    }

    P {
        padding:13px 0;
        margin:0;
        line-height:22px;
    }

    UL{
        line-height : 22px;
    }

    PRE{
        background : #333;
        color : white;
        padding : 10px;
    }

    .content {
        width:970px;
        position:relative;
        margin:0 auto;
    }

    #header .content {
        height:184px;
        margin-top:22px;
    }

    #wrapper {
        min-height:250px;
    }

    #wrapper .content {
        font-family:Arial;
        font-size:14px;
        color:#222222;
        width:1000px;
    }

    #wrapper .content .column1 {
        position:relative;
        float:left;
        width:315px;
        margin-right:31px;
    }

    #wrapper .content .column2 {
        position:relative;
        overflow:hidden;
        float:left;
        width:600px;
        padding-top:47px;
    }


    UL.menu-list LI {
        color:#2557b4;
        font-family:Trebuchet MS;
        font-size:14px;
        padding:7px 0;
        border-bottom:1px dotted #d6e2e7;
    }

    UL.menu-list LI:last-child {
        border-bottom:0;
    }

    A {
        color:#2557b4;
        text-decoration:none;
    }

    A:hover {
        text-decoration:underline;
    }

    P#first{
        background : rgba(255,255,255,0.5);
        padding : 20px;
        font-size : 16px;
        line-height : 24px;
        margin : 0 0 20px 0;
    }

    UL.menu-footer LI {
        color:white;
        font-family:Arial;
        font-size:12px;
        display:inline-block;
        margin:0 1px;
    }

    UL.menu-footer LI A {
        color:#8dd0ff;
        text-decoration:none;
    }

    UL.menu-footer LI A:hover {
        text-decoration:underline;
    }

  </style>
  <title>Ace Bookmarklet Builder</title>
 </head>
 <body>

 <div id="wrapper">

 <div class="content" style="width: 950px">
    <div class="column1" style="margin-top: 47px">
        <textarea id="textarea" style="width:600px; height:500px">
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
 <body>
    
 </body>
 </html>
 </textarea><br>
        SourceUrl: <br>
        <input id="srcURL" style="width:595px" value="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-min-noconflict"><br>
        <button id="buBuild">Build Link</button> <br> <a href="#"></a>

    <div class="column2">
        <h1>Ace Bookmarklet Builder</h1>

        <p id="first">
        <strong>WARNING:</strong> Currently, this is only supported in non IE browsers.
        </p>

        <h2>How to use it:</h2>
        <ul>
            <li>Select the options as you want them to be by default.</li>
            <li>Enter the "SourceUrl". This has to be the URL pointing to build/textarea/src/ (you can leave the default to server the scripts from GitHub).</li>
            <li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
            <li>Drag the generated link to your toolbar or store it somewhere else.</li>
            <li>Go to a page with a textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
            <li>Click three times on the textarea you want to replace - Ace will replace it.</li>
            <li>To change settings, just click the blue icon in the bottom right corner.</li>
        </ul>
 </div>

 <script>

 function inject(options, callback) {
    var aceBaseUrl = options.baseUrl || "https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-min-noconflict";
    var emmetBaseUrl = "https://cloud9ide.github.io/emmet-core";

    var load = function(baseUrl, path, callback) {
        var head = document.getElementsByTagName('head')[0];
        var s = document.createElement('script');

        s.src = baseUrl + "/" + path;

        head.appendChild(s);

        s.onload = s.onreadystatechange = function(_, isAbort) {
            if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
                s = s.onload = s.onreadystatechange = null;
                if (!isAbort)
                        callback();
            }
        };
    };

    load(emmetBaseUrl, "emmet.js", function() {});

    load(aceBaseUrl, "ace.js", function() {
        ace.config.loadModule("ace/ext/textarea", function() {
            ace.config.loadModule("ace/ext/emmet", function() {
                var event = ace.require("ace/lib/event");
                var areas = document.getElementsByTagName("textarea");

                for (var i = 0; i < areas.length; i++) {
                    event.addListener(areas[i], "click", function(e) {
                        if (e.detail == 3) {
                            ace.require("ace/ext/textarea").transformTextarea(e.target, options);
                        }
                    });
                }
                callback && callback();
            });
        });
    });
 }
 // Call the inject function to load the ace files.
 var textAce;
 inject({}, function () {
    // Transform the textarea on the page into an ace editor.
    var t = document.querySelector("textarea");
    textAce = ace.require("ace/ext/textarea").transformTextarea(t);
    setTimeout(function(){textAce.setDisplaySettings(true)});

 });


 document.getElementById("buBuild").onclick = function() {
    var injectSrc = inject.toString().split("\n").join("");
    injectSrc = injectSrc.replace(/\s+/g, " ");

    var options = textAce.getOptions();
    options.baseUrl = document.getElementById("srcURL").value;

    var a = document.querySelector("a");
    a.href = "javascript:(" + injectSrc + ")(" + JSON.stringify(options) + ")";
    a.innerHTML = "Ace Bookmarklet Link";
 }

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<style type="text/css">
	@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);

	body {
	margin:0;
	padding:0;
	background-color:#e6f5fc;

	}

	H2, H3, H4 {
	font-family:Trebuchet MS;
	font-weight:bold;
	margin:0;
	padding:0;
	}

	H2 {
	font-size:28px;
	color:#263842;
	padding-bottom:6px;
	}

	H3 {
	font-family:Trebuchet MS;
	font-weight:bold;
	font-size:22px;
	color:#253741;
	margin-top:43px;
	margin-bottom:8px;
	}

	H4 {
	font-family:Trebuchet MS;
	font-weight:bold;
	font-size:21px;
	color:#222222;
	margin-bottom:4px;
	}

	P {
	padding:13px 0;
	margin:0;
	line-height:22px;
	}

	UL{
	line-height : 22px;
	}

	PRE{
	background : #333;
	color : white;
	padding : 10px;
	}

	.content {
	width:970px;
	position:relative;
	margin:0 auto;
	}

	#header .content {
	height:184px;
	margin-top:22px;
	}

	#wrapper {
	min-height:250px;
	}

	#wrapper .content {
	font-family:Arial;
	font-size:14px;
	color:#222222;
	width:1000px;
	}

	#wrapper .content .column1 {
	position:relative;
	float:left;
	width:315px;
	margin-right:31px;
	}

	#wrapper .content .column2 {
	position:relative;
	overflow:hidden;
	float:left;
	width:600px;
	padding-top:47px;
	}


	UL.menu-list LI {
	color:#2557b4;
	font-family:Trebuchet MS;
	font-size:14px;
	padding:7px 0;
	border-bottom:1px dotted #d6e2e7;
	}

	UL.menu-list LI:last-child {
	border-bottom:0;
	}

	A {
	color:#2557b4;
	text-decoration:none;
	}

	A:hover {
	text-decoration:underline;
	}

	P#first{
	background : rgba(255,255,255,0.5);
	padding : 20px;
	font-size : 16px;
	line-height : 24px;
	margin : 0 0 20px 0;
	}

	UL.menu-footer LI {
	color:white;
	font-family:Arial;
	font-size:12px;
	display:inline-block;
	margin:0 1px;
	}

	UL.menu-footer LI A {
	color:#8dd0ff;
	text-decoration:none;
	}

	UL.menu-footer LI A:hover {
	text-decoration:underline;
	}

	</style>
	<title>Ace Bookmarklet Builder</title>
	</head>
	<body>

	<div id="wrapper">

	<div class="content" style="width: 950px">
	<div class="column1" style="margin-top: 47px">
	<textarea id="textarea" style="width:600px; height:500px">
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>

	</body>
	</html>
	</textarea><br>
	SourceUrl: <br>
	<input id="srcURL" style="width:595px" value="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-min-noconflict"><br>
	<button id="buBuild">Build Link</button> <br> <a href="#"></a>

	<div class="column2">
	<h1>Ace Bookmarklet Builder</h1>

	<p id="first">
	<strong>WARNING:</strong> Currently, this is only supported in non IE browsers.
	</p>

	<h2>How to use it:</h2>
	<ul>
	<li>Select the options as you want them to be by default.</li>
	<li>Enter the "SourceUrl". This has to be the URL pointing to build/textarea/src/ (you can leave the default to server the scripts from GitHub).</li>
	<li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
	<li>Drag the generated link to your toolbar or store it somewhere else.</li>
	<li>Go to a page with a textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
	<li>Click three times on the textarea you want to replace - Ace will replace it.</li>
	<li>To change settings, just click the blue icon in the bottom right corner.</li>
	</ul>
	</div>

	<script>

	function inject(options, callback) {
	var aceBaseUrl = options.baseUrl \|\| "https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-min-noconflict";
	var emmetBaseUrl = "https://cloud9ide.github.io/emmet-core";

	var load = function(baseUrl, path, callback) {
	var head = document.getElementsByTagName('head')[0];
	var s = document.createElement('script');

	s.src = baseUrl + "/" + path;

	head.appendChild(s);

	s.onload = s.onreadystatechange = function(_, isAbort) {
	if (isAbort \|\| !s.readyState \|\| s.readyState == "loaded" \|\| s.readyState == "complete") {
	s = s.onload = s.onreadystatechange = null;
	if (!isAbort)
	callback();
	}
	};
	};

	load(emmetBaseUrl, "emmet.js", function() {});

	load(aceBaseUrl, "ace.js", function() {
	ace.config.loadModule("ace/ext/textarea", function() {
	ace.config.loadModule("ace/ext/emmet", function() {
	var event = ace.require("ace/lib/event");
	var areas = document.getElementsByTagName("textarea");

	for (var i = 0; i < areas.length; i++) {
	event.addListener(areas[i], "click", function(e) {
	if (e.detail == 3) {
	ace.require("ace/ext/textarea").transformTextarea(e.target, options);
	}
	});
	}
	callback && callback();
	});
	});
	});
	}
	// Call the inject function to load the ace files.
	var textAce;
	inject({}, function () {
	// Transform the textarea on the page into an ace editor.
	var t = document.querySelector("textarea");
	textAce = ace.require("ace/ext/textarea").transformTextarea(t);
	setTimeout(function(){textAce.setDisplaySettings(true)});

	});


	document.getElementById("buBuild").onclick = function() {
	var injectSrc = inject.toString().split("\n").join("");
	injectSrc = injectSrc.replace(/\s+/g, " ");

	var options = textAce.getOptions();
	options.baseUrl = document.getElementById("srcURL").value;

	var a = document.querySelector("a");
	a.href = "javascript:(" + injectSrc + ")(" + JSON.stringify(options) + ")";
	a.innerHTML = "Ace Bookmarklet Link";
	}

	</script>

	</body>
	</html>