launch Instabot on page-scroll

by Jimmy Ng

HTML

<div class="couponcode">First Link
    <span class="coupontooltip">Copied!</span> 
</div>

<p>API Key:
  <input data-bind="value: apiKey" />
</p>
<p>Event-Trigger:
  <input data-bind="value: eventTrigger" />
</p>
<p>Timer delay (seconds):
  <input data-bind="value: timerDelay" />
</p>

<textarea class="sdk-script" data-bind="text: instabotSnippet"></textarea>

CSS

.couponcode:hover .coupontooltip { /* NEW */
    display: block;
}


.coupontooltip {
    display: none;  /* NEW */
    background: #C8C8C8;
    margin-left: 28px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
}

* {
	  outline: none;
	}
	
	body {
	  padding: 15px;
	}
	
	* {
	  font: 16px "pf_dindisplay_proregular";
	  color: #505962;
	}
	
	h1 {
	  font: 30px "pf_dindisplay_probold";
	  margin: 20px 0;
	}
	
	hr {
	  margin: 15px 0;
	}
	
	input {
	  padding: 7px;
	  width: 400px;
	}
	
	select {
	  padding: 8px;
	  width: 350px;
	}
	
	.actions a {
	  display: inline-block;
	  padding: 0;
	  padding: 0 20px;
	  line-height: 35px;
	  border-radius: 7px;
	  color: #fff;
	  border: 1px solid #38a1e9;
	  background: #38a1e9;
	  text-decoration: none;
	  text-transform: uppercase;
	  text-align: center;
	  margin-bottom: 10px;
	}
	
	.actions a:hover {
	  opacity: 0.8;
	}
	
	.sdk-script {
	  border: 1px solid #a9bac2;
	  background-color: #f4f5f5;
	  padding: 20px;
	  width: 500px;
	  height: 100px;
	  font-size: 16px;
	  resize: none;
	}
	
	.field {
	  margin-bottom: 10px;
	}
	
	.field .field-title {
	  font: 16px "pf_dindisplay_proregular";
	  line-height: 16px;
	  margin-bottom: 5px;
	}
	
	.field .field-title .optional {
	  font: 14px "pf_dindisplay_prolight_italic";
	  text-transform: lowercase;
	}
	
	.field .field-content input,
	.field .field-content textarea {
	  width: 400px;
	}
	
	.field .field-content input[type='checkbox'] {
	  padding: 0;
	  width: 20px;
	  margin: 0;
	}
	
	.field .field-content textarea {
	  height: 150px;
	  padding: 7px;
	}
	
	.fields-group:before,
	.fields-group:after {
	  content: " ";
	  display: table;
	}
	
	.fields-group:after {
	  clear: both;
	}
	
	.fields-group .field {
	  float: left;
	  margin-right: 10px;
	}
	
	.endPoint {
	  margin-bottom: 30px;
	}
	
	.endPoint .title {
	  margin-bottom: 10px;
	  text-decoration: none;
	  display: block;
	}
	
	.endPoint .title span {
	  font: 22px "pf_dindisplay_probold";
	 ...

JavaScript

var AppViewModel = function(api, event) {
	  this.apiKey = ko.observable(api);
	  this.eventTrigger = ko.observable(event);
    this.eventTrigger = ko.observable(timerDelay);

	  this.instabotSnippet = ko.computed(function() {

	    string = '<scr' + 'ipt> type="text/javascript" src="//portal.roko.mobi/jsapi/rokoInstabot.js"> \napiKey: "' + this.apiKey() + '", \ninitialEvent: "' + this.eventTrigger() + '" ' + '\n</scr' + 'ipt>';
	    return string;

	  }, this);
	}

	// Activates knockout.js
	ko.applyBindings 
  (new AppViewModel("FILL-ME-IN", "FILL-ME-IN"));