Hi - I’m very new working with Electron.
Is it possible to insert a global variable list into my html select input? Where would I create the variable? How do I reference it?
Here is my main.js and index.html.
var app = require('app'); // Module to control application life.
var BrowserWindow = require('browser-window'); // Module to create native browser window.
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform != 'darwin') {
app.quit();
}
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 275,
height: 738,x:2000,y:0,
title: "Sunshine",
alwaysOnTop: "true"
});
// and load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.html');
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});
<!DOCTYPE html>
<html>
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sunlight</title>
<link rel="stylesheet" href="./css/jquery.flipster.min.css">
<link rel="stylesheet" href="./css/styles.css">
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<!-- SEO Meta
================================================== -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="distribution" content="global">
<meta name="revisit-after" content="2 Days">
<meta name="robots" content="ALL">
<meta name="rating" content="8 YEARS">
<meta name="Language" content="en-us">
<meta http-equiv="reply-to" content="">
<meta name="GOOGLEBOT" content="NOARCHIVE">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-tagsinput.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<!-- JS
================================================== -->
</head>
<body>
<script>
$(document).keydown(function(e) {
// ESCAPE key pressed
if (e.keyCode == 27) {
window.close();
}
});
</script>
<!-- HEADER START -->
<header>
<div class="header">
</div>
</header>
<!-- HEADER END -->
<!-- CONTAINER START -->
<section>
<div class="section">
<div class="spacing"></div>
<div class="getem"><p ID="getemtext">get em</p></div>
<div class="lightning"></div>
<div class="container">
<!-- form start -->
<form id="form"">
<div class="top_circle_content">
<div class="top_circle_content_img">
<div class="top_circle_content_box_icon"> <span></span></div></div>
<div class="calendar_top">
<label class="date_label">
<input type="text" value="SET REMINDER" placeholder="SET REMINDER" id="datepicker" name="dateVar" tabindex = "-1"><label>
<!-- <span id="datepicker">May.06/02/2016 30, 2016</span> -->
</div>
<div class="header_content_titel">
<h1>
NEW TASK</h1>
<div class="header_content_form">
<div class="header_content_form1">
<label>
Title:</label>
<input placeholder="What are you thinking about?" name="Description" id="description" autofocus onkeypress="return searchKeyPress(event);" />
</div>
<div class="header_content_form2_width">
<div class="header_content_form2">
<label>
Impact:</label>
<input placeholder="Will things change?" name="Impact" onkeypress="return searchKeyPress(event);" />
</div>
<div class="header_content_form2">
<label>
Effort:</label>
<input placeholder="How many hours?" name="Effort" onkeypress="return searchKeyPress(event);" />
</div>
</div>
<div class="header_content_form1">
<label>
Notebook:</label>
<!-- START SELECT -->
<span class="custom-dropdown custom-dropdown--white">
<select id="nname" name="clientVar" form="categoryform" class="custom-dropdown__select custom-dropdown__select--white" onkeypress="return searchKeyPress(event);">
<script>
var testVar=window.KeyboardMaestro.GetVariable( 'notebookList' )
</script>
</select>
<!-- END SELECT -->
</div>
</div>
</div>
</div>
<div class="add_details_content">
<a href="#" class="add_details_content_button">Add Details:</a>
<div class="context_div_bg">
<div class="context_content_form1">
<label>
Context:</label>
<input placeholder="Anything else you'd like to add?" name="Context" onkeypress="return searchKeyPress(event);" />
</div>
<div class="context_content_form2">
<label>
# Tags:</label>
<input type="text" value="" data-role="tagsinput" name="tagsVar" />
</div>
</div>
</div>
<div class="content_div_button">
<a id="prioritize" class="content_div_button_bottom" href="#" onclick="window.KeyboardMaestro.Submit('quick')">PRIORITIZE</a>
<p><a href="#" onclick="window.KeyboardMaestro.Submit('open')">
& open your note</a></p>
</div>
</div>
</form>
</div>
</section>
<!-- CONTAINER END -->
<!-- FOOTER START -->
<footer>
<div class="footer">
</div>
</footer>
<!-- FOOTER END -->
<br>
<br>
<br>
<div class="fixedbell"></div>
<div class="fixedline"></div>
<div class="dropdown_arrow"></div>
<div class="apostrophe"></div>
<div class="bottombar"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$(function () {
$("#datepicker").datepicker();
$(".top_circle_content").append($("#ui-datepicker-div"));
});
var settings = $('.add_details_content_button'),
menu = $('.context_div_bg');
settings.on('click', function () {
menu.fadeToggle('fast');
return false;
});
});
$('.add_details_content_button').click(function () {
$(this).toggleClass('active');
$('.container').toggleClass('nobgimage');
return false;
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
return false;
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
<!-- BUTTON LISTENER -->
<script>
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('prioritize').click();
return false;
}
return true;
}
</script>
</html>