I'm trying to use Cocos2d-html in a Django app.
From a HTML file, I need to refer to cocos2d.js, and from cocos2d.js I need to refer to another Javascript files.
Cocos2d.js is located in the [static folder]/js/
The other .js files that I need to refer from cocos2d.js are located in [static folder]/js/Platform and [static folder]/js/Src.
This is how I'm referring to cocos2d.js from the HTML file:
<script src={% static "js/cocos2d.js" %} ></script>
This is how I'm referring to the files from cocos2d.js
engineDir:'./Platform/HTML5/cocos2d/',
appFiles:[
'./Src/resource.js',
'/Src/MainLayer.js',
'./Src/GameOver.js',
'./Src/main.js'
But when I run the html file, the game doesn't show up. How can I refer properly to these files inside the Django environment?
I also tried to create a global var with StaticDir in js like this:
window.STATIC_URL = '{{STATIC_URL}}';
And then concatenate the values:
engineDir: STATIC_URL + 'js/Platform/HTML5/cocos2d/',
But, them I get this error in Chrome console
Uncaught SyntaxError: Unexpected token < :8000/herorush/%7B%7BSTATIC_URL%7D%7Djs/Platform/HTML5/cocos2d/platform/jsloader.js:2
Related
Currently I'm using Jekyll to build a website, with markdown and html files. If I want to use for example variables defined in the '_data' folder in html/md I can simply use {% for item in site.data.XX %}. My question is, what is the correct syntax when reaching Jekyll variables (e.g. site) in Javascript?
I am using frontmatter in my JS file. Should I include something there or do an import?
I tried:
console.log(site.collections);
console.log({{site.collections}});
But I just get the errors "Site is not defined" or "Uncaught SyntaxError: Invalid or unexpected token".
Any file with a front-matter will be processed by jekyll...
eg : anyfile-with-front-matter.js
---
title: my js file
---
console.log({{page.title}});
console.log({{site.description}});
..., except if it is "ignored".
By default :
any underscored folder is ignored (eg: _myfolder)
node_modules, vendor/bundle/, vendor/cache/, vendor/gems/ and vendor/ruby/ folders are ignored by default configuration
To make contained files available to process, you can add containing folders to include array in your _config.yml.
include:
- node_modules
- _myfolder
That's my guess.
I just found the problem (you solved it previously David):
Jekyll: liquid tag inside javascript
It seems like it prints out correctly (without syntax errors) when adding:
console.log({{ site.collections | jsonify }})
Jekyll is a static-site-generator that essentially runs just once. The only time it runs continuously is when you invoke either of the following commands: jekyll serve or jekyll build --watch.
On the other hand, JavaScript scripts are meant to be run on each request for a given page. Unless there's a server running with Jekyll, your scripts won't be able to use the so-called global variables.
However, that said, you can still use Jekyll variables to generate a static JS script.
For example, consider the following contents:
./_data/navigation.yml
- label: Home
url: "/"
- label: About Us
url: "/about/"
./_includes/script-template.html
<script>
{% for entry in site.data.navigation %}
console.log('{{ entry.label }}');
{% endfor %}
</script>
./test.html
---
---
<body>
{% include script-template.html %}
</body>
If you were to build the site containing above files, the generated html file ./_site/test.html will look like the following:
<body>
<script>
console.log('Home');
console.log('About Us');
</script>
</body>
I am using browserify to so that I can use the require feature in my javascript. I have a main.js that imports bigchaindb and bip39 using require.
const BigchainDB = require('./bigchaindb-driver')
const bip39 = require('./bip39')
I am using: browserify main.js -o bundle.js to generate the bundle.js file and I am ONLY including this in my index.html.
Last, inside of my index.html I using the onclick attribute to call a function createBook() and getting
createBook function is not defined
, however the function IS defined in my main.js. (Yes, the name is the same)
Index.html:
Script inclusion: <script src="scripts/bundle.js"></script>
onclick: <button id="sendButton" onclick="createBook()">Send!</button>
Why am I getting this error?
My app works fine when i deploy it and run it in a browser
I can successfully reach all my controllers/services. and they were linked together via submodules.
I used submodules to organize the states/routes better for ui-router. (Previously we had ALL of our states in the app dot js file. There were like 50. Now they're organized out into smaller modules).
app.js [Module file]
var phpApp = angular.module("phpApp",
[
"ui-router"
"phpApp.components" , ...
]).config(...).run(...);
components.js [Module file, contains states/routes]
var ComponentModule = angular.module("phpApp.components",
[
"ui-router"
"phpApp.components.user" ,
"phpApp.components.client"
...
]).config(...).run(...);
user.js [Module file, contains states/routes]
var UserModule = angular.module("phpApp.components.user",
[
"ui-router"
]).config(...).run(...);
user-controller.js // LOADS fine; is a controller.
angular.module('phpApp.components').controller('UserController', ....);
client-controller.js // does NOT load! Cannot find 'phpApp.components' module...
angular.module('phpApp.components').controller('ClientController', ...);
My index.html file loads the scripts in this order:
<script src="app.js"></script>
<script src="components/components-module.js"></script>
<script src="components/user/user-module.js"></script>
<script src="components/client/client-module.js"></script>
...
<script src="components/user/user-controller.js"></script>
<script src="components/client/**client-controller.js**"></script>
I dont get it. My client-controller loads AFTER my user-controller... yet it is not able to locate the proper module?
I get the error:
Uncaught Error: [$injector:nomod] Module 'phpApp.components'
is not available! You either misspelled the module name or
forgot to load it.
I am very confused and frustrated at this point. I am not sure where I am going wrong.
The answer lies in the karma config file (karma.conf.js by default)
The answer, as expected, was a simple one.
I had a rule to include all JavaScript files:
"app/app.js",
"app/components/**/*.js",
You will need to make sure you rewrite your load rules to load all module JS files first:
"app/app.js",
"app/components/**/*-module.js", <-- modules must load first
"app/components/**/*.js",
To help expound, i have my project set up where:
1) controllers are in their respective xxx-controller.js files,
2) ervices are in xxx-service.js files and
3) modules are in xxx-module.js files
I am using Sphinx to write some notes. I am using the Mathjax extension for Math in the notes. The default size of the math is little larger than I would like. On the Mathjax page I found that I can change that size by adding the following script to the HTML file.
MathJax.Hub.Config({
"HTML-CSS": {scale: 90}
});
So, I tried by adding the following in a .rst file:
.. raw:: html
<script type="text/javascript" >
MathJax.Hub.Config({
"HTML-CSS": {
scale: 90
}
});
</script>
==========
Objective
==========
To change math size \\( \\alpha \\).
The above works great for the math in that specific .rst file. But I want to do this for many different .rst files that are all part of the same sphinx document. Is it possible to do this without adding the above script to every .rst file?
Thank you for reading this and would appreciate if you can help.
This can be done with a template:
Create a folder called templates in the Sphinx project directory.
In conf.py, add
templates_path = ["templates"]
In the templates directory, create a file called layout.html with the following contents:
{% extends "!layout.html" %}
{%- block extrahead %}
<script type="text/javascript">
MathJax.Hub.Config({
"HTML-CSS": {
scale: 90
}
});
</script>
{% endblock %}
The <script> element will be included in the <head> of every generated HTML page.
The extrahead template block is empty by default. See the Sphinx templating documentation for details.
Another method:
Use the script_files setting in your overridden layout.html file.
If you want to avoid altering templates, you can just call Sphinx's add_js_file() from the setup() function in your Sphinx project's conf.py:
# conf.py
# ... other settings ...
def setup(app):
# (create a setup() function if you don't already have one;
# or add to the existing setup() ...)
app.add_js_file("mathjax-config.js")
Create the file "mathjax-config.js" in your _static source directory. (Check the conf.py html_static_path setting to verify the static directories, or define one if needed.) Sphinx will copy it into the output directory during the build.
There's also an add_css_file() method for css files. And both of them can take either relative paths to your static source dirs, or full urls to external resources.
Before Sphinx v1.8, these functions were called add_javascript() and add_stylesheet().
And in Sphinx v3.0 or later, there's an even simpler approach that avoids the need for an extra JS file.
In Sphinx 3.0 and later, the easiest way to add short snippets of JavaScript configuration is to call app.add_js_file(None, body="...JS code...") in your conf.py setup function. Example:
# In your Sphinx project's conf.py:
# 1. Add whatever JS code you need as a string constant.
# (This example is from the original question.)
MATHJAX_CONFIG_JS = """
MathJax.Hub.Config({
"HTML-CSS": {scale: 90}
});
"""
# 2. Create a setup() function if you don't already have one.
# (If you do, just add to your existing setup() function.)
def setup(app):
# 3. Tell Sphinx to add your JS code. Sphinx will insert
# the `body` into the html inside a <script> tag:
app.add_js_file(None, body=MATHJAX_CONFIG_JS)
With this approach, you don't need to create a separate, static JS file.
(The body param was added in Sphinx 3.0; with earlier versions you can
still use add_js_file() with a static JS file—see my
earlier answer. And for for anything longer than
a short config snippet, it's probably better to use an external file anyway.)
The simplest solution for a conf.py only configuration might be to use the MathJax extension's config value mathjax_config (Available since 1.8).
The value of mathjax_config is passed to MathJax.Hub.Config().
In your specific case, add the following to conf.py:
mathjax_config = {
"HTML-CSS": {"scale": 90},
}
I was following along to this post by Rebecca Murphey: http://blog.rebeccamurphey.com/scaffolding-a-buildable-dojo-application
I was substituting her file structure with my own.
Running the normal version of the scripts works fine, but the moment I compile them using the build tool, the script errors.
It's very likely a small problem with how the files are referenced via my Profile.js script but maybe someone here can help me get the settings correct before running the build tool so the compiled files will work as they should.
My file structure is as follows...
/www
/Assets
/Scripts
/Classes
build.sh
Init.js
Load.js
Profile.js
/Dojo
Dojo.js
/dojo-sdk
index.html
My index.html file has the following code...
<script>
var djConfig = {
modulePaths : {
'Integralist' : '../Classes'
}
};
</script>
<script src="Assets/Scripts/Dojo/Dojo.js"></script>
<script>
dojo.require('Integralist.Init');
</script>
...and the Init.js file has the following code...
dojo.provide('Integralist.Init');
dojo.require('Integralist.Load');
dojo.declare('MyApp', null, {
constructor: function(config) {
this.version = config.version || '1.0';
this.author = config.author || 'Unknown';
}
});
var myapp = new MyApp({
author: 'Mark McDonnell'
});
alert(myapp.author);
alert(myapp.version);
...lastly, the Load.js file has nothing in it but this...
dojo.provide('Integralist.Load');
alert('I\'m the Load.js file');
...and this all runs fine. When I load index.html I get 3 alert messages, brilliant.
The problem occurs when I try to run the build tool.
Via Mac OSX i locate the /Classes/ directory and run 'sh build.sh' and the build.sh file within the /Classes/ directory consists of the following code...
cd ../../../dojo-sdk/util/buildscripts
./build.sh profileFile=../../../Assets/Scripts/Classes/Profile.js releaseDir=../../../Assets/Scripts/Release
...now, after running the build tool I have a new /Release/ directory created within my /Scripts/ directory, this /Release/ directory consists of...
/www
/Assets
/Scripts
/Release
/Integralist
/Classes
Init.js
Init.js.uncompressed.js
/dojo
--loads of dojo related files--
...I then created a separate index file called index-release-version.html and changed the script code as suggested by the article, so it looks like this...
<script src="Assets/Scripts/Release/Integralist/dojo/dojo.js"></script>
<script>
dojo.require('Integralist.Init');
</script>
...from here I get the following error...
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught Error: Could not load 'Integralist.Init'; last tried '../Integralist/Init.js'
...and just for reference my Profile.js file that is used by the build tool consists of the following (and it's here I think the problem may be)...
dependencies = {
stripConsole : 'all',
action : 'clean,release',
optimize : 'shrinksafe',
releaseName : 'Integralist',
localeList : 'en-gb',
layers: [
{
name: "../Classes/Init.js",
resourceName : "Integralist.Init",
dependencies: [
"Integralist.Init"
]
}
],
prefixes: [
[ "Integralist", "../Classes" ]
]
}
Any help really appreciated as I desperately want to get my head around how Dojo works :-)
Thanks!
M.
I'd suggest working from the repo I linked to from my blog post (http://github.com/rmurphey/dojo-scaffold) -- I double-checked that it's definitely working :) -- and make changes to it until your changes break something, rather than trying to create your own structure right off the bat.
At a glance, I'm not 100% clear why you've got a Dojo.js file inside your directory structure, (is this the base Dojo lib or something else?), but the rest of Dojo is located elsewhere. If you use the structure I proposed, you can safely remove the djConfig declaration when using the built files, but as Dan mentioned, you may need to keep it if you're using a different configuration.
Do you have that djConfig variable in your index-release-version.html? It looks like Dojo is trying to find init.js at ../Integralist/Init.js, but you somehow need to tell it to look in ../Classes/Init.js
This is what your modulePaths : {'Integralist' : '../Classes'} was doing in your Index.html