<!DOCTYPE HTML>
-<!-- NOTE: index.html/index.js are automatically generated from index.in.html
- using the command: vulcanize --csp index.in.html -o index.html
- index.html/index.js SHOULD NOT be modified manually.
- TODO(raymes): Get rid of the need for vulcanize once HTMLImports is
- working properly in polymer. -->
<html i18n-values="dir:textdirection">
<head>
<meta charset="utf-8">
- <script src="polymer_loader.js"></script>
-
-
-
-
-
-
-
-
-<!--
- Copyright 2013 The Polymer Authors. All rights reserved.
- Use of this source code is governed by a BSD-style
- license that can be found in the LICENSE file.
--->
-
-<!-- <link rel="import" href="../polymer-dev/polymer.html"> -->
-<!--
-Copyright 2013 The Polymer Authors. All rights reserved.
-Use of this source code is governed by a BSD-style
-license that can be found in the LICENSE file.
--->
-<!--
-/**
- * @module Polymer Elements
- */
--->
-<!--
-/**
- * The polymer-selection element is used to manage selection state. It has no
- * visual appearance and is typically used in conjuneciton with another element.
- * For example, <a href="polymer-selector.html">polymer-selector</a>
- * use a polymer-selection to manage selection.
- *
- * To mark an item as selected, call the select(item) method on
- * polymer-selection. Notice that the item itself is an argument to this method.
- * The polymer-selection element manages selection state for any given set of
- * items. When an item is selected, the `polymer-select` event is fired.
- * The attribute "multi" indicates if multiple items can be selected at once.
- *
- * Example:
- *
- * <polymer-element name="selection-example">
- * <template>
- * <style>
- * ::-webkit-distributed(> .selected) {
- * font-weight: bold;
- * font-style: italic;
- * }
- * </style>
- * <ul on-tap="{{itemTapAction}}">
- * <content></content>
- * </ul>
- * <polymer-selection id="selection" multi on-polymer-select="{{selectAction}}"></polymer-selection>
- * </template>
- * <script>
- * Polymer('selection-example', {
- * itemTapAction: function(e) {
- * this.$.selection.select(e.target);
- * },
- * selectAction: function(e, detail) {
- * detail.item.classList.toggle('selected', detail.isSelected);
- * }
- * });
- * </script>
- * </polymer-element>
- *
- * <selection-example>
- * <li>Red</li>
- * <li>Green</li>
- * <li>Blue</li>
- * </selection-example>
- *
- * @class polymer-selection
- */
- /**
- * Fired when an item's selection state is changed. This event is fired both
- * when an item is selected or deselected. The `isSelected` detail property
- * contains the selection state.
- *
- * @event polymer-select
- * @param {Object} detail
- * @param {boolean} detail.isSelected true for selection and false for deselection
- * @param {Object} detail.item the item element
- */
--->
-
-
-<polymer-element name="polymer-selection" attributes="multi" assetpath="../../../../third_party/polymer/polymer-selection/">
- <template>
- <style>
- :host {
- display: none !important;
- }
- </style>
- </template>
-
-</polymer-element>
-
-<!--
-Copyright 2013 The Polymer Authors. All rights reserved.
-Use of this source code is governed by a BSD-style
-license that can be found in the LICENSE file.
--->
-<!--
-/**
- * @module Polymer Elements
- */
-/**
- * polymer-selector is used to manage a list of elements that can be selected.
- * The attribute "selected" indicates which item element is being selected.
- * The attribute "multi" indicates if multiple items can be selected at once.
- * Tapping on the item element would fire "polymer-activate" event. Use
- * "polymer-select" event to listen for selection changes.
- *
- * Example:
- *
- * <polymer-selector selected="0">
- * <div>Item 1</div>
- * <div>Item 2</div>
- * <div>Item 3</div>
- * </polymer-selector>
- *
- * polymer-selector is not styled. So one needs to use "polymer-selected" CSS
- * class to style the selected element.
- *
- * <style>
- * .item.polymer-selected {
- * background: #eee;
- * }
- * </style>
- * ...
- * <polymer-selector>
- * <div class="item">Item 1</div>
- * <div class="item">Item 2</div>
- * <div class="item">Item 3</div>
- * </polymer-selector>
- *
- * @class polymer-selector
- */
-/**
- * Fired when an item's selection state is changed. This event is fired both
- * when an item is selected or deselected. The `isSelected` detail property
- * contains the selection state.
- *
- * @event polymer-select
- * @param {Object} detail
- * @param {boolean} detail.isSelected true for selection and false for deselection
- * @param {Object} detail.item the item element
- */
-/**
- * Fired when an item element is tapped.
- *
- * @event polymer-activate
- * @param {Object} detail
- * @param {Object} detail.item the item element
- */
--->
-
-
-
-<polymer-element name="polymer-selector" attributes="selected multi valueattr selectedClass selectedProperty selectedItem selectedModel selectedIndex notap target itemsSelector activateEvent" assetpath="../../../../third_party/polymer/polymer-selector/">
- <template>
- <polymer-selection id="selection" multi="{{multi}}" on-polymer-select="{{selectionSelect}}"></polymer-selection>
- <content id="items" select="*"></content>
- </template>
-
-</polymer-element>
-
-<polymer-element name="viewer-button" attributes="src latchable" assetpath="html_office/elements/viewer-button/">
-<template>
- <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-#icon {
- background-position: center center;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- height: 100%;
- width: 100%;
-}
-
-:host {
- -webkit-user-select: none;
- background-image: linear-gradient(rgb(60, 80, 119), rgb(15, 24, 41));
- border: 1px solid rgb(11, 9, 16);
- cursor: default;
- display: inline-block;
- height: 36px;
- margin: 0;
- pointer-events: all;
- width: 43px;
-}
-
-:host(:focus:host) {
- outline: none;
-}
-
-:host(:hover:host) {
- background-image: linear-gradient(rgb(73, 102, 155), rgb(32, 52, 95));
-}
-
-:host(.latchable.polymer-selected:host),
-:host(:active:host) {
- background-color: rgb(75, 103, 156);
- background-image: none;
-}
-</style>
- <div id="icon"></div>
-</template>
-
-</polymer-element>
-
-<polymer-element name="viewer-error-screen" attributes="text" assetpath="html_office/elements/viewer-error-screen/">
-<template>
- <style>:host {
- background-color: #ccc;
- color: #555;
- font-family: sans-serif;
- font-size: 20px;
- height: 100%;
- pointer-events: none;
- position: fixed;
- text-align: center;
- width: 100%;
-}
-
-#load-failed-message {
- line-height: 0;
- position: absolute;
- top: 50%;
- width: 100%;
-}</style>
- <div id="load-failed-message">{{text}}</div>
-</template>
-
-</polymer-element>
-
-<polymer-element name="viewer-page-indicator" attributes="text" assetpath="html_office/elements/viewer-page-indicator/">
-<template>
- <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-:host {
- -webkit-transition: opacity 400ms ease-in-out;
- pointer-events: none;
- position: fixed;
- right: 0;
-}
-
-#text {
- background-color: rgba(0, 0, 0, 0.5);
- border-radius: 5px;
- color: white;
- float: left;
- font-family: sans-serif;
- font-size: 12px;
- font-weight: bold;
- line-height: 48px;
- text-align: center;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
- width: 62px;
-}
-
-#triangle-right {
- border-bottom: 6px solid transparent;
- border-left: 8px solid rgba(0, 0, 0, 0.5);
- border-top: 6px solid transparent;
- display: inline;
- float: left;
- height: 0;
- margin-top: 18px;
- width: 0;
-}</style>
- <div id="text">{{text}}</div>
- <div id="triangle-right"></div>
-</template>
-
-</polymer-element>
-
-<polymer-element name="viewer-password-screen" attributes="text active" assetpath="html_office/elements/viewer-password-screen/">
-<template>
- <style>:host {
- -webkit-transition: opacity 400ms ease-in-out;
- background-color: #ccc;
- color: #555;
- display: table;
- font-family: sans-serif;
- font-size: 15px;
- height: 100%;
- pointer-events: none;
- position: fixed;
- text-align: center;
- width: 100%;
-}
-
-#message {
- padding-bottom: 10px;
-}
-
-.center {
- display: table-cell;
- vertical-align: middle;
-}
-
-.form {
- border: 1px solid #777;
- box-shadow: 1px 1px 1px;
- display: inline-block;
- padding: 10px;
- width: 300px;
-}
-
-#successMessage {
- display: inline-block;
- padding-left: 5px;
- pointer-events: none;
-}
-
-input {
- color: #333;
- pointer-events: all;
-}</style>
- <div class="center">
- <form class="form">
- <div id="message">{{text}}</div>
- <input id="password" type="password" size="20">
- <input id="submit" type="submit" on-click="{{submit}}">
- <div id="successMessage">{{successMessage}}</div>
- </form>
- </div>
-</template>
-
-</polymer-element>
-
-<polymer-element name="viewer-progress-bar" attributes="progress text numSegments" assetpath="html_office/elements/viewer-progress-bar/">
-<template>
- <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-:host {
- -webkit-transition: opacity 400ms ease-in-out;
- background: rgb(29, 39, 57);
- border-radius: 5px;
- bottom: 26px;
- box-shadow: 0 1px 2px gray, 0 3px 3px rgba(0, 0, 0, .2);
- height: auto;
- left: 26px;
- pointer-events: none;
- position: fixed;
- width: auto;
-}
-
-.scaler {
- -webkit-transform: scale(0.25);
- -webkit-transform-origin: 0 0;
- float: left;
- height: 44px;
- margin: 8px;
- width: 44px;
-}
-
-#segments {
- border-radius: 50%;
- height: 176px;
- list-style: none;
- margin: 0;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 176px;
-}
-
-.segment {
- -webkit-transform-origin: 0 100%;
- background: rgb(227, 234, 249);
- box-shadow: 0 0 0 6px rgb(29, 39, 57) inset;
- height: 50%;
- overflow: hidden;
- position: absolute;
- right: 0;
- top: 0;
- width: 50%;
-}
-
-.center-circle {
- background-color: rgb(29, 39, 57);
- border-radius: 50%;
- height: 80px;
- left: 44px;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 44px;
- width: 80px;
-}
-
-#text {
- color: rgb(227, 234, 249);
- float: left;
- font-family: sans-serif;
- font-size: 16px;
- font-weight: bold;
- line-height: 58px;
- margin-right: 10px;
- margin-top: 1px;
-}
-</style>
- <div class="scaler">
- <ul id="segments"></ul>
- <div class="center-circle"></div>
- </div>
- <div id="text">{{text}}</div>
-</template>
-
-</polymer-element>
-
-<polymer-element name="viewer-toolbar" attributes="fadingIn" assetpath="html_office/elements/viewer-toolbar/">
-<template>
- <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-:host {
- -webkit-transition: opacity 400ms ease-in-out;
- bottom: 0;
- display: block;
- font-size: 0;
- opacity: 1;
- padding: 30px 30px 15px 30vw;
- pointer-events: none;
- position: fixed;
- right: 0;
-}
-
-#toolbar {
- border-radius: 3px;
- box-shadow: 0 1px 2px gray, 0 3px 3px rgba(0, 0, 0, .2);
- overflow: hidden;
-}
-</style>
- <div id="toolbar">
- <content></content>
- </div>
-</template>
-
-</polymer-element>
-<style>
- body {
- background-color: #ccc;
- margin: 0;
- }
- viewer-toolbar {
- visibility: hidden;
- z-index: 3;
- }
- viewer-page-indicator {
- visibility: hidden;
- z-index: 3;
- }
- viewer-progress-bar {
- z-index: 3;
- }
- viewer-error-screen {
- visibility: hidden;
- z-index: 2;
- }
- viewer-password-screen {
- visibility: hidden;
- z-index: 2;
- }
- #plugin {
- height: 100%;
- position: fixed;
- width: 100%;
- z-index: 1;
- }
- #sizer {
- position: absolute;
- z-index: 0;
- }
- </style>
+ <!-- TODO(raymes): Turn these <include>s into HTML imports once they are
+ fully implemented. At that point includes.js can be removed
+ as the scripts will be pulled in automatically. -->
+ <script src="includes.js"></script>
+ <include src="html_office/elements/viewer-button/viewer-button.html">
+ <include src="html_office/elements/viewer-error-screen/viewer-error-screen.html">
+ <include src="html_office/elements/viewer-page-indicator/viewer-page-indicator.html">
+ <include src="html_office/elements/viewer-password-screen/viewer-password-screen.html">
+ <include src="html_office/elements/viewer-progress-bar/viewer-progress-bar.html">
+ <include src="html_office/elements/viewer-toolbar/viewer-toolbar.html">
+ <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<viewer-progress-bar id="progress-bar"></viewer-progress-bar>
<viewer-toolbar id="toolbar">
- <polymer-selector>
- <viewer-button id="fit-to-page-button" src="button_fit_page.png" latchable="">
- </viewer-button>
- <viewer-button id="fit-to-width-button" src="button_fit_width.png" latchable="">
- </viewer-button>
- <viewer-button id="zoom-in-button" src="button_zoom_in.png">
+ <viewer-button id="fit-to-page-button"
+ assetpath="html_office/elements/viewer-button/"
+ img="button_fit_page.png" latchable>
+ </viewer-button>
+ <viewer-button id="fit-to-width-button"
+ assetpath="html_office/elements/viewer-button/"
+ img="button_fit_width.png" latchable>
+ </viewer-button>
+ <viewer-button id="zoom-in-button"
+ assetpath="html_office/elements/viewer-button/"
+ img="button_zoom_in.png">
+ </viewer-button>
+ <viewer-button id="zoom-out-button"
+ assetpath="html_office/elements/viewer-button/"
+ img="button_zoom_out.png">
+ </viewer-button>
+ <a id="save-button-link" download>
+ <viewer-button id="save-button"
+ assetpath="html_office/elements/viewer-button/"
+ img="button_save.png">
</viewer-button>
- <viewer-button id="zoom-out-button" src="button_zoom_out.png">
- </viewer-button>
- </polymer-selector>
- <a id="save-button-link" download="">
- <viewer-button id="save-button" src="button_save.png"></viewer-button>
</a>
- <viewer-button id="print-button" src="button_print.png"></viewer-button>
+ <viewer-button id="print-button"
+ assetpath="html_office/elements/viewer-button/"
+ img="button_print.png">
+ </viewer-button>
</viewer-toolbar>
<viewer-error-screen id="error-screen"></viewer-error-screen>
-
-<script src="index.js"></script>
</body>
<script src="pdf.js"></script>
</html>
projects / platform / framework / web / crosswalk.git / blobdiff