How to trigger the rendering of a bokeh plot programatically? - javascript

I have a lot of plots on my page and I don't want them to fire all on page load, but trigger them as the user scrolls down, or after a while.
I use the components module, so I'm unsure where to put a setTimeout or something like that.
in Django view I have:
from bokeh.resources import CDN
from bokeh.embed import components
script, div = components(plot.make_box_plot(), CDN)
and then in tag:
{% if div %}
{{ div | safe }}
{% endif %}
{% if script %}
{{ script | safe }}
{% endif %}
Does bokeh have some api for this?
This doesn't work as I get a js syntax error:
<script>
window.plot_script = {{ script }}; // and then use it in a js file inside setTimeout
</script>

Related

How Do I Listen To And React To JavaScript Events In Shopware 6 Storefront

I am building a Shopware 6 JavaScript plugin for the storefront. I created a button and need to listen to it and react accordingly when it is 'Clicked'.
Below is my code which does not seem to work.
main.js file code below
//Resources\app\storefront\src\main.js
import TestClickPlugin from './testclick/testclick.plugin';
const PluginManager = window.PluginManager;
PluginManager.register('TestClickPlugin', TestClickPlugin, '.swp');
plugin file code below
//Resources\app\storefront\src\testclick\testclick.plugin.js
import Plugin from 'src/plugin-system/plugin.class';
export default class TemporaryWatermarkPlugin extends Plugin {
init() {
document.querySelector(".swp").addEventListener("click", this.logThis().bind(this));
}
logThis() {
console.log("It Works!!!!!");
}
}
And lastly, my twig file code below
//Resources\views\storefront\page\product-detail\buy-widget.html.twig
{% sw_extends '#Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
{% block page_product_detail_buy_inner %}
{{ parent() }}
{% block swp_block %}
<div>
<button class="swp">Click Me </button>
</div>
{% endblock %}
{% endblock %}
How do I get the function logThis() to run when clicked in the storefront.
Change
this.logThis().bind(this)
to
this.logThis.bind(this)
since you want to reference the function, not call it.
Also in the init function you may want to use this.el instead of document.querySelector(".swp") since you already registered the plugin for that element.

Flask - Component templates structure?

I've been experimenting with a Flask template structure to resemble a component workflow. This is inspired by Vue.
Some key ideas :
Each page is treated as a component
A component is just a folder containing all necessary files inside it (except ones that are common)
Each component is encourageg to have several HTML files to avoid large files, we will be using Jinja's include to "bundle" them
togheter
Avoid javascript, or at least, loading unnecessary javascript, each page will include only what's necessary
Here's an example :
The route for PageExample would be the following :
app.route('/example'):
return render_template('PageExample/html.html')
And PageExample/html.html :
{% extends 'base.html' %}
{% block content %}
<div class="tab" id="tab1">
{% include 'PageExample/tab1.html' %}
</div>
<div class="tab" id="tab2">
{% include 'PageExample/tab2.html' %}
</div>
{% endblock %}
PageExample/tab1.html (tab2 follows the same logic)
<!-- block header is in base.html -->
{% block header %}
{{ super() }}
<script src="{{url_for('components', 'PageExample/tab1.js')}}">
{% endblock %}
<div class="tab-content">
Some content here that uses the tab1.js javascript
</div>
So, what's the question ?
I have limited experience with Flask, so I'm not sure if this idea is sound, it seems hacky but it makes developing pages easier, especially with multiple people (the little javascript a page might need can be done in any way). Also increased loading speed by a ton.
Dos this work? Is this structure reccomended? Are there any flaws to it? What sort of problems could I run into? Any recommendation to do it better? Is this already done nowadays in Flask? I couldn't find any examples of a Flask app done this way (specially the Jinja stuff using lots of includes)
I'm currently not at my main computer, so I'll update this later if need be, but if your included html files referenced any data that is stored in the backend then you'd also need to make sure you reference the exact location there as well.
For example:
If you need the first name property from a User class it would be
{{ User.firstName }}
Not only that, but the tab template will also need to be supplied this User.firstName variable, which isn't done implicitly.
You will need to create what is called a Blueprint then a View and tell the view to make the User.firstName variable available to PageExample/tab1.html
tabs.py
import User
from flask import Blueprint, render_template
import """other flask dependencies needed"""
bp = Blueprint('index', __name__, url_prefix='/')
def tabData():
"""data to process"""
render_template("PageExample/tab1.html", User=User)
In that same tabs.py file, you can also write a view for tab2.html as well as html.html. Should be noted that I'm assuming that the contents of PageExample are for the index of the website and that they will all be rendered on that same page.
Also, It seems like your tabs will be in the content/body of the html but it will also render the blocks of base.html and add the defined scripts inline with the body of html.html. Instead, it should be referenced in the html.html file itself
html.html
{% extends 'base.html' %}
{% block header %}
{{ super() }}
<script src="{{url_for('components', 'PageExample/tab1.js')}}">
{% endblock %}
{% block content %}
<div class="tab" id="tab1">
{% include 'PageExample/tab1.html' %}
</div>
<div class="tab" id="tab2">
{% include 'PageExample/tab2.html' %}
</div>
{% endblock %}
with tab1.html being
<div class="tab-content">
Some content here that uses the tab1.js javascript
</div>
Obviously, this is just the surface of what you will need to know about flask. Think the bottom line is that it can work. Although I would suggest that your put all resources such as JS and CSS in a separate folder and reference those resources from those locations.
For more information on Flask and how you can utilise it, check out the Flask Tutorial here:
http://flask.pocoo.org/docs/1.0/tutorial/

Shopify - using if statements within js.liquid and scss.liquid files

I am trying to merge JS files together in 1 file, however I need to set conditions using the if statements within the js file.
I have created file.js.liquid but it does not seem to working; I added a test for example:
{% if template contains 'index' %}
console.log('homepage loaded');
{% endif %}
Example of what i am trying to do, of course have plenty i need to do.
{% if settings.the_simpsons_enabled and settings.simpsons_video_enable %}
// video popup
$(".video-popup").videoPopup();
{% endif %}
The conditional statements are also not working within scss.liquid files either:
{% if template contains 'index' or template contains 'collection' or template contains 'product' %}
#import url("{{ 'owl.carousel.scss' | asset_url }}");
{% endif %}
Any ideas why if would not be working or if its even possible? I assume it is being a liquid file.
The Liquid extension on such files like CSS or JS allows use of Liquid variables but not statements.
So {{ write_my_liquid_var_here }} will work. {% if liquid_statement %}do something{% endif %} won't.
Regarding Shopify and SASS
The following won't work as you can't use #import in Shopify's SASS files.
#import url("{{ 'owl.carousel.scss' | asset_url }}"); //This will not work
Regarding using conditional liquid statements in .js.liquid files
I don't know everything about this subject, but I do know the following two things.
1) Check out this thread and you'll see that this type of statement won't work because js files are parsed independent of normal liquid templates, so it would have no idea which template you're viewing.
{% if template contains 'index' %} //This will not work
A better place to put the above logic would be at the bottom of your theme.liquid file above the </body> tag. However this won't help you with what seems to be your goal of reducing HTTP requests by using one JavaScript fie.
2) However, you can access values in your settings_data.json file
{% if settings.the_simpsons_enabled and settings.simpsons_video_enable %} //This will work
I hope this helps

How to include properly Javascript using a Javascript Twig Template

I know how to access my assets, but i wanted to create a template working with Javascript and Twig, which would allow me to use Twig variables in my script.
For example, I have a template called 'details.html.twig', which extends a 'layout.html.twig':
{% extends '#AcmeBundle/Front/layout.html.twig %}
{# SOME CODE AND CONTENT #}
{% block page_script %}
{{ parent() }}
<script>
{# Part of my script #}
</script>
{% endblock page_script %}
All of this worked perfectly, but to be able to reuse some js code (using twig variables), I cut some part of my script and put I in an external template, called 'viewer.html.twig'. To be able to use it in my 'details.html.twig', I used:
{% include '#AcmeBundle/Front/Model/viewer.html.twig' %}
I put this line right after the {{ parent() }} one and before the <script> tag.
However, my script which used to work when directly written in 'details' template seems to be quite ignored right now.
If any of you could have a clue of what makes my template being included but skipped, or a way to include the template easier or properly, I'm open to all kind of observations.
G'day,
Jérémy
If you code a file containing only javascript you should name your file:
{% include '#AcmeBundle/Front/Model/viewer.js.twig' %}
Then Twig (as of 1.17) automatically defines its escaping strategy based on the extension.
See the twig docs and an example of js twig file in symfony.

Shopify - Load 'collections/all' page on my front page

How to load http://example.myshopify.com/collections/all content
to my shopify frontpage http://example.myshopify.com/
I figured out a way that I hardcode <script>window.location.href='collections/all'</script> on index.liquid, but I'm pretty sure thats' not a clean way.
and I try to copy whole collection.liquid's code to index.liquid, but it prompt me Liquid error: Array 'collection.all.products' is not paginateable. error and no product showing the index.liquid page.
Any idea how to load collections/all on shopify's front page?
I'm using Timber Framework as people recommend to start to build a theme
inside
In the Timber framework, you could change this line in index.liquid:
{% for product in collections.frontpage.products limit:4 %}
to:
{% for product in collections.all.products %}
Depending on how many products you have, you probably still want to limit how many are displayed, or paginate the output.
E.g.
{% paginate collections.all.products by 12 %}
{% for product in collections.all.products %}
...
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
You include this:
{% for product in collections.all.products %}
// here you have access to each product
{% endfor %}
This will loop all of your products.
You can review http://cheat.markdunkley.com/ what product variables you have access to in that loop.

Categories

Resources