<!DOCTYPE html>
<html>
<head>
	<title>Icon_pack.xml Generator (Beta)</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width">
	<style type="text/css">
	body {
		margin:0;
		padding:0;
		font-size:14pt;
		font-family: Helvetiva Neue, Helvetica;
		background: #dedede;
	}

    #top {
        background:#fefefe;
        box-shadow:0 3px 10px -2px #000;
        margin-bottom:20px;
    }
    #top h1 {
        padding:20px 10px;
        margin:0;
        color: #5ac
    }
	textarea {
		display: inline-block;
		border:1px solid #ddd;
		border-radius:10px;
		margin:1%;
		font-family:consolas;
	}
	.main textarea {
		width: 46%;
		box-sizing:border-box;
		min-height: 200px;
		font-size: 16pt;
	}
	.addtext textarea {
		min-height:140px;
		min-width: 300px
	}
	p, .instructions {
		padding:20px;
		background: #fbfbfb;
		border-radius:10px;
		margin:20px;
        color:#575757;
	}
    .instructions code {
        display:  block;
        margin: 10px
    }
	button {
		-webkit-appearance: none;
		background:#3ad;
		color:#fff;
		font-size:14pt;
		border:none;
        border-bottom:2px solid #177bbd;
		border-radius: 10px;
		padding:6px;
		margin:10px;
	}
    input[type="text"]{
        -webkit-appearance:none;
        color:#575757;
        padding:10px;
        border-radius:10px;
        border:1px solid #177bbd;

    }
        .instruction a {color:#177bbd;}
    #disqus_thread {
    	display: block;
    	padding:100px 5% 10px 5%;
    	background:#5ac;
    }
    textarea#src {
	width: 94%;
	}
	code {
		background: #f2f2f2;
		overflow: auto;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="top">
    <h1>icon_pack.xml Generator (Beta) - OffCorner</h1>
</div>
<div class="instructions">
<h2>How do I use this web-app?</h2>
 you get a list of all your image names an paste it into the "source" field.
 In order to get such a list, you can use the following command on Mac:
<code>
ls ~/ECLIPSE/Workspace/IconPack-Template-master/IconPack-Template/res/drawable-xxhdpi/ > ~/Desktop/icons_list.txt
</code>    
Replace IconPack-Template-master/IconPack-Template according to your setup (also the eclipse folder).
This simple command will list all files from the drawable-xxhdpi folder in a text file on your desktop called icons_list.txt
    <br>
The next step is to open the file and paste the text into the source folder, you might need to press enter and you're done!
    <br>
    The options below can be useful as well.
    <br><br>
    I will update the drawable.xml generator with more options later, at the moment you'll have to copy the text and place it between 
    <code>
    &lt;/version&gt;
    </code>
    and
    <code>
    &lt;/resources&gt;
    </code>
 <br><br>
    I don't have a Windows or Linux Computer, so I can't find out which command to use for listing all files in a folder, <a href="http://stackoverflow.com/questions/3447503/how-to-get-a-list-of-sub-folders-and-their-files-ordered-by-folder-names">this link</a> might be useful for you.
    Pease tell me in the comments below which command to use on other operating systems and I will update this site!
</div>
<div class="main">
<textarea id="src" onkeydown="explode();append();" onblur="explode();append();" placeholder="source"/></textarea>
<textarea id="output" placeholder="output - icon_pack.xml"/></textarea>
<textarea id="outputdrawable" placeholder="output - drawable.xml"/></textarea>
</div>
<button onclick="explode();append();">update output</button>
<button onclick="clearOutput();">clear output</button>
<div>
	<div id="Preferences">
		<p class="filter">
			Filter text: <input type="checkbox" value="check" name="check" checked="checked">
			<input type="text" value=".png">
		</p>
		<p class="overwrite">
			Overwrite output (don't append): <input type="checkbox" value="clear" name="clear" checked="checked">
		</p>
		<p class="exceptions">
			Exlcude from &lt;items&gt;
			<button onclick="addExceptions()">add (iconmask, ic_overlay etc.)</button>
			<input type="text"/>
            <button onclick="addTextinput()">+</button>

		</p>
		<p class="addtext">
		add before and after &lt;items&gt; <input type="checkbox" value="beforeandafter" name="beforeandafter" checked="checked"><br>
			Add before &lt;items&gt;:<br>
			<textarea class="before">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;resources&gt;
&lt;string-array name="icon_pack" translatable="true"&gt;
</textarea>
			<br>
			Add after &lt;items&gt;:<br>
			<textarea class="after">&lt;/string-array&gt;
&lt;/resources&gt;
</textarea> 
            <br>
        		<button onclick="append();">append manually</button>

		</p>
	</div>

</div>

  

<script type="text/javascript">
	function explode(){
		var text = $('textarea#src').val();

		var exploded = text.split('\n');
		//Check if output textarea should be cleared first
			if ($('#Preferences p.overwrite input[type="checkbox"]').is(':checked')) {
			  $('#output').text( '' );
			  $('#outputdrawable').text( '' );
			}

		$.each( exploded, function( key, value ) {
			
			$.each( $('p.exceptions input[type="text"]'), function( key2, value2 ) {
				if(value == $(this).val()){
					value = '';
				};
			});
			

			//Check wether to delete suffix or not. If yes, replace text from textarea
			if ($('#Preferences .filter input[type="checkbox"]').is(':checked')) {
				var value = value.replace($('#Preferences .filter input[type="text"]').val(),"");
			}

		  if (value) {
		  	  var drawable = ' &lt;item drawable="' + value + '"/&gt;\n';
		  	  $('#outputdrawable').append(drawable);
			  var value = ' &lt;item&gt;' + value + '&lt;/item&gt;\n';
			  $('#output').append(value);
		  };

		});
	}

function append() {
		var before = $('.addtext .before').val();
		var aftertext = $('.addtext .after').val();
		//$('#output').text(before + aftertext);
		if ($('#Preferences .addtext input[type="checkbox"]').is(':checked')) {
			$('#output').text( before + $('#output').val() + aftertext);
		}

}

	function addTextinput() {
		$('.exceptions').append('<input type="text"/>');
	}
	function addExceptions() {
		$('.exceptions').append('<input type="text" value="iconback.png"/>');
		$('.exceptions').append('<input type="text" value="iconmask.png"/>');
		$('.exceptions').append('<input type="text" value="iconupon.png"/>');
	}
function clearOutput() {
	$('#output').text( '' );
}

$("input").keydown(function(){ 
   explode();
   append();
});





</script>
	<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-38798558-4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-38798558-4');
</script>
</body>
</html>