JSFiddle - React, Tailwind, and code Playground

by Derek Gathright

HTML

<div id="main_content">
	<div id="anim_listing">
		<div id="anim_menu">
			<button id="create_anim_btn">Create New</button>
			<button id="rename_anim_btn">Rename</button>
			<button id="delete_anim_bn">Delete</button>
			<hr/>
			<button id="generate_js_btn">Generate .js</button>
			<br/>
		</div>
	</div>

	<div id="anim_section">

		<!-- SHOW ANIM INFO -->
		<div id="anim_info">
			<div id="anim_info_title">anim title</div>
		</div>
		<!--/SHOW ANIM INFO -->
		<!-- IMAGE UPLOAD LIST WIDGET -->
		<div id='img_lister_1' class="img_lister">
			image frames
			<input type="file" class="img_uploader" titsle="Upload images" accept="image/*" disabled/>
			<div class="yui3-widget yui3-scrollview yui3-scrollview-vert">
				<!-- Image Frame Content -->
				<div class="thumb_list  yui3-scrollview-content"></div>
			</div>
		</div>
		<!-- /IMAGE UPLOAD LIST WIDGET -->
	</div>

	<div class="center_area">
		<!-- IMG INFO -->
		<div id="img_f_info">
			frame001.png
		</div>
		<!--/IMG INFO -->
		<!-- IMAGE PREVIEWER -->
		<div class="img_f_preview" id="img_f_previewer"></div>
		<!-- /IMAGE PREVIEWER -->
	</div>
</div>

CSS

*
{
    margin:  0;
    padding: 0;
    font-family: 'Bitstream Vera Sans Roman';
}

html, body
{
	width:  100%;
	height: 100%;
}

#main_content
{
	width: 100%;
	min-width: 800px;
	height: 100%;
}

#anim_options
{
    margin-left: 16px;
    margin-bottom: 8px;
}

#main_div
{
    margin: 0 auto;
    width: 100%;
}

#canvas_container
{
    position: relative;
    overflow: scroll;
    width: 512px;
    height: 512px;
    margin: 0 auto;
    margin-top: 8px;
}

#play_anim_controls
{
    width: 512px;
    border: 0px solid #000088;
    margin: 0 auto;
    text-align: center;
}

#spr_edit_canvas
{
    width: 512px;
    height: 512px;
    border: #707070 1px dashed;
}

#menu_container
{
    position: absolute;
    top: 0;
    left: 0;
	bottom: 0;
    border: #000000 1px solid;
    width: 224px;
    height: 100%;
    display: inline-block;
	overflow-x: hidden;
    overflow-y: scroll;
    z-index: 100;
    background-color: rgb(225, 225, 225);
}

#anim_section
{
	position: absolute;
	right:    0;
	width: 272px;
	top: 0;
	bottom: 0;
	height: 100%;
	background-color: rgb(255, 255, 255);
	z-index: 100;
}

#anim_info
{
	position: relative;
	width: 272px;
	height: 30%;
	border: 1px solid #000000;
}

#anim_info_title
{
	text-align: center;
}

.img_lister
{
	position: relative;
	display: block;
	border: 1px solid #000000;
	width: 272px;
	height: 65%;
	background-color: rgb(240, 240, 255);
	overflow: hidden;
}

.thumb_list
{
	height: 100%;
}

.thumb_box
{
    position: relative;
    margin: 0 auto;
    width: 256px;
    height: 128px;
    border: 1px solid rgb(0, 0, 30);
    margin-bottom: 4px;
	background-color: rgb(255, 255, 255);
}

.thumb_box_s
{
    background-color: rgb(220, 230, 255);
}

.thumb_frame_no
{
    position: absolute;
    left: 8px;
    top: 56px;
}

.thumb_frame
{
    position: absolute;
    vertical-align: middle;
    left: 32px;
    top: 24px;
    border: 1px solid black;
    width: 80px;
    height: 80px;
}

.thumb_shift_up
{
    position: absolute;
   ...

JavaScript

/** @title */
window.foo;
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob)
{
  // Great success! All the File APIs are supported.
} else
{
  alert('The File APIs are not fully supported so some widgets cannot load properly. Please upgrade your browser.');
}

/**
 *  @class
 *  widget which allows a user to customize an image list component
 *  @param {Object} params set of parameters to supply
 *  @param.$domE {HtmlElement} the DOMelement that this image frame lister is associated with
 *  @param.selectFn {Function} function to call when an image is selected(img data is sent as an object to the fn)
 **/
var ImgFrameLister = function(params)
{
	var that = this;    	//the magical JS reference to myself! :D

		//find/define DOM elements
		this.$domE = params.$domE;   //parent given with params
		this.$uploader;
		this.$thumbList;
		this.$thumbScroller;
		this.imgFrames = [];
		this.selectFn = params.selectFn || undefined;

		YUI().use('node', 'scrollview',
			function(Y)
			{
				var yDomE = Y.one(that.$domE);
				that.$uploader = yDomE.one('.img_uploader')._node;
				that.$thumbList= yDomE.one('.thumb_list')._node;
				that.$thumbList.setAttribute('id', 'thumb_list_1');
				that.$uploader.disabled = false;
				that.$uploader.addEventListener('change', that, false);


				that.scrollView = new Y.ScrollView(
				{
					srcNode: '#' + that.$thumbList.id,
					height: (that.$domE.offsetHeight - that.$uploader.offsetHeight),
					flick: {
						minDistance:5,
						minVelocity:0.3,
						axis: "y"
							}
				});

                window.foo = that.scrollView;
                that.scrollView.scrollbars.show();
				that.scrollView.render();
			});

	window.addEventListener('resize', function(){that.refreshListView();}, true);
}

ImgFrameLister.prototype =
{
	refreshListView : function()
	{
		console.log(this);
		var that = this;
		//clear and then create the images in the Thumbnail...