I'm making a small billiards game in THREE.js, and have opted to use Dat.Gui as a GUI library. I have a few small questions regarding the latter:
First Question: Can I make a class that returns the GUI?
Currently I have a mygui.js file where I put the code of the gui (the example code[1], let's say), and I include that in mygame.html before the main.js. However, all other objects (table, balls, lights, etc) are classes and I'd like to do that too with the GUI. When I place everything inside a
class MyGUI {
constructor() {
//javascript part of the example here
return gui;
}
}
and then call in main.js
var mygui = new MyGUI();
the GUI isn't showing up, but when I don't include the class and the line in main.js, it works. I have downloaded dat.gui.min.js and included it in the html.
Second Question: I want to change variables now and then based on when I call the gui's change function, but how would I go about that without classes (should that not work)?
Third Question: I want to use the GUI, only to display values. Users are not supposed to change it. Can I make the GUI read-only? (to be clear: changing the values in the GUI will not change gameplay, they're just textual representations of the state of the game)
Fourth Question: I want to remove the top part of the GUI (where you can load/save presets or something). How do I do that?
Progressive insights:
As linked by #prisoner849: Page 9 of the example/tutorial.
gui.add(param, 'theSetting').listen();
function updateTheSetting(newVal){ param.theSetting = newVal; }
When param.theSetting is updated, and the added param listen()s to it, a change in the param.theSetting will automatically update the GUI.
Don't use gui.remember( someParameters ) and the save part will dissapear.
Related
GTM up and running, main UA tag in place along with a ClickListener tag.
To reduce the number of macros, i use dataLayer variable Macros for event category, action, label, value & interaction, so they can be used for many rules and tags.
So i want to collect data from one link/button (Add to Fav), i add a rule to listen for the click using {{event}} equals gtm.click and {{Event Label}} equals Add_to_Fav (the label i push to the DL via onclick.
All good so far, but i need to create another UA tag (Track Type - event) that fires on the rule made previously. And this is my question, using this method seems to create many tags. If i have another 20 links that i want to collect data from, do i need to keep creating tags like this. Surely, this will affect page load speed with many tags firing on all pages.
Hope thats all clear.
If you need to retrieve the link text to use it as an event label you do not need many many event tracking tags, that would be horribly verbose. Instead you can use a custom javascript macro - the cool thing about them being that you can use existing macros inside your custom function.
If you create a click listener or link click listener this will create a few macros - one of them is {{element}}, which is the DOM element that received a click.
Now you create a macro of the type "custom java script", which must contain an anonymous function with a return value.
The barebones version of a function that retrieves the text of a clicked link would be
function() {
var el = {{element}};
return el.innerText;
}
(actually you do not need the variable assigment, you could use {{element}}.innerText directly).
You name the macro e.g. Linktext and use the macro {{Linktext}} in your single event tracking tag where it will dynamically be set to the value of the text of the clicked link (although you might want to check cross browser support for innerText, or maybe use innerHTML instead which serves in you use case probably the same purpose).
I am currently learning template variables and trying to understand how they work and what they mean.
I've done a test on {$category->id_cms_category}, which I put in cms.tpl and I get a result 9, but when I put this in header.tpl or blockcms.tpl (left column), there is no results, it's blank.
Can somebody please explain how this works and how I can get the same result in different .tpl file?
I think the question is really how to assign $category class to for example header.tpl. Is it something to do with controllers?
Why can't I use certain variables everywhere? How does this work? I would be very happy if somebody explain this.
I am also still learning smarty.
Unfortunately you're hitting a common problem with smarty, and particularly how it's implemented within Prestashop.
Smarty variables are very much limited in scope within Prestashop and their scope is determined by which point the portion of code they are assigned in is run. In the case of {$category->id_cms_category} it is assigned within the CMSController at the point in which the main content (important stuff in the middle) is rendered, and so will be available within cms.tpl as you have demonstrated.
The reason it isn't available in the left column or in the header is due to the order in which each of these sections are rendered. This will be:
a) Header (top of page rather than the html header block specifically), then
b) Left Column, then
c) "Main" Content, then
d) Right Column, then
e) Footer
You should find that if you were to reference it in the right column or the footer of the page, then magically it will be available to you (on CMS pages only of course as we're relying on the CMSController being run and assigning it a value).
If you need to reference things like the cms category within the header of the page (maybe to set a highlight on horizontal navigation) then you're going to need to fetch the value and assign it to smarty yourself. You can do this in one of two ways:
1) Write a module which is hooked into the header and assign your variable there
2) Override the FrontController class and assign the smarty variable there (e.g. in the init function)
An example of 2) which you could try is to create a file /override/classes/FrontController.php containing:
<?php
class FrontController extends FrontControllerCore
{
function init() {
parent::init();
$id_cms_category = (int)Tools::getValue('id_cms_category');
$id_cms_page = (int)Tools::getValue('id_cms');
self::$smarty->assign(array(
'my_cms_category_id' => $id_cms_category,
'my_cms_page_id' => $id_cms_page
)
);
}
}
The above should allow you to display {my_cms_category_id} and {my_cms_page_id} anywhere in your theme (because we're setting the smarty variables before everything else is rendered). For a non-cms page they should both be 0, my_cms_category_id should be set non-zero on cms category pages, and {my_cms_page_id} should be non-zero when on a specific cms page.
Hope this goes some way to making it a little clearer!
I have a window with a search form at the top and grid at the bottom.
User can enter values in the search form and click button - Get Records.
At the click of this button, I load the store of the grid by passing the values in form fields as parameters in following way:
store.load({
params:{
key1:Ext.getCmp('field1').getValue();
}
});
I tried giving parameters in the store proxy itself, but it unfortunately always takes up initial values (values when the form is rendered) and not the latest one entered by the users in the form fields. Following is the method I used for assigning values to params while creating the store:
extraParams:{
key1:Ext.getCmp('field1').getValue();
}
I wanted to seek guidance at two things:
a. While defining a store, can I ensure that store takes latest/current values from the form fields before querying server, so that I don't have to provide these values while calling load function?
This becomes more necessary as I have a paging toolbar at the bottom which carries a refresh button (along with next, last, previous, first icons for navigation).
Now, whenever user clicks at refresh (or any navigation icon), the store gets loaded without the query parameters.
Thus the second thing is:
b. If the answer of 'a' is that - Pass the latest values to parameters manually when calling load function - then how can I write the handler for 'refresh' button and navigation icons (that is, next, last, previous and first) in the paging toolbar, so that I can pass the latest form values to load function.
Thanks for any help in advance.
PS: I am using ExtJS 4.
yourStore.on('beforeload',function(store, operation,eOpts){
operation.params={
status:cmbStatus.getValue(),
value:txtBuscarPor.getValue(),
empresa:'saasd',
app:'dsads'
};
},this);
Related to your question (b) (and because you especially asked for this in the comments section):
I see only one standard way to hook into the PagingToolbar button handlers which is very limited.
Ext.toolbar.Paging fires a 'beforechange' event before it actually changes the current page. See API docs. A listener that returns false will stop the page change.
All other methods require extending Ext classes which wouldn't be a problem if the ComboBox would make it easier to use your own implementation of BoundList (which is the class that renders the dropdown) or pass through config parameters to BoundList resp. the paging toolbar.
I tried to bring this lack of flexibility up on the Ext message board once but was pretty much ignored.
A possible solution for this is to use 'beforeload' event of the store and provide the list of parameters in it. This way, whenever the store is loaded, then its beforeload event is fired and the values picked up are always the latest. Hope this helps someone looking for something similar.
I am going to create two pages. In one page I create a textfield and a button. In text field I am going to write something. After click it on the button the next page will appear. I can move page from one page to another by using Application.Loadlevel(). In the second page, I have only one text field. I want to show the previous textfield value on the next text field, which is located in another page. But I can't do that thing. Please help.
This is one solution:
You can access fields (variables) in one script file which are present in another script file, this can be done my making that variable global, this way you can access it in another javascript file.
You need to make the text in the textfield global, so that you can access it in another script file (javascript in your case).
Global can be declared like this:
// The static variable in a script named 'TheScriptName.js'
static var someGlobal = 5;
// You can access it from inside the script like normal variables:
print(someGlobal);
someGlobal = 1;
And it can be accessed in another javascript like this:
TheScriptName.someGlobal = 10;
Link to Global in Unity Script Reference
Here's something I don't know if it's possible, but here's my question:
My jQuery application has dynamically added entry fields. For example, a button "Add New Customer" adds a new entry form after the current one. So far, so good!
However, I find myself needing to add the mask functions I want to every newly created field, like this:
$("#customer_zipcode\\["+customerCount+"\\]).zipcodeMask(....);
zipcodeMask(...) is just an example function that checks to make sure the user's entered a correct zip code. Other similar masks for phone numbers, credit cards, etc. This part works great, but I have to set it for every newly created element I want to have a zip code mask.
I thought it would be awesome if there was something like .live() that could do the .zipcodeMask() call for every future instance of the zip code field.
I thought I'd make a class, such as "UseZipCodeMask", and do something like class="UseZipCodeMask" in every input field that needs a zip code mask.
When I do this:
$(".UseZipCodeMask").zipcodeMask(....);
This works fine - for every existing element that has this class. If I create a new field with this class, it's doesn't have the .zipcodeMask(...) function working.
Is there a way to make my zip code fields get .zipcodeMask(...) automatically set for it? It would clean up the code a bit, there's a lot of code that adds .zipcodeMask() and other related functions every time some new input fields are created.
Thanks very much!
What jquery version are you using?
You can use .delegate which means you would not have to "add the plugin" to newly created elements.