Develop Reference

Pop up window, or separate screen n Js

I am making a clicker game, it is very simple, and mostly just a learning process, for me to learn JavaScript. I have added a "Shop" button, attempting to have a separate screen, or a popup, to make a Shop place, where the player can shop for power-ups, using their "clicks" to purchase them, then they can close out the shop, and continue with their game.
This is what i tried:
I already had this variable set:
...
shopMenu = false;
...
This is everything else:
// Shop Button
if (mouse.dist(shop) < 40) {
shopColor = "firebrick";
shopMenu = true;
if (shopMenu == true) {
// This area is what I need help on, I don't know how to make a separate screen, to pop up, for a "shop".
}

You can have a shop div element in your html like
<div id="shop">
<p>Welcome to the shop</p>
</div>
and in your styling, have it hidden by default
#shop {
display: none;
}
Then back in your javascript,
if(shopMenu === true) {
const shopElement = document.getElementById('shop');
shopElement.style.display = 'block'
}

Value not changed back when canceled

This is in angular. There is a p-table that shows some data, like below:
When I clicked on the pencil icon to edit the table row, this pops up. I'll call this the edit dialog:
When I make any kind of edit in the text input box, the table row on p-table also change to the new value; example if I change the Download URL to "sss", the p-table also shows "sss" even though I haven't clicked the "Update" button yet. However, if I decide to cancel the change by clicking on the Cancel button, the new value ("sss") stays and the old value does not revert back. Any help on reverting it back is appreciated.
Here is how my code is currently set up: when I open the page the first time, it retrieves the data in the table from a database and display in the p-table. When I click on the pencil icon, it uses DynamicDialog to open the edit dialog that was created by another component.
Here's the typescript code to that it uses to open the edit dialog, which is called ModelDialogComponent:
this.ref = this.dialogService.open(ModelDialogComponent, {
data: {
record,
},
header: title,
width: '500px',
contentStyle: { 'max-height': '500px' },
baseZIndex: 10000,
dismissableMask: true,
})
ModelDialogComponent has five input text and two buttons. Each of the input text is create in this similar fashion. This is one of the html code for it:
<!--Applicationn Name-->
<div class="p-field p-grid" style="padding: 10px">
<label class="p-col-fixed" style="width: 150px">App Name </label>
<div class="p-col">
<input type="text" pInputText readonly [(ngModel)]="updateData.app" />
</div>
</div>
The Cancel button is tied to a function: (click) ="cancelUpdate()"
cancelUpdate() is this:
cancelUpdate(){
this.config.data.record = this.clonedVersion;
this.config.data.record = {...this.config.data.record};
this.updateData = this.clonedVersion;
this.updateData = {...this.updateData};
this.ref.close(this.clonedVersion);
}
Here is ModelDialogComponent init:
ngOnInit() {
this.updateData = this.config.data.record;
this.clonedVersion = {...this.updateData};
}
Canceling does not revert the value back to its original value, and how do I do that?
If you need more info, please let me know.

I figured out a way to get it to revert back. use onClose, and then get the original data from the database. This works good for now because the database is small. As it grows, I think I will need to figure out why cloning the table row and setting it back does not work. Here's my code for the solution I made:
this.ref.onClose.subscribe(() => {
this.messageService.add({
severity:'info',
summary: 'Canceled Editing',
detail:'User canceled edits',
sticky: false,
});
this.ToolVersionService.getAllVersion().subscribe((data) => {
this.rowData = data;
this.loading = false;
this.EditDetails = false;
},
(err) => {
console.error(err)
});
});

Change value in $rootScope

I have a table with a background like this: http://ast-ss.se/terrain/
You can navigate through the boxes by just clicking on them. I have also implemented the feature that random monsters, black dots, is generated at the map. You can navigate to the box and challenge the monster.
When I click on a box with a monster in it, I get the monster's specifications, lever, strength etc etc.
Here is the code snippet from my directive:
if(angular.element(this).hasClass('monster'))
{
var monster_info = angular.element(this).find("img").attr("title");
$http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
console.log(data);
$rootScope.$broadcast('mapInfo', data);
});
}
As you can see, I'm using $rootScope.$broadcast for this. Here is what I'm doing in my controller:
$scope.$on('mapInfo', function(event, mapInfo) {
$scope.mapInfo = mapInfo;
console.log($scope.mapInfo);
});
And here is my HTML:
<div id="leftcontent_top">
<ul>
<li>Vildmarken</li>
<li> | </li>
<li>Marknaden</li>
<li> | </li>
<li>Värdshuset</li>
</ul>
</div>
<div ng-bind-html="safeHtml(mapInfo)"></div>
<div ng-if="challengeMonster"><input type="submit" ng-click="doChallenge()" value="Utmana"></div>
This works fine. The information about the monster is printed out at the page. However, when you are in a box without a monster, I want to display information about the box you are in. Everytime you navigate to a new box, I want to print out information about that box. I have tried like this:
Directive:
angular.element('.click').click(function() {
if(angular.element(this).hasClass('monster'))
{
var monster_info = angular.element(this).find("img").attr("title");
$http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
console.log(data);
$rootScope.$broadcast('mapInfo', data);
});
}
else
{
test = angular.element(this).attr('id');
$rootScope.$broadcast('mapInfo', test);
angular.element('.click.dotted').empty();
angular.element('.click.dotted').removeClass('dotted');
if(!angular.element(this).hasClass('dotted'))
{
$rootScope.$broadcast('mapInfo', test);
angular.element(this).addClass('dotted');
angular.element(this).html($('<img src="images/dot.png">'));
}
}
});
As you can see, I have an else-statement with $broadcast, but the value of test is not printed out at the page. But if I click on a box with a monster in it, the information is printed out, but if I click in a empty box, nothing is printed out. As you can see in the controller, I run console.log($scope.mapInfo) and I can see that $scope.mapInfo contains the correct value.
Anyone?

Phonejs toolbar menu text shows twice

Recently, I use the Html5 framework: "phonejs" to develop a mobile project,
when I want to make a toolbar menusheet in empty views,
It seems menu text will show up twice in this demo:
http://phonejs.devexpress.com/Documentation/ApiReference/Widgets/dxToolbar/Configuration?version=13_2#menuItemRender
I use it like this:
homeToolbarItems = [
{ location: 'menu', text: 'Logout',clickAction:logout },
{ location: 'center', text: 'Subscribe Manage' }
];
and the menu shows 'Logout' twice, what can I do?​

It appears that the menuItemRenderer is triggering twice. Once on initial view and once on click. I was able to remedy this buggy behavior by added a Initialize flag to the first view render. Then if the flag was tripped do not render the menu items again on additional request. Example...
var menuInit = false;
var viewModel = {
menuItemRenderer: function(itemData, itemIndex, itemElement){
if(menuInit == false){
itemElement.dxButton({ text: "Execute \"" + itemData.text + "\" action" });
menuInit = true;
}
}}

It seems it's a bug, I just asked the devExpress Phonejs develop team. And it have been solve several days ago.
Here is the question link: http://www.devexpress.com/Support/Center/Question/Details/Q571866

jQuery conditionally change events depending on .html( 'string' ) values

http://jsfiddle.net/motocomdigital/Qh8fL/4/
Please feel free to change the heading if you think I've worded it wrong.
General
I'm running a wordpress site with multilingual control. And my menu/navigation is dynamic, controlled via the wordpress admin. The multilingual language plugin also changes the dynamic menu/navigation content, as well as page content.
My Contact button, which is in the dynamic navigation, opens a sliding menu using jQuery. Very simple animation using top css. The contact button is on the page twice, hence why I'm not using the .toggle for iterations. See jsFiddle.
Script
var $button = $(".contact-button"),
// var for button which controls sliding div
$slide = $("#content-slide");
// var for the div which slides up and down
$button.on('click', function () {
// function for when button is clicked
if ($button.html() == 'Close') {
// run this if button says 'Close'
$slide.stop().animate({ top: "-269px" }, 300);
// close slide animation
$button.html('Contact');
// change text back to 'Contact'
} else {
// else if button says Contact or anything else
$slide.stop().animate({ top: "0" }, 300);
// open slide animation
$button.html('Close');
// change text to 'Close'
}
});
Problem
Because I'm running multilingual on the site. The navigation spelling changes. See jsFiddle flag buttons for example. This is fine, the animation still runs OK, because it's using the button class 'contact-button'.
But because I'm using the .html to replace the text of the button to "Close" and then on the second iteration, back to "Contact" - obviously this is a problem for other languages, as it always changes to English 'close' and back to English 'Contact'
But my three languages and words that I need the iterations to run through are...
Contact - Close
Contatto - Cerca
Contacto - Chiudere
Can anyone help me expand my script to accommodate three languages, all my attempts have failed. The jsFiddle has the script.
The language functionality in the fiddle is only for demo purposes, so the iteration sequence can be tested from the beginning. I understand if you change the language whilst the menu is open (in the fiddle), it will confused it. But when the language is changed on my site, the whole page refreshes, which closes the slide and resets the sequence. So it does not matter.
Any pro help would be awesome thanks!!!
MY POOR ATTEMPT, BUT YOU CAN SEE WHAT I'M TRYING TO ACHIEVE
var $button = $(".contact-button"),
// Var for button which controls sliding div
$slide = $("#content-slide");
// Var for the div which slides up and down
$button.on('click', function () {
// function for when button is clicked
if ($button.html() == 'Close' || 'Cerca'|| 'Chiudere' ) {
// run this if button says Close or Cerca or Chiudere
$slide.stop().animate({ top: "-269px" }, 300);
// Close slide animation
$(function () {
if ($button.html(== 'Close') {
$button.html('Contact'); }
else if ($button.html(== 'Cerca') {
$button.html('Contatto'); }
else ($button.html(== 'Chiudere') {
$button.html('Contacto'); }
});
// Change text back to Contact in correct language
} else {
// else if button says Contact or anything else
$slide.stop().animate({ top: "0" }, 300);
// Open slide animation
$(function () {
if ($button.html(== 'Contact') {
$button.html('Close'); }
else if ($button.html(== 'Contatto') {
$button.html('Cerca'); }
else ($button.html(== 'Contacto') {
$button.html('Chiudere'); }
});
// Change text back to Close in the correct language
}
});
See my attempt script above which is not working on this jsFiddle.

Here's a working example: http://jsfiddle.net/Qh8fL/2/
When one of the language buttons gets clicked, it stores the strings for Contact and Close using jQuery's .data() method. Then, when the contact/close button gets clicked, it refers to those strings rather than having it hard-coded.
Here are the relevant lines of code:
$("#english").click(function() {
$(".contact-button").html('Contact').data('langTxt',{contact:'Contact',close:'Close'});
});
$("#spanish").click(function() {
$(".contact-button").html('Contatto').data('langTxt',{contact:'Contatto',close:'Close'});
});
$("#italian").click(function() {
$(".contact-button").html('Contacto').data('langTxt',{contact:'Contacto',close:'Close'});
});
if ($button.html() == 'Close') {
//...
$button.html($button.data('langTxt').contact);
} else {
//...
$button.html($button.data('langTxt').close);
}
All you need to do to modify the "close" text appropriately is by editing the close property inside the calls to data() that occur in each of the click events.

You should never depend on label strings ... especially in a multilingual environment. Instead you should use placeholders that you store in an attribute (maybe using .data()). Then you write your own setters for the labels depending on the value of the attribute.
var myLabels = {'close': ['Close', 'Cerca', 'Chiudere'], 'contact' : ['Contact', 'Contatto', 'Contacto']};
var currLang = 2; // to select italian
....
// to set the label
$button.data('mylabel', 'close');
$button.html(myLabels['close'][currLang]);
....
if($button.data('mylabel') == 'close') {
$button.data('mylabel', 'contact');
$button.html(myLabels['contact'][currLang]);
} else {
$button.data('mylabel', 'close');
$button.html(myLabels['close'][currLang]);
}