Dart core element core-collapse

Question

I have problem with CoreCollapse in my app. I using Core elements. I write code which work for 1 hour. But now stopped work.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vinoteka</title>
        <script async src="packages/browser/dart.js"></script>
        <link rel="stylesheet" href="vinoteka.css">
        <link rel="import" href="packages/paper_elements/roboto.html">
        <link rel="import" href="packages/polymer/polymer.html">
        <link rel="import" href="packages/paper_elements/paper_button.html">
        <link rel="import" href="packages/paper_elements/paper_shadow.html">
        <link rel="import" href="packages/paper_elements/paper_tab.html">
        <link rel="import" href="packages/paper_elements/paper_tabs.html">
        <link rel="import" href="packages/paper_elements/paper_menu_button.html">
        <link rel="import" href="packages/paper_elements/paper_icon_button.html">
        <link rel="import" href="packages/paper_elements/paper_item.html">
        <link rel="import" href="packages/paper_elements/paper_checkbox.html">
        <link rel="import" href="packages/paper_elements/paper_dialog.html">
        <link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
        <link rel="import" href="packages/paper_elements/paper_toast.html">

        <link rel="import" href="packages/core_elements/core_collapse.html">
        <link rel="import" href="packages/core_elements/core_list_dart.html">
        <link rel="import" href="packages/core_elements/core_icon.html">
        <link rel="import" href="packages/core_elements/core_icons.html">
        <link rel="import" href="packages/core_elements/core_toolbar.html">
        <link rel="import" href="packages/core_elements/core_menu.html">
        <link rel="import" href="packages/core_elements/core_pages.html">
        <script async type="application/dart" src="vinoteka.dart"></script>
    </head>

    <body unresolved>

            <paper-tabs selected="1" flex noink>
                <paper-tab id="stoly_tab">
                    <core-icon icon="select-all"></core-icon>Stoly</paper-tab>
                <paper-tab id="nakup_tab">
                    <core-icon icon="shopping-cart"></core-icon>Nákup</paper-tab>
                <paper-tab id="trzba_tab">
                    <core-icon icon="account-balance"></core-icon>Tržba</paper-tab>
            </paper-tabs>

          <core-pages id="first" selected="1">
     <div> <div id="stoly">
            <table>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 1</paper-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 2</paper-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 3</paper-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 4</paper-item>
                    </td>
                </tr>
            </table>
        </div></div>
    <div>
    <core-collapse id="collapse1" >
            <paper-item class="black" id="toggleCollapse" horizontal center-justified layout>
                <core-icon icon="shopping-basket"></core-icon>Nový nákup</paper-item>
        </core-collapse>
        <core-collapse id="collapse" >
            <table id="nakup_table">
                <tr>
                    <td colspan="2">

                            <paper-item class="vino" flex raised>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>

                    <td colspan="2">

                            <paper-item class="vino" flex>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>
                    <td colspan="2">

                            <paper-item class="vino" flex>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>

                    <td colspan="2">

                            <paper-item class="vino" flex>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>

                </tr>
                <tr>
                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                </tr>
                <tr>
                    <td>

                            <paper-item class="vino" flex>1.5l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1.5l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1.5
                                </paper-item>
                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1.5l</paper-item>
                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                </tr>
                <tr>
                    <td>

                            <paper-item class="vino" flex>2</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>2l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>2l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>2l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                </tr>
            </table>


                <paper-item class="black" id="more" label="Více" horizontal center-justified layout></paper-item>



        </core-collapse>

        </div>

    <div>
        None





    </div>
  </core-pages>



        <paper-dialog heading="Dialog" transition="paper-dialog-transition-center" backdrop=true autoCloseDisabled=true>
            <p>Lorem ipsum dolor sit amet, doming noster at quo, nostrud lucilius rationibus ea duo. Vim no mucius dolores. No bonorum voluptatum vis, has iudicabit consectetuer ne. Nullam sensibus vim id, et quo graeci perpetua.</p>
            <p>Id qui scripta laboramus dissentiet, verterem partiendo vim at. Stet dissentiet ut mei. Iriure facilis eloquentiam pro eu, nec an esse inciderint. In meliore abhorreant sea. Eros nostro ocurreret at nec. Cu per regione persecuti.</p>
            <p>Lorem ipsum dolor sit amet, doming noster at quo, nostrud lucilius rationibus ea duo. Vim no mucius dolores. No bonorum voluptatum vis, has iudicabit consectetuer ne. Nullam sensibus vim id, et quo graeci perpetua.</p>
            <paper-button label="More Info..." dismissive></paper-button>

Nákup Dokončen <paper-button label="Decline" affirmative></paper-button>
            <paper-button label="Accept" affirmative autofocus></paper-button>
        </paper-dialog>

        <paper-toast id="toast1" text="Nákup Dokončen"></paper-toast>
        <div id="submit_bottom" class="hide"><paper-item class="lightBlue" id="submit" label="Dokončit objednávku" horizontal center-justified layout></paper-item></div>

            </body>

</html>

pubspec.yaml

dependencies:   
    browser: any   
    core_elements: any   
    paper_elements: any   
    polymer: any 
transformers:
    - polymer:
        entry_points:
          - web/vinoteka.html

and dart

    import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_dialog.dart';
import 'package:paper_elements/paper_item.dart';
import 'package:core_elements/core_collapse.dart';
import 'package:core_elements/core_dropdown.dart';
import 'package:paper_elements/paper_toast.dart';
import 'package:core_elements/core_pages.dart';
main () {
  initPolymer().run(() {
    (querySelector('#collapse1') as CoreCollapse).toggle();
    querySelector('#toggleCollapse').onClick.listen(
        (_) => nakup_menu());
    querySelector('#submit').onClick.listen(
        (_) => nakup_konec());
    querySelector('#more').onClick.listen(
        (_) => dalsi());
    querySelector('#stoly_tab').onClick.listen(
        (_) => stoly()); 
    querySelector('#nakup_tab').onClick.listen(
        (_) => nakup()); 
    querySelector('#trzba_tab').onClick.listen(
        (_) => trzba()); 

  });
}



void nakup_menu() {
  (querySelector('#collapse') as CoreCollapse).toggle();
  (querySelector('#collapse1') as CoreCollapse).toggle();
  (querySelector('#submit_bottom') as DivElement).classes.remove("hide");
}
void nakup_konec() {
  (querySelector('#collapse') as CoreCollapse).toggle();
  (querySelector('#collapse1') as CoreCollapse).toggle();
  (querySelector('#toast1') as PaperToast).show();
  (querySelector('#submit_bottom') as DivElement).classes.add("hide");
}
void dalsi() {
  (querySelector('paper-dialog') as PaperDialog).toggle();
  (querySelector('#more') as PaperItem).classes.add("hide"); 
}

void stoly() {
  (querySelector('#first') as CorePages).selected = 0;
  (querySelector('#submit_bottom') as DivElement).classes.add("hide");  
}
void nakup() {
  (querySelector('#first') as CorePages).selected = 1;
}
void trzba() {
  (querySelector('#first') as CorePages).selected = 2;
  (querySelector('#submit_bottom') as DivElement).classes.add("hide");
}

and error is enter image description here Command (querySelector('#collapse1') as CoreCollapse).toggle(); works if is not on start.

thx for help.

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

Looks like a timing issue.
This should work.

main () {
  initPolymer().then((zone) => zone.run(() {
    Polymer.onReady.then((_) {
      (querySelector('#collapse1') as CoreCollapse).toggle();
      querySelector('#toggleCollapse').onClick.listen(
          (_) => nakup_menu());
      querySelector('#submit').onClick.listen(
          (_) => nakup_konec());
      querySelector('#more').onClick.listen(
          (_) => dalsi());
      querySelector('#stoly_tab').onClick.listen(
          (_) => stoly()); 
      querySelector('#nakup_tab').onClick.listen(
          (_) => nakup()); 
      querySelector('#trzba_tab').onClick.listen(
          (_) => trzba()); 
    });
  }));
}

See also how to implement a main function in polymer apps

edited May 23 '17 at 12:12

Community

1
1

answered Dec 08 '14 at 16:30

Günter Zöchbauer

623,577
216
2,003
1,567

"This doesn't work" is not very expressive. Same behavior as your code or the some error, ... Can you please add the HTML of your `index.html` to your question? – Günter Zöchbauer Dec 08 '14 at 17:36
Please add your entire `index.html` and your `pubspec.yaml` to your question. – Günter Zöchbauer Dec 09 '14 at 17:16
Done, but index.html is long. – Deren Dec 09 '14 at 17:27
I updated my answer. You shouldn't need the `polymer.html` import in the entry page, only in your elements. I never had to use `Polymer.onReady` yet. Maybe this is because of your `async` attribute in the script tags, I haven't used them yet neither. – Günter Zöchbauer Dec 09 '14 at 17:30

Dart core element core-collapse

1 Answers1