Skip to content

Instantly share code, notes, and snippets.

@SH4DY

SH4DY/index.html Secret

Created October 30, 2014 11:57
Show Gist options
  • Save SH4DY/2253903fccac54771b9e to your computer and use it in GitHub Desktop.
Save SH4DY/2253903fccac54771b9e to your computer and use it in GitHub Desktop.
dart scripts don't get triggered =(
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CV Ramon Lopez</title>
<script src="packages/web_components/platform.js"></script>
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link rel="import" href="my_drawer.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
</head>
<body fullbleed vertical layout unresolved>
<my-drawer></my-drawer>
</body>
</html>
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';
var progressBars = querySelectorAll('paper-progress');
var animating = false;
void main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
startProgress(0);
querySelector('#infoGerman').onClick.listen(
(_) => toggleDialog('german'));
querySelector('#infoEnglish').onClick.listen(
(_) => toggleDialog('english'));
querySelector('#infoSpanish').onClick.listen(
(_) => toggleDialog('spanish'));
});
});
}
void toggleDialog(language) {
(querySelector('paper-dialog[language=$language]') as PaperDialog).toggle();
}
void startProgress(_) {
progressBars.forEach((progressBar){
progressBar.value = progressBar.min;
if (!animating) {
nextProgress(0);
}
});
}
void nextProgress(_) {
progressBars.forEach((progressBar){
animating = true;
if (progressBar.value < int.parse(progressBar.dataset['max-progress-value'])) {
progressBar.value += (progressBar.step != 0 ? progressBar.step : 1);
}else{
animating = false;
}
});
window.animationFrame.then(nextProgress);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="import" href="packages/paper_elements/paper_progress.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/paper_elements/paper_toast.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/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="stylesheet" href="../css/style.css">
<!-- Resource style -->
</head>
<body>
<section>
<paper-icon-button class="pink" onclick="document.querySelector('#toast1').show()" icon="check"></paper-icon-button>
<span>German</span>
<paper-progress class="pink red yellow" data-max-progress-value="100"></paper-progress>
<paper-button id="infoGerman" raised>More Info</paper-button>
</section>
<section>
<paper-icon-button class="purple" onclick="document.querySelector('#toast2').show()"
icon="check"></paper-icon-button>
<span>English</span>
<paper-progress class="purple" data-max-progress-value="70"></paper-progress>
<paper-button id="infoEnglish" raised>More Info</paper-button>
</section>
<section>
<paper-icon-button class="deep-purple" onclick="document.querySelector('#toast3').show()"
icon="check"></paper-icon-button>
<span>Spanish</span>
<paper-progress class="deep-purple" data-max-progress-value="70"></paper-progress>
<paper-button id="infoSpanish" raised>More Info</paper-button>
</section>
<paper-toast id="toast1" text="Danke!"></paper-toast>
<paper-toast id="toast2" text="Gracias!"></paper-toast>
<paper-toast id="toast3" text="Thank you!"></paper-toast>
<paper-dialog heading="German skills" language="german" transition="paper-dialog-transition-bottom">
<p>I'm born and raised in Austria, so I'm a native german speaker.</p>
<paper-button label="Got it!" affirmative autofocus></paper-button>
</paper-dialog>
<paper-dialog heading="English skills" language="english" transition="paper-dialog-transition-bottom">
<p>I'm passionate about english as a form to communicate with the world.</p>
<paper-button label="Got it!" affirmative autofocus></paper-button>
</paper-dialog>
<paper-dialog heading="Spanish skills" language="spanish" transition="paper-dialog-transition-bottom">
<p>I have spanish roots and therefore my spanish is fluent.</p>
<paper-button label="Got it!" affirmative autofocus></paper-button>
</paper-dialog>
<script type="application/dart" src="languages.dart"></script>
</body>
</html>
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input.dart';
import 'dart:html' show CustomEvent, Event, Node;
@CustomTag('my-drawer')
class MyDrawerElement extends PolymerElement {
MyDrawerElement.created(): super.created();
void attached() {
super.attached();
shadowRoot.querySelector('#navicon').on['tap'].listen((event) => toggleDrawer());
}
void toggleDrawer() {
shadowRoot.querySelector('#drawerPanel')
..togglePanel();
}
}
<link rel="import" href="packages/polymer/polymer.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_item.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_drawer_panel.html">
<link rel="import" href="packages/core_elements/core_icons.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/paper_elements/sampler_scaffold.html">
<polymer-element name="my-drawer">
<template>
<style>
body {
font-family: sans-serif;
}
sampler-scaffold{
background-image: url(background.jpg);
}
/* drawer is always visible on a wide screen
so menu button isn't required */
core-drawer-panel:not([narrow]) #navicon {
display: none;
}
</style>
<sampler-scaffold label="Resume of Ramón López">
<core-item label="About" url="chapters/about.html"></core-item>
<core-item label="Life" url="chapters/life.html"></core-item>
<core-item label="Education" url="education.html"></core-item>
<core-item label="Languages" url="chapters/languages.html"></core-item>
<core-item label="Skills" url="chapters/abilities.html"></core-item>
</sampler-scaffold>
</template>
<script type="application/dart" src="my_drawer.dart"></script>
</polymer-element>
name: polydart_resume
version: 0.0.1
author: Ramon 'SH4DY' Lopez
description: Curriculum vitae as a Polymer on Dart application
dependencies:
core_elements: '>=0.3.2 <0.5.0'
custom_element_apigen: ">= 0.1.1 <0.2.0"
polymer: ">=0.14.0 <0.16.0"
web_components: ">=0.9.0 <0.10.0"
paper_elements: ">=0.5.0 <0.6.0"
transformers:
- polymer:
entry_points:
- web/index.html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment