CODEWITHSUNDEEP
polymer-1.0
Marcos Galaviz
Marcos Galaviz

Reputation: 129

Why this component doesnt work if I use: polymer init app-drawer-template

Hi Im just a rookie with polymer, I hope this question doesnt sound stupid for you :(

I am triying to make a image gallery and I am using this idea: From this page

<dom-module id="simple-gallery" >
<script>
    HTMLImports.whenReady(function () {
    (function() {
         var current_index = 0;
         var image_length = 0;

         Polymer({
            is: "simple-gallery",
            ready: function() {
                    var images = Polymer.dom(this).querySelectorAll('img');
                    var container = this.$.links;

                    for (var img in images) {
                        images[img].addEventListener('click',this.load_popup);
                        container.appendChild(images[img]);
                    }
            },
            load_popup: function(e, detail, sender) {
                e.preventDefault();
                var links = document.getElementById('links');
                image_length = links.getElementsByTagName('img').length;

                var image_url = e.target.getAttribute('data-original');
                var modalbody = document.getElementsByClassName("modal-body")[0];
                var modal_img = modalbody.getElementsByTagName('img')[0];
                modal_img.setAttribute("src",image_url);
                var modal = document.getElementsByClassName("modal")[0];
                modal.style.display = 'block';

                current_index = parseInt(e.target.getAttribute('data-index').replace("s",""));
                return false;
            },
            next: function () {

              current_index = current_index + 1;
              if(current_index == (image_length + 1) ){
                  current_index = 1;
              }
              var current_image = document.querySelectorAll("[data-index='s"+current_index+"']");
              image_url = current_image[0].getAttribute('data-original');
              var modalbody = document.getElementsByClassName("modal-body")[0];
              var modal_img = modalbody.getElementsByTagName('img')[0];
              modal_img.setAttribute("src",image_url);
            },
            prev: function () {
              current_index = current_index - 1;
              if(current_index == 0 ){
                  current_index = image_length;
              }
              var current_image = document.querySelectorAll("[data-index='s"+current_index+"']");
              image_url = current_image[0].getAttribute('data-original');
              var modalbody = document.getElementsByClassName("modal-body")[0];
              var modal_img = modalbody.getElementsByTagName('img')[0];
              modal_img.setAttribute("src",image_url);
            },
            close: function () {
              var modal = document.getElementsByClassName("modal")[0];
              modal.style.display = "none";
            },

            });
    })();

        });
</script>

<template>

I realy dont understand why this code works fine if I use it as in the example, but if I create a proyect with: polymer init app-drawer-template and I use this as an element wich is called from one of the views I have an error :(

Uncaught ReferenceError: HTMLImports is not defined(anonymous function) @ simple-gallery.html:91

Surely I am not understanding well something but I dont know why, hope somebody has the time to give me a brief explanation :(

thanks a lot for your time.

Upvotes: 1

Views: 121

Answers (1)

shekoff
shekoff

Reputation: 46

I had the same issue so I have added following include in my main html:

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

Which worked for me.

Upvotes: 1

Related Questions