htmlhouse
/
htmlhouse
mirror of https://github.com/writeas/htmlhouse


			
				
					
						
						
							
							{{define "editor"}}<!DOCTYPE HTML>
<html>
	<head>

		<title>CSShorse</title>
		
		<link rel="stylesheet" type="text/css" href="/css/house.css" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="icon" type="image/png" href="/img/favicon-chrome.png" sizes="192x192">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="theme-color" content="#888888" />

		<meta name="description" content="Publish HTML with CSShorse.">
		<meta name="application-name" content="CSShorse">
		<meta name="application-url" content="https://html.house">
		<meta itemprop="name" content="CSShorse">
		<meta itemprop="description" content="Publish HTML with CSShorse.">
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:site" content="@HTMLhouse">
		<meta name="twitter:title" content="HTMLhouse">
		<meta name="twitter:description" content="Publish HTML with CSShorse.">
		<meta property="og:title" content="CSShorse" />
		<meta property="og:site_name" content="CSShorse" />
		<meta property="og:type" content="object" />
		<meta property="og:url" content="https://html.house/" />
		<meta property="og:description" content="Publish HTML with CSShorse." />

	</head>
	<body>
		
		<header>
			<h1>CSShorse</h1>
			<nav>
				{{if .ID}}<a class="home" href="/">&lt;&#128052;/&gt;</a>{{end}}
				<a href="/about.html">about</a>
				<a href="/contact.html">contact</a>
			</nav>
			{{if .ID}}<a href="{{.SiteURL}}" target="site">view</a>{{end}}
			{{if .AllowPublish}}
				<a id="publish" href="#">{{if .ID}}update{{else}}publish{{end}}</a>
				<input type="checkbox" name="public" id="public"{{if .Public}} checked="checked"{{end}} /><label for="public">public</label>
            {{end}}
		</header>

		<pre id="css-editor" class="editor"></pre>

		<div id="preview-wrap">
			<iframe id="preview"></iframe>
		</div>

<script src="/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/h.js"></script>
<script>
let style;
(function() {
	var publishing = false;
	var $publishBtn = $("#publish");
	var $publicCheck = document.getElementById("public");
	{{if .ID}}{{else}}var orig = "{{.Content}}";
	$publishBtn.addClass("no");{{end}}

	var houses = JSON.parse(H.get('neighborhood', '[]'));
	var hasBuilt = houses.length > 0;
	function updatePreview() {
		var val = editor.getSession().getValue();
		try {
  			$view.contents().find("head").find("style").html(val);
		} catch (err) {
  			console.error(err);
		}
		{{if .ID}}{{else}}if (val != orig) {
			publishing = false;
			$publishBtn.removeClass("no");
			$publishBtn.text("publish");
		} else {
			publishing = true;
			$publishBtn.addClass("no");
			$publishBtn.text("publish" + (!hasBuilt ? " (edit first)" : ""));
		}{{end}}
	}
	var justPublished = false;
	var editor = ace.edit("css-editor");
	var $view = $('#preview');
	editor.setTheme("ace/theme/chrome");
	editor.session.setMode("ace/mode/css");
	editor.getSession().on('change', updatePreview);
	{{if .ID}}{{else}}var saved = H.get('constructionSite', '');
	if (saved !== '') {
		//editor.setValue(saved);
	}{{end}}

	// Populate initial page
	var iframe = document.getElementById('preview');
	iframe = iframe.contentWindow || ( iframe.contentDocument.document || iframe.contentDocument);
	iframe.document.open();
	iframe.document.write('{{.Content}}');
	iframe.document.close();
	$view.on("load", function() {
		style = $view.contents().find("head").find("style").get(0)
		if (typeof style !== "undefined") {
			editor.setValue(style.innerHTML)
		} else {
			$view.contents().find("head").append('<style type="text/css"></style>');
		}
	});

	{{if .ID}}{{else}}window.addEventListener('beforeunload', function(e) {
		if (!justPublished) {
			H.set('constructionSite', editor.getSession().getValue());
		}
		return null;
	});{{end}}

	if (hasBuilt) {
		$('header').append('<a href="/houses.html">my pages</a>');
	}
	{{if .ID}}var token;
	for (var i=0; i<houses.length; i++) {
		if (houses[i].id == "{{.ID}}") {
			token = houses[i].token;
			break;
		}
	}
	if (typeof token === "undefined") {
		$publishBtn.addClass("no");
	}{{else}}
	{{end}}
	$publishBtn.on('click', function(e) {
		e.preventDefault();
		if (publishing) {
			return;
		}
		publishing = true;
		$.ajax({
			type: "POST",
			url: "/⌂/{{if .ID}}{{.ID}}{{else}}create{{end}}",{{if .ID}} 
			beforeSend: function (request) {
				request.setRequestHeader("Authorization", token);
			},{{end}}
			data: {html: editor.getSession().getValue(), public: $publicCheck.checked ? "true" : ""},
			success: function(data, status, xhr) {
				publishing = false;
				{{if .ID}}if (data.code == 200) { {{else}}if (data.code == 201) {
					var houses = JSON.parse(H.get('neighborhood', '[]'));
					houses.push({id: data.data.id, token: xhr.getResponseHeader('Authorization')});
					H.set('neighborhood', JSON.stringify(houses));{{end}}
					justPublished = true;
					{{if .ID}}{{else}}H.remove('constructionSite');{{end}}
					window.location = '/' + data.data.id + '.html';
				} else {
					alert(data.error_msg);
				}
			},
			error: function(jqXHR, status, error) {
				publishing = false;
				alert(error);
			}
		});
	});
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//analytics.write.as/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', 34]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
})();
</script>
<noscript><p><img src="//analytics.write.as/piwik.php?idsite=34" style="border:0;" alt="" /></p></noscript>
	</body>
</html>{{end}}