Karteireiter

// Vollbild für die versch. Browser-Typen
function VollbildStarten(id) {
	var elemID = document.getElementById(id);
	var elem = document.documentElement;
	if(elem.requestFullscreen) {
		// neuste Browser (Bsp. Edge)
		// Element wird auf Vollbild vergrössert!
		elem.requestFullscreen();
	}
	else if(elemID.msRequestFullscreen) {
		// Internet Explorer
		// Element wird nicht zentriert oder vergrössert
		elemID.msRequestFullscreen();	
	}
	else if(elem.mozRequestFullScreen) {
		// Firefox
		elem.mozRequestFullScreen();
	}
	else if(elem.webkitRequestFullscreen) {
		// Webkit Browser (Google & Opera)
		// Element wird horizonal und vertikal zentriert, nicht vergrössert
		elem.webkitRequestFullscreen();
	}	
}

// Vollbild schliessen
function VollbildBeenden(id) {
	var elemID = document.getElementById(id);
	if(document.exitFullscreen) {
		document.exitFullscreen();	
	}
	else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	}
	else if(document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	}
	else if(document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}
}

// Elastisches Scrollen deaktivieren
function scrollDeaktivieren() {
	$(document).bind("touchmove", function(event) {
		event.preventDefault();
	});
}

// Elastisches Scrollen wieder aktivieren
function scrollAktivieren() {
	$(document).bind("touchmove", function(event) {
		return true;
	});
}

$(document).ready( function() {
	var fullscreenAktiv = false;
	$("#fullscreen").click( function() {
		if (fullscreenAktiv == false) {
			VollbildStarten("");
			$("#fullscreen").attr( {"src":"img/vollbild_beenden.png","alt":"Vollbild-Modus beenden"} );
			fullscreenAktiv = true;
		}
		else {
			VollbildBeenden("spiel");
			$("#fullscreen").attr( {"src":"img/vollbild.png","alt":"Vollbild-Modus starten"} );
			fullscreenAktiv = false;
		}
	});
});

<!DOCTYPE html>
<html>
<head>
	<title>Web-Editor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="styles.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="appfunc.js"></script>
    <script src="webeditor.js"></script>
    <script>
	// Info wegklicken
	$(document).mouseup(function (e){
    	var container = $("#info");
		//var transparent = $("#transparent");

if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    	{
        	container.hide();
			//transparent.hide();
    	}
	});
	</script>
</head>
<body>
<header>
	<h1>Web-Editor</h1>
    <img src="img/vollbild.png" id="fullscreen">
</header>
<section id="buttons">
<fieldset id="head">
	<legend> head </legend>
    <button id="inputNew"> new </button>
    <button id="inputJQuerry">jQuery</button><br>
    <button id="inputMetaViewport"><meta></button>
	<button id="inputScript"><script></button>
    <button id="inputStyle"><style></button>
    <button id="inputLink"><link></button>
</fieldset>
<fieldset id="body">
	<legend> body </legend>	
    <button id="inputHeader"><header></button>
    <button id="inputSection"><section></button>
    <button id="inputDiv"> <div> </button>
    <button id="inputImg"> <img> </button>
    <button id="inputForm"><form></button>
    <button id="inputH1"> <h1> </button>
    <button id="inputP"> <p> </button>
    <button id="inputA"> <a> </button>
    <button id="inputUL"> <ul> </button>
    <button id="inputOL"> <ol> </button>
</fieldset>  
<div id="bildbuttons">
	<img src="img/tabulator.png" id="tab" title="tab">
	<img src="img/folder.png" id="verzeichnis" title="Verzeichnis öffnen">
	<img src="img/diskette.png" id="save" title="speichern">
	<img src="img/Weltkugel.gif" id="goPublic" title="veröffentlichen">
</div>  
</section>

</body>
</html>

body{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: "Arial", sans-serif;
}

header {
	width: 100%;
	padding: 5px 0px;	
	background-color:#36F;
	border-top: 2px solid #009;
	border-bottom: 2px solid #009;
	text-align: center;
}

h1 {
	margin: 0px;
	padding: 0px;
	font-size: 30px;
	font-weight: bold;	
	color:#FFF;
}

header #fullscreen {
	position: absolute;
	right: 5px;
	top: 5px;	
}

#buttons {
	position: relative;	
}

fieldset {
	margin-top: 10px;
	padding: 5px;	
}

fieldset button {
	margin-bottom: 5px;	
}

#bildbuttons {
	position: absolute;
	top: 5px;
	right: 5px;
}

#bildbuttons img {
	top: 0px;
}

#bildbuttons img:hover {
	cursor:pointer;	
}

img#goPublic {
	height: 55px;
	margin-left: 10px;	
}

img#verzeichnis{
	height: 40px;
}

img#tab {
	height: 40px;
}

button {
	font-size: 1.1em;	
}

textarea {
	margin: 10px 0px 0px 0px;
	padding: 1%;
	width: 98%;	
	height: 500px;
}

#info {
	position: absolute;
	display: none;
	top: 20%;
	right: 10px;
	width: 200px;
	padding: 10px;
	border: 1px solid black;
	background-color: #9CC;
}

#info ul {
	margin: 0px;
	padding: 10px;	
}

#info li {
	margin: 0px;
	padding: 0px;
}

#info span {
	color:#03C;
	display: inline-block;
	width: 150px;
}

#info span:hover {
	color: #900;
	cursor: pointer;	
}

#info img {
	height: 0.8em;	
}

#info img:hover {
	cursor: pointer;	
}

$.fn.insertCode = function(inputText,focusPlus) {
	// keine Defaultwerte
	return this.each(function(){
		cursorPosition = parseInt($(this).prop("selectionStart"));
		codeGesamt = $(this).val();
		codeVorher = codeGesamt.slice(0,cursorPosition);
		codeNachher = codeGesamt.slice(cursorPosition,codeGesamt.length);
		cursorPosition += focusPlus;
		$(this).val(codeVorher + inputText + codeNachher).focus();
		this.setSelectionRange(cursorPosition,cursorPosition)
	});
};

function holeCode(quelle){
	$("#dateiurl").val(quelle);
	
	// Code aus Datei holen
	$.post( "getcontent.php", 
		$("#saveForm :input").serializeArray(),
			function(quelleCode){ 
				$("#code").html(quelleCode); 
			}
	);
	
	//info-Box ausblenden
	$("#info").hide();
}

function deleteFile(quelle) {
	$("#deleteurl").val(quelle);;
	
	// Datei löschen mit delete.php
	$.post( "delete.php", 
		$("#saveForm :input").serializeArray(),
			function(info){ 
				alert(info); 
				
			}
	);
	
	//info-Box ausblenden
	$("#info").hide();
}

$(document).ready( function() {
	// globale Variablen
	var code = $("#code");
	var info = $("#info");
	
	// Head Buttons
	$("#inputNew").click( function() {
		code.html("");
		$("#dateiurl").val("");
	});
	
	$("#inputMetaViewport").click( function() {
		code.insertCode('<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">',0);
	});
	
	$("#inputJQuerry").click( function() {
		code.insertCode('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>',0);
	});
	
	$("#inputScript").click( function() {
		code.insertCode('<script></script>',8);
	});
	
	$("#inputStyle").click( function() {
		code.insertCode('<style></style>',7);
	});
	
	$("#inputLink").click( function() {
		code.insertCode('<link rel="stylesheet" href="" />',0);
	});
	
	
	// Body Buttons
	$("#inputHeader").click( function() {
		code.insertCode('<header></header>',8);
	});
	
	$("#inputSection").click( function() {
		code.insertCode('<section id=""></section>',13);
	});
	
	$("#inputDiv").click( function() {
		code.insertCode('<div></div>',5);
	});
	
	$("#inputImg").click( function() {
		code.insertCode('<img src="">',10);
	});
	
	$("#inputForm").click( function() {
		code.insertCode('<form action="" method=""></form>',14);
	});
	
	$("#inputH1").click( function() {
		code.insertCode('<h1></h1>',4);
	});
	
	$("#inputP").click( function() {
		code.insertCode('<p></p>',3);
	});
	
	$("#inputA").click( function() {
		code.insertCode('<a href=""></a>',9);
	});
	
	$("#inputUL").click( function() {
		code.insertCode('<ul>\n\t<li></li>\n</ul>',10);
	});
	
	$("#inputOL").click( function() {
		code.insertCode('<ol>\n\t<li></li>\n</ol>',10);
	});
	
	
	// Tabulator
	$("#tab").click( function() {
		code.insertCode('\t',1);
	});
	
	// Veröffentlichen
	$("#goPublic").click( function() {
		window.open($("#dateiurl").val());
       	return false;
	});
	
	
	// Dokument speichern
	$("#save").click( function() {
		
		// Datei noch nicht gespeichert (noch keine Name vorhanden)
		if($("#dateiurl").val() == "") {
			var dateinameEingabe = prompt("Bitte einen Dateinamen mit Dateiendung (.html, .css oder .js) angeben:", "");

if (dateinameEingabe != "") {
    			$("#dateiurl").val("files/"+dateinameEingabe);
			} 
			else {
				alert("Keinen Dateinamen erfasst. Speicherung abgebrochen!");
				return false;	
			}
		}
		
		// Datei erstellen (nur wenn ein Name erfasst wurde)
		if($("#dateiurl").val() != "") {
			$.post( $("#saveForm").attr("action"), 
				$("#saveForm :input").serializeArray(),
					function(info){ 
						alert(info); 
					}
			);
		}

});
	
	
	// Dokument öffnen
	$("#verzeichnis").click( function() {
		info.show();
		
		$.post( "opendir.php", 
			function(files){  
				info.html(files);
			}
		);
	});
	
	
	
});