basically I have an electron app and i've added minimize/close butttons to it
on load the buttons work but after switching page with smoothstate they stop working
i've found various solutions (github faq, stackoverlow, etc) but none worked so far
the buttons html
<div id="title-bar-btns">
<button class="btn btn-outline" id="min-btn">—</button>
<button class="btn btn-outline" id="close-btn">X</button>
</div>
the main.js
$(function() {
'use strict';
var $page = $('#main'),
options = {
debug: !0,
prefetch: !0,
cacheLength: 4,
onStart: {
duration: 350,
render: function($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations()
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent)
initfunction();
}
},
onAfter: function($container, $newContent) {
initfunction();
}
},
smoothState = $page.smoothState(options).data('smoothState')
});
$(document).ready(function() {
initfunction();
});
function initfunction() {
(function() {
const {
BrowserWindow
} = require('electron').remote
function init() {
document.getElementById("min-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
window.minimize()
});
document.getElementById("close-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
window.close()
})
};
document.onreadystatechange = () => {
if (document.readyState == "complete") {
init()
}
}
})()
}
Related
this is a additional question to a (solved) question I had here
I have managed to get video for my project working on mobile & desktop using the component from this glitch project
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
var videoEl = this.el.getAttribute('material').src;
if (!videoEl) { return; }
this.el.object3D.visible = true;
videoEl.play();
}
});
however, on mobile devices, a separate component to play sound from an entity is not working (it works on chrome and safari)
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
let entity = document.querySelectorAll('[sound]');
for (let item of entity) {
item.components.sound.playSound();
}
}
});
I am really confused, I have tried a few separate solutions but nothing seems to be working.
The only time I can get audio to play on mobile is by using this component however it is unsuitable as it only plays audio when the individual objects/entities are clicked, and I need all my sounds to play at once, by a click on the document window.
any help would be appreciated !!
EDIT
here is a code snippet of my project to show issue
UPDATE
I have managed to get the component working on mobile but now spatial sound is broken:
JS:
AFRAME.registerComponent('singleton-sound', {
schema: {
src: {type: 'string'},
autoplay: {default: false},
distanceModel: {default: 'inverse', oneOf: ['linear', 'inverse', 'exponential']},
loop: {default: false},
maxDistance: {default: 10000},
on: {default: ''},
poolSize: {default: 1},
positional: {default: true},
refDistance: {default: 1},
rolloffFactor: {default: 1},
volume: {default: 1}
},
multiple: true,
init: function () {
var audio = document.querySelector(this.data.src);
window.addEventListener('click', playIfFree);
// window.addEventListener('mouseenter', playIfFree);
audio.addEventListener('ended', function () {
window.isPlaying = true
})
function playIfFree () {
if(!window.isPlaying) {
audio.play();
window.isPlaying = false
} else {
return false
}
}
}
});
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#overlay').style.display = 'flex';
document.querySelector('#overlay').addEventListener('click', function () {
let sounds = document.querySelectorAll('audio');
sounds.forEach (function (sound) {
sound.play();
sound.pause();
})
this.style.display = 'none';
})
});
HTML
<a-entity
gltf-model="#alice"
navigate-on-click="url: alice.html"
singleton-sound="
src: #aliceaudio;
volume: 1;
distanceModel: inverse;
rolloffFactor: 2"
position="-0.06 1.5 11.594"
rotation="90 180 0"
scale="0.4 0.4 0.4"
foo
></a-entity>
How can I make a To-Do List, and at 5 elements checked to show a button?
I have already done the To-Do list (in HTML and JavaScript - my code below ), but I don't know how can I write a code to show a button at 5 elements checked.
My JSFiddle:
https://jsfiddle.net/sd355qxp
My code (in HTML and JavaScript) :
<html>
<head>
<link rel="stylesheet" href="tomo.css">
<title>TOMO</title>
</head>
<body>
<h1>TOMO</h1>
<center>
<div id="todo-app">
<label class="todo-label" for="new-todo">What do you have to do today?</label>
<input type="text" id="new-todo" class="todo-input" placeholder="english homework">
<ul id="todo-list" class="count-this"></ul>
<div id="todo-stats"></div>
</div>
</center>
<script type="text/x-template" id="todo-item-template">
<div class="todo-view">
<input type="checkbox" class="todo-checkbox" {checked}>
<span class="todo-content" tabindex="0">{text}</span>
</div>
<div class="todo-edit">
<input type="text" class="todo-input" value="{text}">
</div>
<a href="#" class="todo-remove" title="Remove this task">
<span class="todo-remove-icon"></span>
</a>
</script>
<script type="text/x-template" id="todo-stats-template">
<span class="todo-count">
<span class="todo-remaining">{numRemaining}</span>
<span class="todo-remaining-label">{remainingLabel}</span> left.
</span>
<a href="#" class="todo-clear">
Clear <span class="todo-done">{numDone}</span>
completed <span class="todo-done-label">{doneLabel}</span>
</a>
</script>
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<script>
YUI().use('event-focus', 'json', 'model', 'model-list', 'view', function (Y) {
var TodoAppView, TodoList, TodoModel, TodoView;
TodoModel = Y.TodoModel = Y.Base.create('todoModel', Y.Model, [], {
sync: LocalStorageSync('todo'),
toggleDone: function () {
this.set('done', !this.get('done')).save();
}
}, {
ATTRS: {
done: {value: false},
text: {value: ''}
}
});
TodoList = Y.TodoList = Y.Base.create('todoList', Y.ModelList, [], {
model: TodoModel,
sync: LocalStorageSync('todo'),
done: function () {
return this.filter(function (model) {
return model.get('done');
});
},
remaining: function () {
return this.filter(function (model) {
return !model.get('done');
});
}
});
TodoAppView = Y.TodoAppView = Y.Base.create('todoAppView', Y.View, [], {
events: {
'#new-todo': {keypress: 'createTodo'},
'.todo-clear': {click: 'clearDone'},
'.todo-item': {
mouseover: 'hoverOn',
mouseout : 'hoverOff'
}
},
template: Y.one('#todo-stats-template').getHTML(),
initializer: function () {
var list = this.todoList = new TodoList();
list.after('add', this.add, this);
list.after('reset', this.reset, this);
list.after(['add', 'reset', 'remove', 'todoModel:doneChange'],
this.render, this);
list.load();
},
render: function () {
var todoList = this.todoList,
stats = this.get('container').one('#todo-stats'),
numRemaining, numDone;
if (todoList.isEmpty()) {
stats.empty();
return this;
}
numDone = todoList.done().length;
numRemaining = todoList.remaining().length;
stats.setHTML(Y.Lang.sub(this.template, {
numDone : numDone,
numRemaining : numRemaining,
doneLabel : numDone === 1 ? 'task' : 'tasks',
remainingLabel: numRemaining === 1 ? 'task' : 'tasks'
}));
if (!numDone) {
stats.one('.todo-clear').remove();
}
return this;
},
add: function (e) {
var view = new TodoView({model: e.model});
this.get('container').one('#todo-list').append(
view.render().get('container')
);
},
clearDone: function (e) {
var done = this.todoList.done();
e.preventDefault();
this.todoList.remove(done, {silent: true});
Y.Array.each(done, function (todo) {
todo.destroy({remove: true});
});
this.render();
},
createTodo: function (e) {
var inputNode, value;
if (e.keyCode === 13) { // enter key
inputNode = this.get('inputNode');
value = Y.Lang.trim(inputNode.get('value'));
if (!value) { return; }
this.todoList.create({text: value});
inputNode.set('value', '');
}
},
hoverOff: function (e) {
e.currentTarget.removeClass('todo-hover');
},
hoverOn: function (e) {
e.currentTarget.addClass('todo-hover');
},
reset: function (e) {
var fragment = Y.one(Y.config.doc.createDocumentFragment());
Y.Array.each(e.models, function (model) {
var view = new TodoView({model: model});
fragment.append(view.render().get('container'));
});
this.get('container').one('#todo-list').setHTML(fragment);
}
}, {
ATTRS: {
container: {
valueFn: function () {
return '#todo-app';
}
},
inputNode: {
valueFn: function () {
return Y.one('#new-todo');
}
}
}
});
TodoView = Y.TodoView = Y.Base.create('todoView', Y.View, [], {
containerTemplate: '<li class="todo-item"/>',
events: {
'.todo-checkbox': {click: 'toggleDone'},
'.todo-content': {
click: 'edit',
focus: 'edit'
},
'.todo-input' : {
blur : 'save',
keypress: 'enter'
},
'.todo-remove': {click: 'remove'}
},
template: Y.one('#todo-item-template').getHTML(),
initializer: function () {
var model = this.get('model');
model.after('change', this.render, this);
model.after('destroy', function () {
this.destroy({remove: true});
}, this);
},
render: function () {
var container = this.get('container'),
model = this.get('model'),
done = model.get('done');
container.setHTML(Y.Lang.sub(this.template, {
checked: done ? 'checked' : '',
text : model.getAsHTML('text')
}));
container[done ? 'addClass' : 'removeClass']('todo-done');
this.set('inputNode', container.one('.todo-input'));
return this;
},
edit: function () {
this.get('container').addClass('editing');
this.get('inputNode').focus();
},
enter: function (e) {
if (e.keyCode === 13) {
Y.one('#new-todo').focus();
}
},
remove: function (e) {
e.preventDefault();
this.constructor.superclass.remove.call(this);
this.get('model').destroy({'delete': true});
},
save: function () {
this.get('container').removeClass('editing');
this.get('model').set('text', this.get('inputNode').get('value')).save();
},
toggleDone: function () {
this.get('model').toggleDone();
}
});
function LocalStorageSync(key) {
var localStorage;
if (!key) {
Y.error('No storage key specified.');
}
if (Y.config.win.localStorage) {
localStorage = Y.config.win.localStorage;
}
var data = Y.JSON.parse((localStorage && localStorage.getItem(key)) || '{}');
function destroy(id) {
var modelHash;
if ((modelHash = data[id])) {
delete data[id];
save();
}
return modelHash;
}
function generateId() {
var id = '',
i = 4;
while (i--) {
id += (((1 + Math.random()) * 0x10000) | 0)
.toString(16).substring(1);
}
return id;
}
function get(id) {
return id ? data[id] : Y.Object.values(data);
}
function save() {
localStorage && localStorage.setItem(key, Y.JSON.stringify(data));
}
function set(model) {
var hash = model.toJSON(),
idAttribute = model.idAttribute;
if (!Y.Lang.isValue(hash[idAttribute])) {
hash[idAttribute] = generateId();
}
data[hash[idAttribute]] = hash;
save();
return hash;
}
return function (action, options, callback) {
var isModel = Y.Model && this instanceof Y.Model;
switch (action) {
case 'create': // intentional fallthru
case 'update':
callback(null, set(this));
return;
case 'read':
callback(null, get(isModel && this.get('id')));
return;
case 'delete':
callback(null, destroy(isModel && this.get('id')));
return;
}
};
}
new TodoAppView();
});
</script>
</body>
</html>
Can you use jQuery?
$(".todo-checkbox").change(function(){
if($(".todo-checkbox:checked").length > 4){
$("#yourButton").show();
}
});
It is possible to declare 2 more functions in main function like this ?
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: function() {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
and i receive the following error: Uncaught SyntaxError: Unexpected token ( on this line "show: function() {"
Remove the function from the right of the countdown (demo)
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
Next time, use jsFiddle to make a demo and click the "JSHint" button.
Actually, none of this will work. Unless you make countdown an object or you treat its sub-functions as proper functions.
Why: Under countdown, you created an instance of object not a function.
var jquery4u = {
countdown: function() {
show = function() {
console.log('show');
}
hide = function() {
console.log('hide');
}
jquery4u.countdown.show();
}
}
The above code is a valid code so it is possible. Unfortunately it will not return anything.
The proper way to do this is in this format:
var jquery4u = {
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
This will work. You can try it out by calling:
jquery4u.countdown.show();
I am building a simple tab system with angularjs, but I'm having trouble referring to this in the parent function. I know I might be misunderstanding some fundamentals, so please educate me:
js:
$scope.tabs = {
_this: this, // doesn't work
open: function(elem) {
$scope.tabsOpen = true;
if(elem)
$scope[elem] = true;
},
close: function() {
$scope.tabsOpen = false;
},
about: {
open: function() {
$scope.aboutOpen = true;
_this.notification.close(); // doesn't work
$scope.tabs.notification.close(); // works
},
close: function() {
$scope.aboutOpen = false;
}
},
notification: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
message: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
}
How about:-
$scope.tabs = getTab();
function getTab(){
var tab = {
open: function(elem) {
$scope.tabsOpen = true;
if(elem)
$scope[elem] = true;
},
close: function() {
$scope.tabsOpen = false;
},
about: {
open: function() {
$scope.aboutOpen = true;
tab.notification.close(); // Should work
},
close: function() {
$scope.aboutOpen = false;
}
},
notification: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
message: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
}
return tab ;
}
This way you don't rely on what this context would be which is anyways determined by the execution context, not where it is defined. Here you are just using a local tab object created in the local scope while calling the function getTab and instead of doing _this.notification.close(); you can just do tab.notification.close();, where tab is really the this that you are looking for there. A simple Demo
I got a div, that on mouseenter, is suppose to show another div. I'm not sure how to achive this in a plugin. This is my code and what I have tried so far.
Code: JsFiddle
<div class="hover-me"></div>
<div class="show-me"></div>
var Nav = {
hover_me: $('.hover-me'),
show_me: $('.show-me'),
init: function() {
Nav.toggle_display();
console.log('init');
},
toggle_display: function() {
Nav.hover_me.mouseenter(function() {
Nav.show();
});
Nav.hover_me.mouseleave(function () {
Nav.hide();
});
},
show: function() {
Nav.show_me.fadeIn();
},
hide: function() {
Nav.show_me.fadeOut();
}
};
I tried to do this, without any luck.
Nav.hover_me.mouseenter(function() {
Nav.delay(1000).show();
});
see Jimbo's comment:
var Nav = {
// [...]
timeoutId: undefined,
// [...]
};
Nav.hover_me.mouseenter(function() {
Nav.timeoutId = setTimeout(function() {
Nav.show();
}, 1000);
});
Nav.hover_me.mouseleave(function () {
if (Nav.timeoutId) { clearTimeout(Nav.timeoutId); }
Nav.hide();
});
SEE THE FIDDLE