ZIM BITS TUTORIAL

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Swipe Scroll Window</title>

<!-- Welcome to ZIM at https://zimjs.com - Code Creativity!              	        -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner 	-->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate 	-->

<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->

<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->

<script>

// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT	sets canvas and stage to dimensions and scales to fit inside window size
// FILL	sets canvas and stage to dimensions and scales to fit outside window size
// FULL	sets stage to window size with no scaling
// "tagID"	add canvas to HTML tag of ID - set to dimensions if provided - no scaling

const scaling = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
const assets = "bitslist.jpg";
const path = "assets/"

new Frame(scaling, width, height, color, outerColor, ready, assets, path);
function ready() {
	
	// given F (Frame), S (Stage), W (width), H (height)

	const bits = new Pic("bitslist.jpg");

	// ZIM BITS - Swipe Scroll Window  (2016 - updated 2022)
	// SEE the ZIM List() for a new way to make a menu

	// ZIM provides a Window class to make a swipeable scroll window
	// this can hold a Label (text) or images or any content - even interactive
	// if the content is bigger than the window then users can swipe to view content
	// an indicator shows the scroll position and proportion of content visible
	// you can set the following parameters:

	// PARAMETERS - see docs for details and below for special ones!
	// width, height, color, borderColor, borderWidth, padding, corner, swipe,
	// indicatorActive, indicatorColor, indicatorAlpha, indicatorFade,
	// slide, slideSnap, interactive, shadowColor, shadowBlur

	// SWIPE PARAMETER
	// swipe is set to auto / true which handles horizontal and vertical if needed
	// you can set it to horizontal or vertical to handle only one or the other
	// or to none / false

	// SLIDE AND SLIDESNAP PARAMETERS
	// slide is set to true by default and will throw your content when you let go
	// this takes a little processing so if you have a lot of mobile windows - watch it...
	// you can turn it off by setting it to false
	// slideSnap is set to "vertical" but you can set it to auto / true, horizontal or none / false
	// this has the effect of moving past the bounds and snapping back to the bounds

	// INTERACTIVE PARAMETER
	// by default the swipe / drag will happen on content that you add to the window
	// if your content is smaller than the window - say a lot of short text lines
	// and you want to drag them vertically, then you can set interactive to false
	// the interactive parameter, when true (default), lets you interact with your content
	// but if you set interactive to false, it uses the whole window to scroll
	// however, you can't interact with the content (aside from scrolling it)
	// this would be fine for text but not fine for content with a button for instance

	// SCROLLX AND SCROLLY PROPERTIES
	// you can use the Window scrollX and scrollY property to get and set content position
	// this may not work right away due to the drag rectangle being established
	// so use setTimeout(function(){yourWindow.scrollX=-500; S.update();}, 200)
	// or better yet, animate(yourWindow, {scrollX:-500}, 600);
	// scrollX and scrollY can be used to make the mouse scroll wheel control the window scroll...

	// EXTRA
	// we made the second window act like a menu
	// where you roll over the tiles and it tells you a title
	// and when you click on the tile it goes to a URL
	// we use hitTestGrid() for this (or can calculate it yourself)

	// STEPS
	// 1. create a new Window() and pass it the parameters you need
	// 2. add the window to the stage and position it
	// 3. make content for the window
	// 4. add content to the window


	// TEXT WINDOW

	// 1. create a new Window() and pass it the parameters you need
	const w = new Window({
		backgroundColor:"#222",
		borderWidth:0,
		corner:0,
		padding:12,
		width:400,
		height:120
	})
		// 2. add the window to the stage and position it
		.center()
		.mov(0, -180);

	// 3. make content for the window
	let sentence = "Below is a Window that shows swipeable content";
	sentence += " - this box with text is also a Window.";
	sentence += " There are all sorts of options, so have a look at the docs!";
	sentence += " Note that the indicator at right is not itself draggable -";
	sentence += " it just shows how much text is in the Window and the scroll position.";
	const label = new Label({text:sentence, size:24, color:"#999", lineWidth:380});

	// 4. add content to the window
	w.add(label);

	// MENU WINDOW
	// SEE the ZIM List() for a new way to make a menu

	// 1. create a new Window() and pass it the parameters you need
	const padding = 10;
	const track = new Window({
		width:800,
		height:215,
		padding:padding,
		swipe:"horizontal",
		borderColor:darker,
		borderWidth:5,
		corner:10,
		backgroundColor:darker,
		scrollBarColor:pink,
		scrollBarDrag:true,
		slideSnap:"horizontal"
	})
		// 2. add the window to the stage and position it
		.center()
		.mov(0, 50)

		// 3. make content for the window (in this case the picture we loaded)
		// 4. add content to the window
		.add(bits);


	// EXTRA
	// we made the second window act like a menu
	// where you roll over the tiles and it tells you a title
	// and when you click on the tile it goes to a URL
	// we use hitTestGrid() for this (or can calculate it yourself)

	const titles = [
	 "Shapes", "Shuffle", "Embedded", "Responsive", "Animation",
	 "Assets", "Tabs", "Sequencing", "Parallax", "DUO", "Snap",
	 "Damping", "Buttons", "Masks", "Sound", "Drawing", "HitTests",
	 "Double", "Scrubbing", "Selectors"
	];

	const links = [
	 "zimshapes.html", "randomarray.html", "inlinecanvas.html", "responsivedesign.html", "animation.html",
	 "preload.html", "tabs.html", "sequence.html", "parallax.html", "parameters.html", "snapping.html",
	 "damping.html", "buttons.html", "masks.html", "sound.html", "draw.html", "hittest.html",
	 "two.html", "scrub.html", "selector.html"
	];

	// provided Window events
	track.on("hoverover", addTip);
	track.on("hoverout", removeTip);

	// NOW SEE ZIM Tip()

	let lastIndex = -1;
	let animateCheck = false;
	function addTip() {
		// Window (track) knows local mouseX and mouseY on content
		// or you could use F.mouseX and F.mouseY
		const m = track.contentMouse; // gives m.x and m.y properties
		const index = getIndex(m.x, m.y); // which tile is rolled on

		if (!zot(index) && index != lastIndex && !animateCheck) {
			animateCheck = true;
			if (tip.alpha >= .9) {
				// already in view so animate to 0 alpha and back up to 1
				// use rewind prop of animate
				// change the text of the tip on the rewindCall function
				// this is when the tip is at 0 alpha
				tip.animate({
					props:{alpha:1},
					time:.3,
					rewind:true,
					rewindCall:function(){
						tip.text = titles[index];
						lastIndex = index;
					},
					call:function(){animateCheck = false;}
				});
			} else { // animate up from nothing (no tip was showing)
				animateCheck = true;
				tip.text = titles[index];
				tip.alpha = 1;
				lastIndex = index;
				animate({
					target:tip,
					props:{alpha:1},
					time:.5,
					call:function(){animateCheck = false;}
				});
			}
		}
	}
	function removeTip() {
		animate({
			target:tip,
			props:{alpha:0},
			time:.5,
			call:function(){lastIndex = -1; animateCheck = false;}
		});
	}

	function getIndex(x,y) {
		// we can calculate the selected tile or use hitTestGrid()
		// hitTestGrid returns the index of the tile at selected mouse location
		// note that hitTestGrid does not support DUO
		// this is because most parameters are required
		// and it is a function often run in mousemoves or Tickers...
		// obj, width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type
		return bits.hitTestGrid(
			bits.width,
			bits.height,
			20, 1,
			x, y,
			padding, padding,
			0, 0,
			true // local coordinates (or use F.mouseX, etc. instead of m.x)
		);
	}

	const tip = new Label({text:"", size:30, color:"#888", align:"center"})
		.center()
		.mov(0, 200);

	// Window gives a select event for a traditional click on the window
	track.on("select", function() {
		const m = track.contentMouse;
		const index = getIndex(m.x, m.y);
		zgo(links[index]);
	});


	const title = "Window - with Text and with Sliding Menu";
	new zim.Label(title, 30, null, "#666")
		.pos(40, 40);

	const docItems = "Frame,Label,Window,List,hitTestGrid,animate,pos,mov,center,zog,zgo,Ticker";
	makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this

} // end of ready

</script>

<meta name="viewport" content="width=device-width, user-scalable=no" />

</head>

<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>