These are chat archives for canjs/canjs

31st
Dec 2018
HypnoticApe3
@HypnoticApe3
Dec 31 2018 07:55
hey, just stopping by to ask a question about implementing a html code into a canjs code that is part of big Commerce . Anyone here think they can help me out?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 08:40
@HypnoticApe3 can-stache is HTML renderer
HypnoticApe3
@HypnoticApe3
Dec 31 2018 09:36
Sorry, i worded incorrectly. I mean, can someone help me implement a code i wrote in html 5 to work on a theme that is written in canjs.

products:
new:
limit: {{theme_settings.homepage_new_products_count}}
featured:
limit: {{theme_settings.homepage_featured_products_count}}
top_sellers:
limit: {{theme_settings.homepage_top_products_count}}
carousel: {{theme_settings.homepage_show_carousel}}
blog:
recent_posts:
limit: {{theme_settings.homepage_blog_posts_count}}


{{#partial "hero"}}
{{#if carousel}}
{{> components/carousel arrows=theme_settings.homepage_show_carousel_arrows}}
{{/if}}
{{{snippet 'home_content'}}}
{{/partial}}

{{#partial "page"}}

{{#each shipping_messages}}
    {{> components/common/alert-info message}}
{{/each}}

<div class="main full">
{{#if products.featured}}
{{> components/products/featured products=products.featured columns=theme_settings.homepage_featured_products_column_count}}
{{/if}}

{{#if products.top_sellers}}
{{> components/products/top products=products.top_sellers columns=theme_settings.homepage_top_products_column_count}}
{{/if}}

{{#if products.new}}
{{> components/products/new products=products.new columns=theme_settings.homepage_new_products_column_count}}
{{/if}}
</div>

{{/partial}}
{{> layout/base}}


<html>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js">

  </script>

  <script>

$(function() {
var overlay = $('<div id="overlay"></div>');

$(".flip-card").hide();
overlay.show();
overlay.appendTo(document.body);
$(".popup").show();
$(".buttonClose").click(function() {
$(".popup").hide();
overlay.appendTo(document.body).remove();
return false;
});
$(".closeX").click(function() {
$(".popup").hide();
overlay.appendTo(document.body).remove();
return false;
});
$(".button").click(function() {
$(".flip-card").show();
return false;
});
});

</script>

<body>

<div class='popup'>
<div class='cnt223'>
<p>
<img class="highLevelLight" src="https://i.imgur.com/G9WK4BN.png">
<img class="highLevelLight" src="https://i.imgur.com/cvgUoNd.png">
<img class="lowLevelLight" src="https://i.imgur.com/FhB0RB2.png">
<img class="crystalLight" src="https://i.imgur.com/WAMpM7g.png">
<img class="zoltar" src="https://i.imgur.com/KxoUG8F.png" width="300px">
<div>

<p>
<div>
<button class="button">Get your fortune!</button>
<button class="buttonClose">No, thank you.</button>
<div>

<div class="flip-card">
<div class="flip-card-inner" onclick="this.classList.toggle('flipped-card')">
<div class="flip-card-front">
<img class="zoltarCard" src="https://i.imgur.com/kcLRyZu.jpg">

</div>

<div class="flip-card-back">

<img class="zoltarCardBack" src="https://i.imgur.com/s3VWFnE.png ">
<div class="closeX">X</div>
</div>
</div>

</body>

            <style>

overlay {

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 0;
display: none;
}
.cnt223 a {
text-decoration: none;
}
.popup {
width: 100%;
margin: auto;
display: none;
z-index: 100;
}
.cnt223 {
width: 70px;
height: 100%;
margin: auto;
background: #0000;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p {
clear: both;
color: #555555;
/ text-align: justify; /
font-size: 20px;
font-family: sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
}
.cnt223 p a {
color: #d91900;
font-weight: bold;
}
.cnt223 .x {
float: right;
height: 35px;
left: 22px;
position: fixed;
top: -25px;
width: 34px;
}
.cn

Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 09:37
@HypnoticApe3 can you put it in a codepen or a gist please?
HypnoticApe3
@HypnoticApe3
Dec 31 2018 09:41
when i hit preview, the pop-up code i wrote executes but the canjs code doesn't. I'm not sure where to input the pop-up code to where it doesn't stop the canjs.
yeah, i felt posting the code was a bad idea but i already hit enter.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 09:42
No problem,
this is just the pop-up code. The other code is part of the theme build on big commerce
which is the top half.
that i posted above.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 09:46
Does this code work?
HypnoticApe3
@HypnoticApe3
Dec 31 2018 09:46
yeah.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 09:47
this is just for rendering the popup?
@HypnoticApe3 Ah the buttons are in the bottom
HypnoticApe3
@HypnoticApe3
Dec 31 2018 09:49
The html5 part is the pop-up. the canjs is for grabbing information to fill up a product column on the home page of the site. when I run it as written above, the pop-up works (give or take a few misplacement) but it completely neglects the canjs code
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 09:50
Where is the canjs code?
HypnoticApe3
@HypnoticApe3
Dec 31 2018 09:50
the first part of the code I posted above.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 09:51
can you put the full not working code in the codepen?
HypnoticApe3
@HypnoticApe3
Dec 31 2018 09:52
yeah, give me a sec.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 09:57
@HypnoticApe3 this is the link to a new empty pen, right?
sorry, forgot to save it
for some reason in pin it shows the text of the canjs code after closing the pop-up but on big commerce it doesn't show anything after closing.
oh, thanks for the help mohamed.
HypnoticApe3
@HypnoticApe3
Dec 31 2018 10:08
I mean im not sure how to write it in to where its not affecting the canjs part of the code.
if you can tell me what "---" this means in the canjs.
i've been trying to find it.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 10:11
@HypnoticApe3 There's no such thing in stache
HypnoticApe3
@HypnoticApe3
Dec 31 2018 10:16
humm.... strange. any advice to approach this? maybe a push in the right direction
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 31 2018 10:17
@HypnoticApe3 I wrote you on private chat
Gregg Roemhildt
@roemhildtg
Dec 31 2018 20:01
Hi guys, quick question for a tricky problem. I have a dropdown component that displays some additional content. How can I "hide" the dropdown content when anything other than the dropdown content is focused or clicked? IE if the user clicks outside the dropdown I want the dropdown.viewModel.active = false
Matthew Phillips
@matthewp
Dec 31 2018 20:02
set a event listener on the body that sets active to false
Also set an event listener on the dropdown that calls event.stopPropagation()
Gregg Roemhildt
@roemhildtg
Dec 31 2018 20:04
Is there a good "Canjs way" to listen to global events like that? So if the dropdown gets removed, it cleans up?
Matthew Phillips
@matthewp
Dec 31 2018 20:06
the events object seems fine to me
could even be within the same component as your dropdown, keeping it all self contained
Gregg Roemhildt
@roemhildtg
Dec 31 2018 20:07
okay so in the events:
'body click': function(){
    this.viewModel.active = false;
}
seems pretty straightforward
Matthew Phillips
@matthewp
Dec 31 2018 20:09
yeah!
but also an event on whatever the dropdown's outer element is
to do the stopPropagation()
Gregg Roemhildt
@roemhildtg
Dec 31 2018 20:09
Okay
the 'body click' event handler doesn't appear to be handling
Matthew Phillips
@matthewp
Dec 31 2018 20:15
i would do {window} click
Gregg Roemhildt
@roemhildtg
Dec 31 2018 20:15
ok
Perfect!
Thanks @matthewp !
Matthew Phillips
@matthewp
Dec 31 2018 20:20
great!