Develop Reference

How do I get multiple Modal instances to properly function in one page?

I'm creating a team page with modal popups for bio.
I'm using Hugo with Babel JS as the framework. There is no bootstrap on this project.
HTML
<div class="team-ui">
{{ with .Params.executive_team }}
{{ range . }}
{{ partial "components/modalTeammate.html" . }}
{{ end }}
{{ end }}
</div>
{{ with .Params.executive_team }}
{{ range . }}
{{ partial "components/modalTeammateBio.html" . }}
{{ end }}
{{ end }}
modalTeammate.html
<div class="teammate-card trigger" data-id="#myBio-{{ .modal_id }}" data-toggle="modal" data-target="myBio-{{ .modal_id }}" id="trigger">
<img src="{{ if .img_overwrite }}/uploads/headshot-{{ .img_overwrite }}.png{{ else }}/uploads/headshot-{{ .name }}.png{{ end }}" alt="{{ .name }} | {{ .job_title }}" loading="lazy" class="teammate-img">
<p class="teammate-name">{{ .name }}</p>
<p class="teammate-jobtitle">{{ .job_title }}</p>
</div>
modalTeammateBio.html
<div class="modal myBio-{{ .modal_id }}" tabindex="-1" role="dialog" aria-hidden="true" id="myBio-{{ .modal_id }}">
<div class="modal-content">
<div class="modal-body">
<div class="bio-box">
<div class="bio-box-sidebar">
<img src="{{ if .img_overwrite }}/uploads/headshot-{{ .img_overwrite }}.png{{ else }}/uploads/headshot-{{ .name }}.png{{ end }}" alt="{{ .name }} | {{ .job_title }}" loading="lazy" class="teammate-img">
<p class="teammate-name">{{ .name }}</p>
<p class="teammate-jobtitle">{{ if .job_title_long }}{{ .job_title_long }}{{ else }}{{ .job_title }}{{ end }}</p>
</div>
<div class="bio-box-content">
{{ with .bio }}
{{ range . }}
<p class="has-margin-bottom-half">{{ .p }}</p>
{{ end }}
{{ end }}
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
</div>
</div>
Current JS
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var videoID = trigger.getAttribute('data-id');
var closeButton = document.querySelector(".modal-close");
// YouTube Player API Reference
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoID
});
}
function toggleModal(e) {
if (!modal.classList.contains("is-active")) {
modal.classList.add("is-active");
player.playVideo()
}
else {
modal.classList.remove("is-active");
player.pauseVideo()
}
}
function windowOnClick(e) {
if (e.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
I know I'm missing something, but I'm not sure what else I can do.
I'm using this oringal code as an example and a base.
Watch the Video
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="modal-body" id="player">
Content
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<script src="/js/modal.js"></script>

Django adding eventlistener to a for...loop on template tag

I'm trying to add a event listener to a list of links created by django template tag.
It should take the list of objects with class div.cat-link and add an eventlistener to each one to display the matching id of div.cat-select
html
<div class="cat">
<div class="cat-links">
{% for t in tags %}
<div id="{{t|lower}}" class="cat-link">
<a class="cat" href="{% url 'list_product1' t %}">{{t}}</a>
</div>
{% endfor %}
</div>
</div>
<div class="cat-list">
{% for t in tags %}
<div class="cat-select" id="cat_{{t|lower}}">
{% for p in t.produto_set.all %}
<div class="cat-product">
<!--IMAGES-->
<div class='img'>
<amp-carousel lightbox controls autoplay delay="3000" width="250"
height="250" layout="responsive" type="slides">
{% for pic in p.images.all %}
<amp-img src="{{ pic.image.url }}" width="250" height="150"
layout="responsive" alt="{{ p.nome }}">
</amp-img>
{% endfor %}
</amp-carousel>
</div>
<!-- INFOS -->
<div class='infos-prod'>
<a class='cat-product' href="{% url 'detail_product' p.id %}">
<h3>{{p.nome}} </h3>
</a>
<a class='cat-product' href="{% url 'detail_product' p.id %}">
R$: {{ p.preco }}
</a>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
JavaScript:
<script id="cat-script" type="text/javascript" target="amp-script">
function Showing(one) {
var v1 = document.getElementById(one);
v1.style.display = "flex";
};
function Hiding(one) {
var v1 = document.getElementById(one);
v1.style.display = "none";
};
function Category() {
var v1 = document.getElementsByClassName('cat-link');
for (o in v1) {
var v2 = 'cat_' + v1[o].getAttribute('id')
v1[o].addEventListener('mouseover', function () { Showing(v2) });
v1[o].addEventListener('mouseout', function () { Hiding(v2) });
};
};
Category()
</script>
It should take the list of objects with class div.cat-link and add an eventlistener to each one to display the matching id of div.cat-select
I'm getting the error:
Uncaught TypeError: v1[o].getAttribute is not a function
and nothing is happening.

Looks like you're mixing up Python syntax with JavaScript.
First, try for (let o of v1) instead of for (o in v1).
Then, you're trying to access it by index, but that's not the kind of loop you're using. Try o.getAttribute('id').

How to make available the keyboard on a Otree application for cellular

I adapted a IAT (Implicit Association Task), I used this for an experiment using computers,but now I need to implement this IAT on tablets or cellulars,
This is how the IAT looks in a celullar:
The people get stuck on this screen, because they can't use the keyboard in their celullar to press E, I or SPACE. Someone can give an idea of how to make this works.
I have the next code in the models.
class Constants(BaseConstants):
name_in_url = 'iat'
players_per_group = None
LEFT, RIGHT = iat_order.LEFT, iat_order.RIGHT
FIRST, SECOND = iat_order.LEFT, iat_order.RIGHT
num_rounds = len(default_iat_blocks.iat_block_list)
LEFT_KEYCODE = 69
LEFT_KEY_NAME = '"E" (Presione E)'
RIGHT_KEYCODE = 73
RIGHT_KEY_NAME = '"I" (Presione I)'
META_KEYCODE = 32
META_KEY_NAME = 'Barra de Espacio'
OR = " o"
And this is the code that configure the keypresses.
const is_key_valid = (keycode) => {
return keycode === left_keycode || keycode === right_keycode;
};
const mark_wrong = () => {
$(".wrong_answer_mark").show();
};
const is_correct = (pressed_side, correct_side) => {
return (pressed_side === correct_side);
};
const which_side = (keycode) => {
if (keycode === left_keycode) return side['left'];
else if (keycode === right_keycode) return side['right'];
else return undefined;
};
This is my template
% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
{% endblock %}
{% block app_scripts %}
<script>
/*
All variables which take their values from django tag should be placed here
with ES5 format. I.e., use var rather than let or const.
*/
var round_number = {{ subsession.round_number }};
var iat_items = {{ iat_items|json }};
var correct_sides = {{ correct_sides|json }};
var side = {
'left': {{ Constants.LEFT }},
'right': {{ Constants.RIGHT }},
};
var left_keycode = {{ Constants.LEFT_KEYCODE }};
var right_keycode = {{ Constants.RIGHT_KEYCODE }};
var category = {
'main': {
'left': {{ left_main_category|json }},
'right': {{ right_main_category|json }},
},
'sub': {
'left': {{ left_sub_category|json }},
'right': {{ right_sub_category|json }},
}
};
var main_items = {{ main_items|json }}
var sub_items = {{ sub_items|json }}
var META_KEYCODE = {{ Constants.META_KEYCODE }}
var left_category_name = {{ left_category_name|json }};
var right_category_name = {{ right_category_name|json }};
var current_item;
</script>
<script src="{% static 'iat/lib/iat.js' %}?{{ seed_for_refresh_js_cache }}"></script>
{% endblock %}
{% block content %}
<div class="container">
{# <div class="row" id="progress"> </div>#}
<div class="row" id="mainbox">
<div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6"
style="" id="left_panel">
<h2 id = "left_key">
{{ Constants.LEFT_KEY_NAME }}
</h2>
<div id = "left_category">
{% if left_main_category %}
<h1 class="keyword main">
{{ left_main_category|safe|escape }}
</h1>
{% if left_sub_category %}
<h4>o</h4>
<h1 class="keyword sub">
{{ left_sub_category|safe|escape }}
</h1>
{% endif %}
{% elif left_sub_category %}
<h1 class="keyword sub">
{{ left_sub_category|safe|escape }}
</h1>
{% endif %}
</div>
</div>
<div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6" id="right_panel">
<h2 id = "right_key">
{{ Constants.RIGHT_KEY_NAME }}
</h2>
<h1 id = "right_category">
{% if right_main_category %}
<h1 class="keyword main">
{{ right_main_category|safe|escape }}
</h1>
{% if right_sub_category %}
<h4>o</h4>
<h1 class="keyword sub">
{{ right_sub_category|safe|escape }}
</h1>
{% endif %}
{% elif right_sub_category %}
<h1 class="keyword sub">
{{ right_sub_category|safe|escape }}
</h1>
{% endif %}
</h1>
</div>
</div>
<div class="row">
<div class="wrong_key_box col-lg-12 col-md-12 col-sm-12 col-xs-12">
Tipeaste la letra equivocada! <br>
En la izquierda. <span class="emph">{{ Constants.LEFT_KEY_NAME }}</span>,
En la derecha. <span class='emph'>{{ Constants.RIGHT_KEY_NAME }}</span> Presiona la tecla!
</div>
</div>
<div class="row_keyword">
<div id="keyword">
Cargando... Por favor espera.
</div>
</div>
<div class="next_block_box">
Buen trabajo oprime <span class="emph">{{ Constants.META_KEY_NAME }}</span> para continuar
</div>
</div>
<div class="wrong_answer_mark">×</div>
<form id="form">
<input type="hidden" name="category_table" id="category_table">
<input type="hidden" name="item_table" id="item_table">
<input type="hidden" name="keypress_table" id="keypress_table">
<input type="hidden" name="iat_table" id="iat_table">
</form>
{% endblock %}
Thanks in advance

What about adding a visible input field outside of the viewport ?
$('body').append("<input type='text' id='dummy'>");
$("#dummy").css({"position":"fixed","left":"120%"});
Then set a touch event as follows
$(document).on("touchstart",
() => $(document).find("#dummy").focus()
)
?
To summarize, put this
$( document ).ready(function() {
$('body').append("<input type='text' id='dummy'>");
$("#dummy").css({"position":"fixed","left":"120%"});
$(document).on("touchstart",
() => $(document).find("#dummy").focus()
)
});
here :
<script src="{% static 'iat/lib/iat.js' %}?{{ seed_for_refresh_js_cache }}"></script>
/* HERE */
{% endblock %}

Laravel, Javascript file is not found

#extends('template')
<script type="text/javascript" src="js/Chart.js"></script>
#section('title')
{{ $student->name }} - Student Detail
#endsection
#section('main')
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-xs-12" >
<header>
<h3><strong>{{ $student->name }}</strong> <img src="../img/kattis.png" alt="Kattis" width="20" height="15"> in CS3233 S1 AY 2020/21</h3>
<p><strong>SPE</strong>(ed) component: <strong>{{ $student->mc }} + {{ $student->tc }} = {{ $student->mc+$student->tc }}</strong><br>
<strong>DIL</strong>(igence) component: <strong>{{ $student->hw }} + {{ $student->bs }} + {{ $student->ks }} + {{ $student->ac }} = {{ $student->hw+$student->bs+$student->ks+$student->ac }}</strong><br>
<strong>Sum = SPE + DIL = {{ $student->mc+$student->tc }} + {{ $student->hw+$student->bs+$student->ks+$student->ac }} = {{ $student->mc+$student->tc+$student->hw+$student->bs+$student->ks+$student->ac }}</strong></p>
</header>
</div>
<div class="col-md-4 hidden-xs hidden-sm">
<img class="pull-right" id="photo" src="#if($student->avatar) {{Storage::url($student->avatar)}} #else ../img/locked.png #endif" alt="Photo of {{ $student->name }}" width="100" height="100">
<img class="pull-right" id="flag" src="../flags/4x3/{{strtolower($student->country)}}.svg" alt="{{$student->country}} Flag" width="100">
</div>
</div>
</div>
<div><canvas id="myChart" width="400" height="400"></canvas></div>
#endsection
#section('footer')
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'radar',
labels: ["MC", "TC", "HW", "Bs", "KS", "Ac"],
data: [$student->mc,$student->tc,$student->hw,$student->bs,$student->ks,$student->ac]
});
</script>
#endsection
In this file, called detail.blade.php, I include Chart.js. This file is located in public/js. detail.blade.php is in the directory with all the other views. In index.blade.php, I successfully referenced javascript files in the exact same way, for example
#section('footer')
<script type="text/javascript" src="js/highlight.js"></script>
#endsection
. But in detail.blade.php, it doesn't work. I get the error: Failed to load resource: the server responded with a status of 404 (Not Found) regarding Chart.js.
What is wrong?

<script type="text/javascript" src="/js/Chart.js"></script>
This line does not form part of any section so it's not included. You need to include it in some section (e.g. main or footer)

Try
<script src="{{ URL::asset('/js/Chart.js') }}"></script>
I think your js folder is in public if it's taht you gonna have acess to your script with this link.

Creating filters dynamically with ng-click and ng-repeat

Right now, I have a bunch of filters that use ng-click to filter some JSON data pulled in from a factory:
<ul class="brands">
<li><a href="#" ng-click="brandFilter = null">All</li>
<li>Apple</li>
<li>Samsung</li>
<li>HTC</li>
</ul>
<div ng-controller="phonesController">
<div class="phonesContent">
<article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
<img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
<p>{{ phones.name }}</p>
<p>Price: ${{ phones.price }}</p>
<p>No term: ${{ phones.no-term }}</p>
</article>
</div>
</div>
It works well, but I'm wondering how I can programmatically generate the links and use ng-click to filter. My best attempt so far:
<div ng-controller="phonesController">
<ul class="brands">
<li><a href="#" ng-click="brandFilter = null">All</li>
<li ng-repeat="phones in phoneData | unique: 'manufacturer'">{{ phones.manufacturer }}</li>
</ul>
<div class="phonesContent">
<article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
<img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
<p>{{ phones.name }}</p>
<p>Price: ${{ phones.price }}</p>
<p>No term: ${{ phones.no-term }}</p>
</article>
</div>
</div>
The links are generating properly and the data is showing up in the phonesContent div, but the filtering is not working. I keep getting a $parse:syntax error so something is wrong with my expression where brandFilter = { 'manufacturer' = phones.manufacturer } (I think).

Rob has pointed out why your code is not working, but I would say it's best to avoid having assignment statements in your directives. That way the interface to your controler is clearly defined.
I'd suggest adding a scope function setFilter() to your controller that sets the filter value:
$scope.setFilter = function (value) {
$scope.brandFilter = value ? { manufacturer: value } : null;
};
Then you can do this:
<li><a href="#" ng-click="setFilter(null)">All</li>
<li ng-repeat="phones in phoneData | unique: 'manufacturer'">
{{ phones.manufacturer }}
</li>