mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#68 split template and css in different files
This commit is contained in:
Eugenio Romano
parent
72c148d3f5
commit
08af799ece
@ -5,8 +5,10 @@
|
||||
<title>Angular 2 Viewer - Demo</title>
|
||||
<base href="/">
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
@ -19,7 +21,7 @@
|
||||
|
||||
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
|
||||
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
PDFJS.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
|
||||
</script>
|
||||
@ -50,8 +52,6 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="the-canvas" style="border:1px solid black;"/>
|
||||
<ng2-alfresco-viewer>Loading...</ng2-alfresco-viewer>
|
||||
|
||||
<ng2-alfresco-viewer><div class="mdl-spinner mdl-js-spinner is-active"></div></ng2-alfresco-viewer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
@ -1,9 +1,9 @@
|
||||
{
|
||||
"keywords": [
|
||||
"viewer",
|
||||
"pdf",
|
||||
"alfresco-component"
|
||||
],
|
||||
"keywords": [
|
||||
"viewer",
|
||||
"pdf",
|
||||
"alfresco-component"
|
||||
],
|
||||
"name": "ng2-alfresco-viewer",
|
||||
"description": "Alfresco documents viewer",
|
||||
"version": "0.1.1",
|
||||
@ -43,8 +43,7 @@
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"zone.js": "^0.6.12",
|
||||
"ng2-translate": "^1.11.2",
|
||||
"alfresco-core-rest-api": "https://github.com/Alfresco/dev-platform-js-api"
|
||||
"ng2-translate": "^1.11.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"angular2": "2.0.0-beta.15"
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
.button-container {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #3E3E3E;
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
<div class="toolbar-container">
|
||||
|
||||
<!-- Start Layout -->
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||
<div class="mdl-layout__header-row">
|
||||
|
||||
<!-- File Title -->
|
||||
<span class="mdl-layout-title">{{nameFile}}</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
|
||||
<!-- Start Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<div class="button-container">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||
<i id="tt2" class="icon material-icons">print</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||
<i id="tt3" class="icon material-icons">cloud_upload</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||
<i id="tt4" class="icon material-icons">share</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
|
||||
mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon"
|
||||
for="waterfall-exp">
|
||||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navigation -->
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Thumbnail</span>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content">
|
||||
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
|
||||
<div class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
|
||||
|
||||
<!-- Start Pdf Canvas -->
|
||||
<div id="canvas-container">
|
||||
<canvas id="the-canvas" style="border:1px solid black;"></canvas>
|
||||
</div>
|
||||
<!-- End Pdf Canvas -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="#">Footer link 1</a></li>
|
||||
<li><a href="#">Footer link 2</a></li>
|
||||
<li><a href="#">Footer link 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- End Layout -->
|
||||
|
||||
</div>
|
||||
@ -15,48 +15,51 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from 'angular2/core';
|
||||
import { Component, Input } from 'angular2/core';
|
||||
import { RouteParams } from 'angular2/router';
|
||||
|
||||
declare let PDFJS: any;
|
||||
declare let __moduleName:string;
|
||||
|
||||
@Component({
|
||||
moduleId: __moduleName,
|
||||
selector: 'ng2-alfresco-viewer',
|
||||
styles: [
|
||||
`
|
||||
:host h1 {
|
||||
font-size:22px
|
||||
}
|
||||
`
|
||||
],
|
||||
template: `<H1>ng2-alfresco-viewer</H1>`
|
||||
templateUrl: './ng2-alfresco-viewer.component.html',
|
||||
styleUrls: ['./ng2-alfresco-viewer.component.css']
|
||||
})
|
||||
export class Ng2AlfrescoViewerComponent {
|
||||
|
||||
nameFile:String;
|
||||
|
||||
constructor() {
|
||||
this.nameFile = 'localTestFile.pdf';
|
||||
|
||||
PDFJS.getDocument('../localTestFile.pdf').then(function getPdfHelloWorld(pdf) {
|
||||
//
|
||||
// Fetch the first page
|
||||
//
|
||||
pdf.getPage(1).then(function getPageHelloWorld(page) {
|
||||
pdf.getPage(1).then(function (page) {
|
||||
let scale = 1.5;
|
||||
let viewport = page.getViewport(scale);
|
||||
|
||||
//
|
||||
// Prepare canvas using PDF page dimensions
|
||||
//
|
||||
let canvas: any = document.getElementById('the-canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
let canvas:any = document.getElementById('the-canvas');
|
||||
if (canvas) {
|
||||
let context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
//
|
||||
// Render PDF page into canvas context
|
||||
//
|
||||
let renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
page.render(renderContext);
|
||||
//
|
||||
// Render PDF page into canvas context
|
||||
//
|
||||
let renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
page.render(renderContext);
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log('../contructor');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user