Skip to content

Instantly share code, notes, and snippets.

@z-a-f

z-a-f/index.html

Created January 19, 2015 23:31
Show Gist options
  • Save z-a-f/077b3e9ca7fe9958c9e1 to your computer and use it in GitHub Desktop.
Save z-a-f/077b3e9ca7fe9958c9e1 to your computer and use it in GitHub Desktop.
Download ZIP
Source for zafar.cc page
Raw
index.html
<!doctype html>
<html>
<head>
<title>Zafar's Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<!-- Add Polymer elements -->
<link rel="import" href="http://www.polymer-project.org/components/core-icon/core-icon.html">
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-item/paper-item.html">
<!-- Add custom elements -->
<link rel="import" href="elements/main-scaffold/main-scaffold.html">
<link rel="import" href="elements/x-trigger/x-trigger.html">
<link rel="import" href="elements/zaf-dropdown/zaf-dropdown.html">
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<main-scaffold label="I'll change the logo later :)"
logosrc="images/lockup.svg">
<core-item icon="favorite" label="Welcome" url="pages/UnderConstruction/index.html"></core-item>
<!-- paper-item><core-item icon="favorite" label="Welcome" url="pages/Welcome/index.html"></core-item></paper-item -->
<core-submenu icon="work" label="Work and Education" selectedItem="{{subItem}}">
<core-item label="Publications" url="pages/UnderConstruction/index.html"></core-item>
<core-item label="Courses" url="pages/UnderConstruction/index.html"></core-item>
<core-item label="Resume" url="pages/UnderConstruction/index.html"></core-item>
</core-submenu>
<core-submenu icon="explore" label="Explore experiments" selectedItem="{{subItem}}">
<core-item label="String 2" url="pages/UnderConstruction/index.html"></core-item>
</core-submenu>
<core-submenu icon="account-circle" label="About me..." selectedItem="{{subItem}}">
<core-item label="Let me introduce" url="pages/UnderConstruction/index.html"></core-item>
<core-item label="Resume" url="pages/UnderConstruction/index.html"></core-item>
<core-item label="people.bu.edu/zafar" url="http://people.bu.edu/zafar/"></core-item>
</core-submenu>
<core-item label="Contact information" icon="mail" url="pages/UnderConstruction/index.html"></core-item>
<paper-item>
<a href="#null" layout horizontal center>(c) Zafar :)</a>
</paper-item>
</main-scaffold>
<div id="right-footer">
<zaf-dropdown halign="right">
<paper-icon-button
src="images/icons/github-32px.png"
onclick="openURL('//github.com/zafartahirov/zafar.cc', '_blank')"></paper-icon-button>
<paper-icon-button
icon="polymer"
onclick="openURL('//www.polymer-project.org', '_blank')"></paper-icon-button>
</zaf-dropdown>
</div>
</body>
<script>
function openURL(url, target) {
window.open(url, target);
}
</script>
</html>
Raw
main-scaffold.css
/*
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
#drawerPanel, [drawer] {
background-color: #eee;
}
[drawer] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
[main] {
height: 100%;
}
core-toolbar {
background-color: #5264ae;
color: #fff;
font-size: 20px;
font-weight: 400;
}
core-toolbar.medium-tall {
height: 144px;
}
core-toolbar::shadow #bottomBar {
height: 80px;
}
.main-label {
padding: 0 0 20px 60px;
}
/* menu */
core-menu#menu {
padding: 8px 0;
margin: 0;
}
/* menu item */
polyfill-next-selector { content: 'core-menu#menu core-item'; }
::content core-item, ::content core-submenu::shadow core-item {
height: 56px;
padding-left: 60px;
font-size: 15px;
color: #444;
font-weight: normal !important;
}
polyfill-next-selector { content: 'core-menu#menu core-item.core-selected'; }
::content core-item.core-selected {
background-color: #dedede;
}
polyfill-next-selector { content: 'core-menu#menu paper-item'; }
::content paper-item, ::content core-submenu::shadow paper-item {
height: 56px;
padding-left: 60px;
font-size: 15px;
color: #444;
font-weight: normal !important;
}
polyfill-next-selector { content: 'core-menu#menu paper-item.core-selected'; }
::content paper-item.core-selected {
background-color: #dedede;
}
/* card */
#card {
display: block;
margin: 64px 120px 60px 5px;
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px;
overflow: hidden;
}
#card[hidden] {
display: none;
}
#card.move-up {
transition: -webkit-transform 0.38s cubic-bezier(0.4, 0.0, 0.2, 1);
transition: transform 0.38s cubic-bezier(0.4, 0.0, 0.2, 1);
}
polyfill-next-selector { content: '.sourceButton';}
::content .sourceButton {
position: absolute;
z-index: 1;
}
polyfill-next-selector { content: '.sourceButton:not(.fallback)';}
::content .sourceButton:not(.fallback) {
background-color: #fcfcfc;
color: #666464;
bottom: -28px;
right: 24px;
}
polyfill-next-selector { content: '.sourceButton.fallback';}
::content .sourceButton.fallback {
right: 24px;
top: 13px;
}
polyfill-next-selector { content: '#drawerPanel[narrow] .sourceButton:not(.fallback)';}
#drawerPanel[narrow] ::content .sourceButton:not(.fallback) {
right: 8px;
}
polyfill-next-selector { content: '#drawerPanel:not([narrow]) .menuButton';}
#drawerPanel:not([narrow]) ::content .menuButton {
display: none;
}
.element-label {
height: 80px;
line-height: 80px;
padding-left: 24px;
background-color: #fff;
letter-spacing: 0.05em;
font-size: 24px;
font-weight: 400;
color: #5265a2;
}
#frame {
display: block;
width: 100%;
min-height: 600px;
border: none;
}
/* narrow layout */
#drawerPanel[narrow] [main] {
background-color: #fff;
}
#drawerPanel[narrow] #card {
margin: 0;
box-shadow: none;
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
}
#drawerPanel[narrow] #frame {
position: absolute;
min-height: 100%;
}
#drawerPanel[narrow] #frameContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
#scaffoldToast {
right: 10px;
left: auto;
padding-right: 60px;
}
#logo-container {
top: 50px;
bottom: auto;
}
/* FAB */
.fab {
position: relative;
display: inline-block;
width: 56px;
height: 56px;
border-radius: 50%;
color: #fff;
overflow: hidden;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.fab.red {
background-color: #d23f31;
}
.fab.blue {
background-color: #4285f4;
}
.fab.green {
background-color: #0f9d58;
}
.fab:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}
.fab > core-icon {
margin: 16px;
/*width: 32px;
height: 32px;*/
}
.fab > core-icon::shadow path {
fill: #fff;
}
/* Links */
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
text-decoration: none;
}
a:active {
color: #CCCCCC;
text-decoration: none;
}
Raw
main-scaffold.html
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
This is a modified `sampler-scaffold` that I will be changing as time progresses.
~Zafar
VERSION HISTORY
12/28/2014 Changed the `source` button to act as `open new window`; added tooltip
-->
<!--
`main-scaffold` provides a responsive layout for elements sampler.
Exampler:
<main-scaffold label="HTML Input Elements">
<core-item label="String" url="demos/string.html"></core-item>
<core-item label="Checkbox" url="demos/checkbox.html"></core-item>
<core-item label="Radio" url="demos/radio.html"></core-item>
<core-item label="Range" url="demos/range.html"></core-item>
<core-item label="Color" url="demos/color.html"></core-item>
</main-scaffold>
Use `label` to set the sampler label and `responsiveWidth` to change the layout
of the scaffold.
@element sampler-scaffold
@homepage github.io
-->
<link rel="import" href="http://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon/core-icon.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/core-tooltip/core-tooltip.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-toast/paper-toast.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-ripple/paper-ripple.html">
<polymer-element name="main-scaffold" attributes="label logosrc responsiveWidth">
<template>
<link rel="stylesheet" href="main-scaffold.css">
<style shim-shadowdom>
core-tooltip.fancy::shadow .core-tooltip {
opacity: 0;
-webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
core-tooltip.fancy:hover::shadow .core-tooltip,
core-tooltip.fancy:focus::shadow .core-tooltip {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>
<core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="320px" responsiveWidth="{{responsiveWidth}}">
<core-header-panel id="mainHeaderPanel" main mode="{{narrow ? 'waterfall' : 'cover'}}" shadow>
<core-toolbar class="{{ {'medium-tall' : !narrow} | tokenList }}">
<content select=".menuButton" on-tap="{{togglePanel}}">
<core-icon-button class="menuButton fallback" icon="menu"></core-icon-button>
</content>
<div hidden?="{{!narrow}}">{{item.label}}</div>
<content select=".sourceButton" on-tap="{{viewSourceAction}}">
<div class="sourceButton fallback">
<core-tooltip label="Open in new window" class="fancy">
<!-- core-icon-button icon="launch"></core-icon-button -->
<div class="fab red">
<core-icon icon="launch"></core-icon>
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
</div>
</core-tooltip>
</div>
</content>
</core-toolbar>
<div id="card" on-transitionend="{{cardTransitionDone}}" hidden?="{{!item}}">
<div class="element-label" hidden?="{{narrow}}">{{item.label}}</div>
<div id="frameContainer">
<iframe id="frame" on-load="{{frameLoaded}}"></iframe>
</div>
</div>
</core-header-panel>
<core-header-panel drawer>
<core-toolbar class="{{ {'medium-tall' : !narrow} | tokenList }}">
<div class="bottom main-label fit">
<div flex hidden?= {{narrow}} class="logo-container" center horizontal>
<a href="/"><img src={{logosrc}}></a>
</div>
<div><a href="/">{{label}}</a></div>
</div>
</core-toolbar>
<core-menu id="menu" selectedItem="{{selectedMenu}}" on-core-select="{{menuSelect}}">
<content></content>
</core-menu>
</core-header-panel>
</core-drawer-panel>
<paper-toast id="scaffoldToast" class="capsule" text=""></paper-toast>
</template>
<script>
Polymer('main-scaffold', {
/**
* When the browser window size is smaller than the `responsiveWidth`,
* `sampler-scaffold` changes to a narrow layout. In narrow layout,
* the drawer will be stacked on top of the main panel.
*
* @attribute responsiveWidth
* @type string
*/
responsiveWidth: '860px',
/**
* Sampler label.
*
* @attribute label
* @type string
*/
ready: function() {
this.boundResizeFrame = this.resizeFrame.bind(this);
window.addEventListener('resize', this.updateFrameHeight.bind(this));
window.addEventListener('hashchange', this.parseLocationHash.bind(this));
},
domReady: function() {
this.async(function() {
this.parseLocationHash();
}, null, 300);
},
parseLocationHash: function() {
var route = window.location.hash.slice(1);
for (var i = 0, item; item = this.$.menu.items[i]; i++) {
if (item.getAttribute('tag') === route) {
this.$.menu.selected = i;
return;
}
}
this.$.menu.selected = this.$.menu.selected || 0;
},
menuSelect: function(e, detail) {
if (detail.isSelected) {
this.item = detail.item;
if (this.item.children.length) {
this.item.selected = 0;
}
this.item.tag = this.item.getAttribute('tag');
var url = this.item.getAttribute('url');
this.$.frame.contentWindow.location.replace(url);
window.location.hash = this.item.tag;
if (this.narrow) {
this.$.drawerPanel.closeDrawer();
} else {
this.animateCard();
}
}
},
animateCard: function() {
this.$.card.classList.remove('move-up');
this.$.card.style.display = 'none';
this.async(function() {
this.$.card.style.display = 'block';
this.moveCard(this.$.mainHeaderPanel.offsetHeight);
this.async(function() {
this.$.card.classList.add('move-up');
this.moveCard(null);
}, null, 300);
});
},
moveCard: function(y) {
var s = this.$.card.style;
s.webkitTransform = s.transform =
y ? 'translate3d(0, ' + y + 'px,0)' : '';
},
cardTransitionDone: function() {
if (this.$.card.classList.contains('move-up')) {
this.$.card.classList.remove('move-up');
this.updateFrameHeight();
}
},
togglePanel: function() {
this.$.drawerPanel.togglePanel();
},
frameLoaded: function() {
if (!this.item) {
return;
}
this.$.frame.contentWindow.addEventListener('polymer-ready', function() {
setTimeout(this.updateFrameHeight.bind(this), 100);
this.$.frame.contentWindow.addEventListener('core-resize',
this.boundResizeFrame, false);
}.bind(this));
},
resizeFrame: function() {
this.job('resizeFrame', function() {
this.updateFrameHeight();
});
},
updateFrameHeight: function() {
var frame = this.$.frame;
var doc = frame.contentDocument;
if (doc) {
var docElt = doc.documentElement;
// TODO(ffu); expose scroll info from header-panel
var pos = this.$.mainHeaderPanel.$.mainContainer.scrollTop;
frame.style.height = 'auto';
frame.style.height = docElt.scrollHeight + 'px';
if (doc.body) {
var s = doc.body.style;
s.overflow = 'hidden';
// to avoid the 'blinking bug'
// https://code.google.com/p/chromium/issues/detail?id=332024
s.webkitTransform = s.transform = 'translateZ(0)';
}
this.$.mainHeaderPanel.$.mainContainer.scrollTop = pos;
}
},
viewSourceAction: function() {
// window.open('view-source:' + this.$.frame.contentWindow.location.href, this.item.tag);
// console.log("Trying to open " + this.$.frame.contentWindow.location.href);
try {
window.open(this.$.frame.contentWindow.location.href, this.item.tag);
// window.open(this.$.frame.contentWindow.location.href, '_blank');
} catch (err) {
// For now, just show error to the user:
this.$.scaffoldToast.text = err.message
this.$.scaffoldToast.show()
// window.alert(err.message);
}
// window.open(this.$.frame.contentWindow.location.href, '_blank');
}
});
</script>
</polymer-element>
Raw
styles.css
body {
font-family: RobotoDraft, sans-serif;
color: #333;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
.iconMedium {
height: 32px;
width: 32px;
}
#menu-footer {
position: relative; /* For long menu */
/* position: absolute; /* For short menu */
overflow: scroll;
/* Uncomment to make footer right side aligned
left: auto;
right: 20px;
*/
top: auto;
bottom: 10px;
padding: 30px;
opacity: 0.4;
}
#right-footer {
position: absolute; /* For short menu */
left: auto;
right: 0px;
top: auto;
bottom: 0px;
padding: 10px;
opacity: 0.5;
}
Raw
x-trigger.html
<link href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html" rel="import">
<link href="http://www.polymer-project.org/components/paper-dropdown/paper-dropdown.html" rel="import">
<polymer-element name="x-trigger" extends="paper-icon-button" relative on-tap="{{toggle}}">
<template>
<link rel="stylesheet" href="x-trigger.css">
<shadow></shadow>
<content></content>
</template>
<script>
Polymer({
toggle: function() {
if (!this.dropdown) {
this.dropdown = this.querySelector('paper-dropdown');
}
this.dropdown && this.dropdown.toggle();
}
});
</script>
</polymer-element>
Raw
zaf-dropdown.css
/*paper-dropdown::shadow #ripple,*/
x-trigger {
z-index: 1;
}
#menuClose, #zafDropdown {
z-index: -1;
}
Raw
zaf-dropdown.html
<link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="../x-trigger/x-trigger.html">
<polymer-element name="zaf-dropdown" attributes="halign valign showCloseButton">
<style shim-shadowdom>
</style>
<template>
<link rel="stylesheet" href="zaf-dropdown.css">
<shadow></shadow>
<x-trigger icon="menu">
<paper-dropdown id="zafDropdown" halign="{{halign}}" valign="{{valign}}">
<paper-icon-button id="menuClose" icon="menu"></paper-icon-button>
<content></content>
</paper-dropdown>
</x-trigger>
</template>
<script>
Polymer('zaf-dropdown', {
ready: function() { },
// domReady: function() {},
toggle: function() {
if (!this.dropdown) {
this.dropdown = this.querySelector('paper-dropdown');
}
this.dropdown && this.dropdown.toggle();
}
/*buttonToggleAndHide: function(elem) {
this.$.collapse.toggle();
},*/
/*
function buttonToggleAndHide(elem) {
document.getElementById('collapse').toggle();
// var e = document.getElementById('menuButtonFooter');
// e.style.display = (e.style.display == 'none') ? 'inline' : 'none';
}*/
});
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment