gab: calc possibilities

gab-calc-possibilities.markdown

gab: calc possibilities

A Pen by Tommie Hansen on CodePen.

License.

index.html

<h1>calc possibilities</h1>
<section>
<pre contenteditable="true" tabindex="0" style="cursor:text">
# edit me / paste stuff
[SMA]
long = 100:1000,100

[RSI]
bull = 5:30,5
bear = 5:30,5
high = 70:80,5

[ADX]
adx = 5:15,5
long = 70:80,5
high = 70:80,5

[CALC]
short = 20:30,5
low = 70:80,5
mod = 10:20,5

# short = % of long
# low = % of high
# mod = mod +/- RSI for ADX
</pre>
<pre id="pos">
Possibilities
</pre>
</section>

script.js

// + https://cdn.rawgit.com/alexbeletsky/toml-js/master/src/toml.js
// + jquery
function log(str) { console.log(str); }

/* some funcs */

// simple contains() function
function contains(needle, haystack){
	if( haystack.indexOf(needle) > -1 ){ return true; } else { return false; }
}

// inclusive range with 'sticky' stepping
// e.g: 1,10,5 returns 1,5,10
function range( min, max, step )
{
  let a=[min], tmp = 0, i = 0;
  if( tmp > min ) tmp = min;  // negative value fix
	
  while( tmp < max ) {
		tmp += step;
		if( tmp < max && tmp > min ) a[i++] = tmp;
	}
  
  // always include first and last
  if( a[0] !== min ) a.unshift(min);
  if( a[a.length-1] !== max ) a.push(max);
  
  return a;
}



/*
	CALCULATE POSSIBILITIES
*/

function splitValues( val )
{
	val = val.replace(',',':'); // normalize
	val = val.split(':'); // create arr
	return val;
}

function calcPos( dynToml )
{
		/* parse toml */
	dynToml = dynToml.replace(/= /g, "= '"); // toml doesn't accept dynamic values so make it strings...
	dynToml = dynToml.replace(/\n/g, "'\n");
	dynToml = toml.parse( dynToml ); // requires toml parser
	
	let cur, key,
			min, max, step,
			newArr = [];
	
	var i = 0;
	
	for( key in dynToml )
	{
		cur = dynToml[key];
		
		// sub-object
		if( typeof cur == 'object' ){
			for( var k in cur )
			{
					let val = cur[k];
					if( contains(':', val) )
					{
						val = splitValues(val); // create arr
						
						min = parseFloat(val[0]);
						max = parseFloat(val[1]);
						step = parseFloat(val[2]);
						
						newArr[i++] = range(min, max, step); // add to arr
						
					} // if
			} // for k
		} // if
		// not sub-object..
		else {
			let val = cur;
			if( contains(':', val) )
			{
				val = splitValues(val); // create arr
				min = parseFloat(val[0]);
				max = parseFloat(val[1]);
				step = parseFloat(val[2]);
				newArr[i++] = range(min, max, step); // add to arr
			} // if
		}
		
	} // for key
	
	var i = 0,
			len = newArr.length,
			pos = 1,
			curLen;
	
	for(i; i < len; i++ )
	{
		curLen = newArr[i].length;
		pos = pos * curLen;
	}
	
	return pos;
	
} // calcPos()



// santize pasting
$(document).on('paste','[contenteditable]',function(e) {
	e.preventDefault();
	var text = (e.originalEvent || e).clipboardData.getData('text/plain');
	text = text.replace(/(\r\n|\r|\n){2}/g, '$1').replace(/(\r\n|\r|\n){2,}/g, '$1\n');
	text += "\n"; // need to add newline for the last to count etc
	window.document.execCommand('insertText', false, text);
});



/*
	update on change, bitch
*/




$('pre').first().on('keyup', function(){
	var pos = calcPos( this.innerHTML );
	pos = pos.toLocaleString('en-US');
	pos = '<b>' + pos + '</b>\npossibilities';
	document.getElementById('pos').innerHTML = pos;
})


// init
let d = document,
		pre = d.querySelectorAll('pre'),
		settings = pre[0].innerText;

// evil dom write
var lastPre = document.getElementById('pos');

var numPossible = calcPos( settings );
numPossible = numPossible.toLocaleString('en-US');
numPossible = '<b>' + numPossible + '</b>\npossibilities';
lastPre.innerHTML = numPossible;

scripts

<script src="https://cdn.rawgit.com/alexbeletsky/toml-js/master/src/toml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.less

body { padding: 2% 0; font-family: monospace, mono-space; font-size: 13px; background: #111; color: lime; text-align: center;}
*, *:before, *:after {
  box-sizing: border-box;
}
@bg: darken(#311b92, 20);
body,html { height: 100%; }
body { background: linear-gradient(to top, darken(@bg,10), @bg); }
h1 { color: deeppink; font-weight: normal; font-size: 1.2rem; margin: 20px 0 30px; }
pre,textarea {
	display: inline-block;
	text-align: left;
	border: 1px dashed yellow;
	color: yellow;
	opacity: 0;
	&:nth-child(1n+2) { color: deeppink; margin-left: 2.1%; border-color: deeppink; }
	padding: 20px;
	vertical-align: top;
	transition: all 2s ease;
	cursor: default;
	min-width: 30%;
	max-width: 100%;
	position: relative;
	border-radius: 2px;
	line-height: 1.4;
	&:after {
		content: '$';
		line-height: 1;
		position: absolute;
		left: 20px;
		top: -7px;
		background: @bg;
		padding: 0 5px;
	}
	
	b {
		font-size: 40px;
		font-weight: normal;
	}
}

pre:hover, pre:focus {
	color: white;
	border-color: white;
	transition-duration: .3s;
}

pre:focus {
	outline: 0;
	border-color: cyan;
	&:after { color: yellow; }
}

body { overlow-x: hidden; }
section {
	display: table;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	border-spacing: 20px;
	pre {
		display: table-cell;
		width: 50%;
	}
}

@ease-out-back: cubic-bezier(0.2, 0.885, 0.320, 1);


// keyframes -----------------------------------------------------

@keyframes in {
	0% { transform: translateY(-100%) scale(1.5); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

// ---------


// loop -----------------------------------------------------

.div-loop (@i) when (@i > 0) {

	@stag: 150 * (@i - 1); // skip first
	pre:nth-child(@{i}){ animation-delay: ~"@{stag}ms"; }
	.div-loop(@i - 1);
}

@iterations: 30; // specify iteration count
.div-loop(@iterations); // execute loop

// --------


// apply animation -----------------------------------------------------

pre {
	opacity: 0;
	animation: in .5s forwards @ease-out-back;
	animation-delay: 2s;
}


@keyframes blink {
	0% { color: cyan }
	50% { color: deeppink }
	100% { color: yellow }
}

how do I apply this code as a selection to choose on Gekko? from cd gekko directory using ubuntu??
please help me by email madd72@gmail.com just incase I miss a notification to check this post.
thank you