<commit_before><!DOCTYPE html> 
<html>
<head>
	<title>Arrange photos to decide what to post next on Instagram!</title>
	
	<script type="text/javascript" src="./scripts.js"></script>
	<script type="text/javascript" src="./assets/packery.min.js"></script>
	<script type="text/javascript" src="./assets/dragabilly.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./styles.css">


	<style type="text/css">
		.grid-item { width: 22%; }
		.grid-item--width2 { width: 50%; }
		.grid-item,
		.grid-item--width2 {
			/*height: 200px;*/
			float: left;
			background-color: orange;
			display: inline-block;

		}

	</style>
</head>
<body>

<!-- TODO

- style this up, mobile-first
- function to add multiple unique images (forEach...)
- instagram API - import last 3-6 images?
- menu-top?
- session persistence - how to keep references to local images?
 -->

<p>Add an image from your photo library!</p>
<input type="file" accept="image/*" multiple onchange="picChange(event)"/>


<div class="grid container">
	<img class="grid-item draggable" src="./dev-images/image1.jpg">
	<img class="grid-item draggable" src="./dev-images/image2.jpg">
	<img class="grid-item draggable" src="./dev-images/image3.jpg">
	<img class="grid-item draggable" src="./dev-images/image4.jpg">
	<img id="myphoto" class="grid-item draggable" src="">

</div>

<script type="text/javascript">

var elem = document.querySelector('.grid');
var pckry = new Packery( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 100

});

// if you have multiple .draggable elements
// get all draggie elements
var draggableElems = document.querySelectorAll('.draggable');
// array of Draggabillies
var draggies = []
// init Draggabillies
for ( var i=0, len = draggableElems.length; i < len; i++ ) {
  var draggableElem = draggableElems[i];
  var draggie = new Draggabilly( draggableElem, {
    // options...
    containment: '.container'
  });
  draggies.push( draggie );
  pckry.bindDraggabillyEvents( draggie );
}


function picChange(evt){ 
//bring selected photo in

//get files captured through input
var fileInput = evt.target.files;

	if (fileInput.length>0) {
		//get the file

		//window url <commit_msg>gridded it up, time to start making this look better<commit_after><!DOCTYPE html> 
<html>
<head>

	<meta charset="utf-8">
	<!-- Makes this work on mobile devices without being super zoomed out -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Arrange photos to decide what to post next on Instagram!</title>
	
	<script type="text/javascript" src="./scripts.js"></script>
	<script type="text/javascript" src="./assets/packery.min.js"></script>
	<script type="text/javascript" src="./assets/dragabilly.min.js"></script>

	<link rel="stylesheet" type="text/css" href="./normalize.css">
	<link rel="stylesheet" type="text/css" href="./milligram.css">
	<link rel="stylesheet" type="text/css" href="./styles.css">

	<style type="text/css">
		
	</style>

</head>
<body>

<!-- TODO

- style this up, mobile-first
- function to add multiple unique images (forEach...)
- instagram API - import last 3-6 images?
- menu-top?
- session persistence - how to keep references to local images?
 -->
<div class="container">
	<div class="row">
		<div class="column-33">
			<p>Add an image from your photo library!</p>
			<input type="file" accept="image/*" multiple onchange="picChange(event)"/>
		</div>
	</div>

	<div class="row grid">
	

			<div class="column column-33 grid-item draggable">
				<img class="" src="./dev-images/image1.jpg">
			</div>

			<div class="column column-33 grid-item draggable">
				<img class="" src="./dev-images/image1.jpg">
			</div>

			<div class="column column-33 grid-item draggable">
				<img class="" src="./dev-images/image2.jpg">
			</div>

			<div class="column column-33 grid-item draggable">
				<img class="" src="./dev-images/image3.jpg">
			</div>

			<div class="column column-33 grid-item draggable">
				<img class="" src="./dev-images/image4.jpg">
			</div>

			<div class="column column-33 grid-item draggable">
				<img id="myphoto" class="" src="">
			</div>
	
	</div>

</div>
<script type="text/javascript">

var elem = document.querySelector('.grid');
var pckry = new Packery( elem, {
  // options
  itemSelector: '.column-33',
  columnWidth: '.column-33',
  percentPosition: true
});

// if you have multiple .draggable elements
// get all draggie elements
var draggableElems = document.querySelectorAll('.draggable');
// array of Draggabillies
var draggies = []
// init Draggabillies
for ( var i=0, len = draggableElems.length; i < len; i++ ) {
  var draggableElem = draggableElems[i];
  var draggie = new Draggabilly( draggableElem, {
    // options...
    //containment: '.grid'
  });
  draggies.push( draggie );
  pckry.bindDraggabillyEvents( draggie );
}


function picChange(evt){ 
//bring selected photo in

//get files captured through input
var fileInput = evt.target.files;

	if (fileInput.length>0) {
		//get the file

		//window url 
{'fraction_non_alphanumeric': 0.17082418678906405, 'fraction_numerical': 0.009978048293753742, 'mean_word_length': 3.791586998087954, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 85, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7673594', 'n_tokens_mistral': 1826, 'n_tokens_neox': 1691, 'n_words': 447}