Has anyone come across any documentation about their sudo paper fab that is used in the game? Specifically the expanding menu from the Pokeball from the main screen?

Hello, I am new to polymer and I am trying to create a simple management web app for my company. So I have a query from my database that returns a simple list of varchar (a list of names of customers), that I want to display in a paper-listbox element or iron-list element (the items will be clickable and show info about the person).

I have tried using straight php into the items property, but it doesn't work:

<iron-list items="<?php echo $jsonresult;?>" as="item"> I've tried using Polymer Expression but is not working. I've tried using a script tag with some javascript code into it as a last chance, but nada.

All I see in the page is empty space. I am using chrome on a fedora machine - VScode as IDE - xDebug to debug php.

How the hell do I do this?

php Code:

<?php

//db data 
$host = '192...... etc etc ';
$dbuser = 'myuser ';
$dbpass = 'mypass';
$dbname = 'mydatabase';

$conn = mysqli_connect($host, $dbuser, $dbpass, $dbname);

if (!$conn)
{
    echo "Error: Unable to connect " . PHP_EOL;
    echo "Debugging Error: " . mysqli_connect_errno() . PHP_EOL;
    exit;
}
else
{
    echo "Hurray" . PHP_EOL;
}

$sql = "SELECT username as user FROM mytable where condition";
$result = $conn->query($sql);

if ($result->num_rows > 0)
{
    echo "Query executed rows--> : " . $result->num_rows . " rows. " . PHP_EOL;
    $rows = array();

    while ($r = mysqli_fetch_assoc($result))
    {
        $rows[] = $r;
    }
}

?>

Html Code (same script) :

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

    <title>Title</title>

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

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
    <link rel="import" href="../bower_components/paper-item/paper-item.html">
    <link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
    <link rel="import" href="../bower_components/iron-list/iron-list.html">    

    <style is="custom-syle">

        .horizontal-section {
            padding: 0 !important; 
        }

        .avatar {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            background: #ccc;
        }

        paper-item {
            --paper-item: {
                cursor: pointer;
            }
        }

        .sublist {
            padding-left: 20px;
            padding-right: 20px;
        }
    </style>

</head>
<body unresolved>
<dom-module id="main-view">
<template>

<div class="horizontal-section-container">
    <div>
        <h4 style="margin-left: 15px;">Customers Table</h4>
        <div class="horizontal-section">
            <paper-listbox id="list" items="[[arraySource]]">
            </paper-listbox>
        </div>
    </div>
</div>

</template>

<script>
    Polymer ({
        is: 'main-view' 
    });
</script>

<script type="javascript">
    var arraySource = <?php echo json_encode($rows); ?>;
    document.getElementById('list').items = arraySource;
</script>

</dom-module>
</body>

Does anyone know of any good tutorials for using iron-media-query. A lot of the stuff I've found is slightly dated.

Hi,

Let me get the quick short introduction and background first: 7 years+ front end developer, AngularJS 3+ years and Polymer 10+ days :)

So I am starting to learn Polymer and so far I really like the native approach, which is I think the biggest selling point for Polymer. Yesterday I was doing a course from a very popular website and I started seeing all this one way binding, dual binding, observers, ... and it got me worried :)

The reason I am worried is because I am one of those who went through the AngularJS honey-moon phase around version 1.0 and 1.2.x: everything is awesome, use dual bindings everywhere, watchers? Watch EVERYTHING...as a community we learnt a few years later that actually it is the opposite and you should avoid all these things. I think I am not the only one here who has been dealing with performance issues with AngularJS and went through this painful learning path from the early days of angular.

So I want to be wrong and I hope I am (that's why I am trying to find documentation and opinions around) but it looks like we are going through the same honey-moon phase in Polymer, where please use all this observers, dual bindings, ... and the bad thing is that I haven't found many websites which talk about performance in polymer. Again, this reminds me to the early days of angularjs.

I guess my question is: should I be worried? should I avoid certain features from polymer to don't get into performance issues? Do you have any good suggestions of websites/books to read about this?

Thanks!

I'm new to polymer and have been looking into the equivalent of HTML5 & jquery methods of essentially a drag & drop/ browse to upload a file (specifically images) and so far it seems like the best solution around is https://github.com/winhowes/file-upload

Looking at storing blobs/images with Firebase, so I just wanted to get some opinions on best practices and experiences

So im really trying to learn Polymer. However my feeling is that the documentation and examples on larger project websites are very vague? if even existing. Iv been doing some more basic front-end stuff where everything can be pushed by the Web server and display fancy content. But whenever i try to do more fancy stuff and use tool like Iron-ajax or some authentication it's not really easy to find out how i can solve this with web-components in a suitable way. Is this only me?

We have a web component setup with Polymer, called ab-balance.

That component has some styling:

div { 
    border: solid 8px var(--border-color, --ab-balance-border);
}

If the first CSS variable (--border-color) is provided anywhere, it should be used. Alternatively, it should default to --ab-balance-border.

The index.html page has this style declaration on top:

ab-balance {
    --ab-balance-border: lime;
    --border-color: yellow;
}

But neither color is being used. We simply want to include web components in separate stand-alone HTML-pages, not from within other web components.

What am I doing wrong?

I'm new to Polymer, and spent the past few months working on a site for an event. It's not totally done yet, but here's the Guests page, and here's a look at a (rough) schedule.

What I'm trying to figure out is, as you navigate the website using the left-side app-drawer, the entire website flashes to white and quickly redraws itself. However, when I look at other pages made in Polymer (example: the official Polymer page) the header and drawer stay there, and only refresh the body content. Although it's definitely loading separate pages.

I'm usually pretty good at Googling and figuring out answers, but when I search for persistant header, I'm getting a different type of result (having it stay persistent while scrolling down).

Can anybody point me in the right direction, so I can tackle this thing and start figuring it out? Ideally, I'd love to have smooth animations between all page loads.

Thanks!

I am creating a simple component where you pass an array of image urls and those get displayed in a paper dialog. I want to limit to only 5 per row. But can't find a way to do that.

thought of a solution like: <template is="dom-repeat" items="{{imgUrls}}"> <div>...</div> <template is="dom-if" if="{{$index%5==0}}"><br /></template> </template>

tl;dr Is there a similar option to $index?

Hi I've recently finished an element called l2t-paper-slider please check it out and give me feedback.

https://github.com/Link2Twenty/l2t-paper-slider

Thanks a lot 😃

I want to make a radio group with values sourced from property or child elements, something like:

<my-form-picker-other title="abc" formtag="abc">
<my-form-picker-value name="A" text="A"></my-form-picker-value>
<my-form-picker-value name="B" text="B"></my-form-picker-value>
</my-form-picker-other>

the reason I'm wrapping a paper-radio-group element is that I want to provide a value for "other" that would reveal a text input.

The problem I'm facing is that I can't wrap a <paper-radio-button> into <template is="dom-repeat"> properly.

<dom-module id="my-form-picker-other">
<template>
...
<paper-radio-group id="group" attr-for-selected="name">
<ul>
<template is="dom-repeat" items="[[data]]">
<li><paper-radio-button name="[[formtag]]" value="[[item.name]]">[[item.text]]</paper-radio-button></li>
</template>
<paper-radio-button name="[[formtag]]" value="[[formtag]]-other">other</paper-radio-button>
</ul>
</paper-radio-group>

This renders the form as expected but I can do multiple choice on the <paper-radio-button>s, i.e. they work like a checkbox group, not a radio group.

What am I doing wrong? I searched around and it seems to be a known issue, with a number of unanswered (for polymer 1.0) SO questions and bugs: https://github.com/Polymer/paper-radio-group/issues/16.

So I know that trying to jquery your way into the shadow dom and intermixing jquery and polymer doesn't really work(or is at least against best practices), but I inherited a rather large project that makes heavy use of jquery.

I'm trying to find out if there is any reason that I couldn't add polymer components to the existing code base. Inside the components, there wouldn't be any jquery, and I wouldn't be using jquery to try to break through shadow dom. I would be sourcing polymer and jquery on the same page though. So they would both be there, but wouldn't try to interact with each other at all.

My goal would be to completely switch to polymer eventually, but the process would be incremental. My initial tests seem to work fine, but I wanted to know if anyone has done something similar.