2 | datatable works! 3 |
4 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/images/polinet-angular/src/app/components/common/datatable/datatable.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DatatableComponent } from './datatable.component'; 4 | 5 | describe('DatatableComponent', () => { 6 | let component: DatatableComponent; 7 | let fixture: ComponentFixture
2 |
4 | Notifications
3 |
10 |
13 |
14 | {{n.message}}
11 | {{n.time}} 12 |
17 | Clear all notifications
18 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/components/common/navigation/notifications/notifications.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/components/common/navigation/notifications/notifications.component.scss
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/components/common/navigation/notifications/notifications.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild, Input } from '@angular/core';
2 | import { MatSidenav } from '@angular/material';
3 | import { Router, NavigationEnd } from '@angular/router';
4 |
5 | @Component({
6 | selector: 'app-notifications',
7 | templateUrl: './notifications.component.html',
8 | styleUrls: ['./notifications.component.css']
9 | })
10 | export class NotificationsComponent implements OnInit {
11 | @Input() notificPanel;
12 |
13 | // Dummy notifications
14 | notifications = [{
15 | message: 'New contact added',
16 | icon: 'assignment_ind',
17 | time: '1 min ago',
18 | route: '/inbox',
19 | color: 'primary'
20 | }, {
21 | message: 'New message',
22 | icon: 'chat',
23 | time: '4 min ago',
24 | route: '/chat',
25 | color: 'accent'
26 | }, {
27 | message: 'Server rebooted',
28 | icon: 'settings_backup_restore',
29 | time: '12 min ago',
30 | route: '/charts',
31 | color: 'warn'
32 | }]
33 |
34 | constructor(private router: Router) {}
35 |
36 | ngOnInit() {
37 | this.router.events.subscribe((routeChange) => {
38 | if (routeChange instanceof NavigationEnd) {
39 | this.notificPanel.close();
40 | }
41 | });
42 | }
43 | clearAll(e) {
44 | e.preventDefault();
45 | this.notifications = [];
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/components/common/topbar/topbar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
2 | import * as domHelper from '../../../helpers/dom.helper';
3 | import { ThemeService } from '../../../services/theme/theme.service';
4 | import { AuthGuard } from 'app/services/auth/auth.guard';
5 | import { SigninComponent } from 'app/views/sessions/signin/signin.component';
6 | import { MatDialogRef, MatDialog } from '@angular/material';
7 |
8 | @Component({
9 | selector: 'topbar',
10 | templateUrl: './topbar.template.html'
11 | })
12 | export class TopbarComponent implements OnInit {
13 | @Input() sidenav;
14 | @Input() notificPanel;
15 | @Output() onLangChange = new EventEmitter
3 |
4 | I.E.S Politécnico Jesús Marín
5 |
6 |
7 |
8 |
12 |
16 |
17 | check
18 |
19 |
24 |
25 |
26 |
27 |
30 |
31 | {{ data.title }}
7 |{{ data.message }}
8 |
9 |
14 |
15 |
16 |
21 |
`,
22 | })
23 | export class AppComfirmComponent {
24 | constructor(
25 | public dialogRef: MatDialogRef
2 |
7 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/services/app-loader/app-loader.component.scss:
--------------------------------------------------------------------------------
1 | .mat-dialog-content {
2 | min-height: 122px;
3 | }
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/services/app-loader/app-loader.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { MatDialogRef } from '@angular/material';
3 |
4 | @Component({
5 | selector: 'app-app-loader',
6 | templateUrl: './app-loader.component.html',
7 | styleUrls: ['./app-loader.component.css']
8 | })
9 | export class AppLoaderComponent implements OnInit {
10 | title;
11 | message;
12 | constructor(public dialogRef: MatDialogRef{{ title }}
3 |
4 |
6 |
2 |
5 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/others/app-blank/app-blank.component.scss:
--------------------------------------------------------------------------------
1 | .mat-grid-list {
2 | margin: 15px;
3 | }
4 |
5 | .mat-card {
6 | margin: 15px;
7 | padding: 15px;
8 | width: 100%;
9 | border-radius: 10px;
10 | /* overflow-y: scroll; */
11 | }
12 |
13 | .mat-card>:first-child {
14 | margin-top: 15px;
15 | }
16 |
17 | .mat-card>:last-child {
18 | margin-bottom: 15px;
19 | }
20 |
21 | .mat-grid-tile {
22 | overflow: visible;
23 | }
24 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/others/app-blank/app-blank.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-blank',
5 | templateUrl: './app-blank.component.html',
6 | styleUrls: ['./app-blank.component.css']
7 | })
8 | export class AppBlankComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/others/app-blank/home-buttons/home-buttons.component.css:
--------------------------------------------------------------------------------
1 | mat-card{
2 | height: 350px;
3 | }
4 | .img-center{
5 | margin:0%;
6 | }
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/others/app-blank/home-buttons/home-buttons.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 | 
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
6 |
9 |
11 |
13 |
15 |
17 | Noticias
4 |
6 |
7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deleniti in facere inventore at eveniet saepe, dolorem odit consectetur reiciendis.
8 |
9 |
10 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deleniti in facere inventore at eveniet saepe, dolorem odit consectetur reiciendis.
14 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deleniti in facere inventore at eveniet saepe, dolorem odit consectetur reiciendis.
18 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deleniti in facere inventore at eveniet saepe, dolorem odit consectetur reiciendis.
22 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deleniti in facere inventore at eveniet saepe, dolorem odit consectetur reiciendis.
26 |
2 |
23 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/error/error.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/error/error.component.scss
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/error/error.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-error',
5 | templateUrl: './error.component.html',
6 | styleUrls: ['./error.component.css']
7 | })
8 | export class ErrorComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/forgot-password/forgot-password.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/forgot-password/forgot-password.component.css
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/forgot-password/forgot-password.component.html:
--------------------------------------------------------------------------------
1 |
3 |
22 |
4 | warning
5 |
10 |
11 |
6 |
9 | 500
7 |Server Error!
8 |
12 |
17 |
20 |
21 |
2 |
39 |
40 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/forgot-password/forgot-password.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/forgot-password/forgot-password.component.scss
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/forgot-password/forgot-password.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { MatProgressBar, MatButton } from '@angular/material';
3 | @Component({
4 | selector: 'app-forgot-password',
5 | templateUrl: './forgot-password.component.html',
6 | styleUrls: ['./forgot-password.component.css']
7 | })
8 | export class ForgotPasswordComponent implements OnInit {
9 | userEmail;
10 | @ViewChild(MatProgressBar) progressBar: MatProgressBar;
11 | @ViewChild(MatButton) submitButton: MatButton;
12 | constructor() { }
13 |
14 | ngOnInit() {
15 | }
16 | submitEmail() {
17 | this.submitButton.disabled = true;
18 | this.progressBar.mode = 'indeterminate';
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/lockscreen/lockscreen.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/lockscreen/lockscreen.component.css
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/lockscreen/lockscreen.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 |
36 |
37 |
38 |
7 | 
8 |
10 |
35 |
8 | New password will be sent to your email address
9 |
2 |
37 |
38 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/lockscreen/lockscreen.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/lockscreen/lockscreen.component.scss
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/lockscreen/lockscreen.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { MatProgressBar, MatButton } from '@angular/material';
3 |
4 | @Component({
5 | selector: 'app-lockscreen',
6 | templateUrl: './lockscreen.component.html',
7 | styleUrls: ['./lockscreen.component.css']
8 | })
9 | export class LockscreenComponent implements OnInit {
10 | @ViewChild(MatProgressBar) progressBar: MatProgressBar;
11 | @ViewChild(MatButton) submitButton: MatButton;
12 |
13 | lockscreenData = {
14 | password: ''
15 | }
16 |
17 | constructor() { }
18 |
19 | ngOnInit() {
20 | }
21 |
22 | unlock() {
23 | console.log(this.lockscreenData);
24 |
25 | this.submitButton.disabled = true;
26 | this.progressBar.mode = 'indeterminate';
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/not-found/not-found.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/not-found/not-found.component.css
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/not-found/not-found.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 |
34 |
35 |
36 |
7 |
33 |
8 | 
9 |
12 |
32 |
9 | John Doe
10 | Last seen 1 hour ago 11 |
2 |
23 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/not-found/not-found.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/not-found/not-found.component.scss
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/not-found/not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-not-found',
5 | templateUrl: './not-found.component.html',
6 | styleUrls: ['./not-found.component.css']
7 | })
8 | export class NotFoundComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/sessions.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4 | import { RouterModule } from "@angular/router";
5 | import {
6 | MatProgressBarModule,
7 | MatButtonModule,
8 | MatInputModule,
9 | MatCardModule,
10 | MatCheckboxModule,
11 | MatIconModule,
12 | } from '@angular/material';
13 | import { FlexLayoutModule } from '@angular/flex-layout';
14 |
15 | import { CommonDirectivesModule } from '../../directives/common/common-directives.module';
16 | import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
17 | import { LockscreenComponent } from './lockscreen/lockscreen.component';
18 | import { SessionsRoutes } from "./sessions.routing";
19 | import { NotFoundComponent } from './not-found/not-found.component';
20 | import { ErrorComponent } from './error/error.component';
21 |
22 | @NgModule({
23 | imports: [
24 | CommonModule,
25 | FormsModule,
26 | ReactiveFormsModule,
27 | MatProgressBarModule,
28 | MatButtonModule,
29 | MatInputModule,
30 | MatCardModule,
31 | MatCheckboxModule,
32 | MatIconModule,
33 | FlexLayoutModule,
34 | RouterModule.forChild(SessionsRoutes)
35 | ],
36 | declarations: [ForgotPasswordComponent, LockscreenComponent, NotFoundComponent, ErrorComponent]
37 | })
38 | export class SessionsModule { }
39 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/sessions.routing.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 |
3 | import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
4 | import { LockscreenComponent } from './lockscreen/lockscreen.component';
5 | import { SigninComponent } from './signin/signin.component';
6 | import { SignupComponent } from './signup/signup.component';
7 | import { NotFoundComponent } from './not-found/not-found.component';
8 | import { ErrorComponent } from './error/error.component';
9 |
10 | export const SessionsRoutes: Routes = [
11 | {
12 | path: '',
13 | children: [{
14 | path: 'signup',
15 | component: SignupComponent,
16 | data: { title: 'Signup' }
17 | }, {
18 | path: 'signin',
19 | component: SigninComponent,
20 | data: { title: 'Signin' }
21 | }, {
22 | path: 'forgot-password',
23 | component: ForgotPasswordComponent,
24 | data: { title: 'Forgot password' }
25 | }, {
26 | path: 'lockscreen',
27 | component: LockscreenComponent,
28 | data: { title: 'Lockscreen' }
29 | }, {
30 | path: '404',
31 | component: NotFoundComponent,
32 | data: { title: 'Not Found' }
33 | }, {
34 | path: 'error',
35 | component: ErrorComponent,
36 | data: { title: 'Error' }
37 | }]
38 | }
39 | ];
40 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/signin/signin.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/signin/signin.component.css
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/signin/signin.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/signin/signin.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/signin/signin.component.scss
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/images/polinet-angular/src/app/views/sessions/signin/signin.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Inject, ViewChild } from '@angular/core';
2 | import { MatDialogRef, MAT_DIALOG_DATA, MatProgressBar, MatButton } from '@angular/material';
3 | import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
4 |
5 | @Component({
6 | selector: 'app-signin',
7 | templateUrl: './signin.component.html',
8 | styleUrls: ['./signin.component.css']
9 | })
10 | export class SigninComponent implements OnInit {
11 | @ViewChild(MatProgressBar) progressBar: MatProgressBar;
12 | @ViewChild(MatButton) submitButton: MatButton;
13 |
14 | form: FormGroup;
15 |
16 | constructor(
17 | private formBuilder: FormBuilder,
18 | private dialogRef: MatDialogRef
3 |
22 |
4 | error
5 |
10 |
11 |
6 |
9 | 404
7 |Page Not Found!
8 |
12 |
17 |
20 |
21 |
16 |
21 |
17 |
18 |
19 |
20 | reveal.js multiplex server.
Generate token'); 38 | res.end(); 39 | }); 40 | stream.on('readable', function() { 41 | stream.pipe(res); 42 | }); 43 | }); 44 | 45 | app.get("/token", function(req,res) { 46 | var ts = new Date().getTime(); 47 | var rand = Math.floor(Math.random()*9999999); 48 | var secret = ts.toString() + rand.toString(); 49 | res.send({secret: secret, socketId: createHash(secret)}); 50 | }); 51 | 52 | var createHash = function(secret) { 53 | var cipher = crypto.createCipher('blowfish', secret); 54 | return(cipher.final('hex')); 55 | }; 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/plugin/multiplex/master.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Don't emit events from inside of notes windows 4 | if ( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var multiplex = Reveal.getConfig().multiplex; 7 | 8 | var socket = io.connect( multiplex.url ); 9 | 10 | function post() { 11 | 12 | var messageData = { 13 | state: Reveal.getState(), 14 | secret: multiplex.secret, 15 | socketId: multiplex.id 16 | }; 17 | 18 | socket.emit( 'multiplex-statechanged', messageData ); 19 | 20 | }; 21 | 22 | // Monitor events that trigger a change in state 23 | Reveal.addEventListener( 'slidechanged', post ); 24 | Reveal.addEventListener( 'fragmentshown', post ); 25 | Reveal.addEventListener( 'fragmenthidden', post ); 26 | Reveal.addEventListener( 'overviewhidden', post ); 27 | Reveal.addEventListener( 'overviewshown', post ); 28 | Reveal.addEventListener( 'paused', post ); 29 | Reveal.addEventListener( 'resumed', post ); 30 | 31 | }()); -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/plugin/multiplex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reveal-js-multiplex", 3 | "version": "1.0.0", 4 | "description": "reveal.js multiplex server", 5 | "homepage": "http://lab.hakim.se/reveal-js", 6 | "scripts": { 7 | "start": "node index.js" 8 | }, 9 | "engines": { 10 | "node": "~4.1.1" 11 | }, 12 | "dependencies": { 13 | "express": "~4.13.3", 14 | "grunt-cli": "~0.1.13", 15 | "mustache": "~2.2.1", 16 | "socket.io": "~1.3.7" 17 | }, 18 | "license": "MIT" 19 | } 20 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/plugin/notes-server/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // don't emit events from inside the previews themselves 4 | if( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var socket = io.connect( window.location.origin ), 7 | socketId = Math.random().toString().slice( 2 ); 8 | 9 | console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId ); 10 | 11 | window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId ); 12 | 13 | /** 14 | * Posts the current slide data to the notes window 15 | */ 16 | function post() { 17 | 18 | var slideElement = Reveal.getCurrentSlide(), 19 | notesElement = slideElement.querySelector( 'aside.notes' ); 20 | 21 | var messageData = { 22 | notes: '', 23 | markdown: false, 24 | socketId: socketId, 25 | state: Reveal.getState() 26 | }; 27 | 28 | // Look for notes defined in a slide attribute 29 | if( slideElement.hasAttribute( 'data-notes' ) ) { 30 | messageData.notes = slideElement.getAttribute( 'data-notes' ); 31 | } 32 | 33 | // Look for notes defined in an aside element 34 | if( notesElement ) { 35 | messageData.notes = notesElement.innerHTML; 36 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; 37 | } 38 | 39 | socket.emit( 'statechanged', messageData ); 40 | 41 | } 42 | 43 | // When a new notes window connects, post our current state 44 | socket.on( 'new-subscriber', function( data ) { 45 | post(); 46 | } ); 47 | 48 | // When the state changes from inside of the speaker view 49 | socket.on( 'statechanged-speaker', function( data ) { 50 | Reveal.setState( data.state ); 51 | } ); 52 | 53 | // Monitor events that trigger a change in state 54 | Reveal.addEventListener( 'slidechanged', post ); 55 | Reveal.addEventListener( 'fragmentshown', post ); 56 | Reveal.addEventListener( 'fragmenthidden', post ); 57 | Reveal.addEventListener( 'overviewhidden', post ); 58 | Reveal.addEventListener( 'overviewshown', post ); 59 | Reveal.addEventListener( 'paused', post ); 60 | Reveal.addEventListener( 'resumed', post ); 61 | 62 | // Post the initial state 63 | post(); 64 | 65 | }()); 66 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/plugin/notes-server/index.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var express = require('express'); 3 | var fs = require('fs'); 4 | var io = require('socket.io'); 5 | var Mustache = require('mustache'); 6 | 7 | var app = express(); 8 | var staticDir = express.static; 9 | var server = http.createServer(app); 10 | 11 | io = io(server); 12 | 13 | var opts = { 14 | port : 1947, 15 | baseDir : __dirname + '/../../' 16 | }; 17 | 18 | io.on( 'connection', function( socket ) { 19 | 20 | socket.on( 'new-subscriber', function( data ) { 21 | socket.broadcast.emit( 'new-subscriber', data ); 22 | }); 23 | 24 | socket.on( 'statechanged', function( data ) { 25 | delete data.state.overview; 26 | socket.broadcast.emit( 'statechanged', data ); 27 | }); 28 | 29 | socket.on( 'statechanged-speaker', function( data ) { 30 | delete data.state.overview; 31 | socket.broadcast.emit( 'statechanged-speaker', data ); 32 | }); 33 | 34 | }); 35 | 36 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) { 37 | app.use( '/' + dir, staticDir( opts.baseDir + dir ) ); 38 | }); 39 | 40 | app.get('/', function( req, res ) { 41 | 42 | res.writeHead( 200, { 'Content-Type': 'text/html' } ); 43 | fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res ); 44 | 45 | }); 46 | 47 | app.get( '/notes/:socketId', function( req, res ) { 48 | 49 | fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) { 50 | res.send( Mustache.to_html( data.toString(), { 51 | socketId : req.params.socketId 52 | })); 53 | }); 54 | 55 | }); 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' ); 65 | 66 | console.log( brown + 'reveal.js - Speaker Notes' + reset ); 67 | console.log( '1. Open the slides at ' + green + slidesLocation + reset ); 68 | console.log( '2. Click on the link in your JS console to go to the notes page' ); 69 | console.log( '3. Advance through your slides and your notes will advance automatically' ); 70 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/plugin/print-pdf/print-pdf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * phantomjs script for printing presentations to PDF. 3 | * 4 | * Example: 5 | * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf 6 | * 7 | * @author Manuel Bieh (https://github.com/manuelbieh) 8 | * @author Hakim El Hattab (https://github.com/hakimel) 9 | * @author Manuel Riezebosch (https://github.com/riezebosch) 10 | */ 11 | 12 | // html2pdf.js 13 | var system = require( 'system' ); 14 | 15 | var probePage = new WebPage(); 16 | var printPage = new WebPage(); 17 | 18 | var inputFile = system.args[1] || 'index.html?print-pdf'; 19 | var outputFile = system.args[2] || 'slides.pdf'; 20 | 21 | if( outputFile.match( /\.pdf$/gi ) === null ) { 22 | outputFile += '.pdf'; 23 | } 24 | 25 | console.log( 'Export PDF: Reading reveal.js config [1/4]' ); 26 | 27 | probePage.open( inputFile, function( status ) { 28 | 29 | console.log( 'Export PDF: Preparing print layout [2/4]' ); 30 | 31 | var config = probePage.evaluate( function() { 32 | return Reveal.getConfig(); 33 | } ); 34 | 35 | if( config ) { 36 | 37 | printPage.paperSize = { 38 | width: Math.floor( config.width * ( 1 + config.margin ) ), 39 | height: Math.floor( config.height * ( 1 + config.margin ) ), 40 | border: 0 41 | }; 42 | 43 | printPage.open( inputFile, function( status ) { 44 | console.log( 'Export PDF: Preparing pdf [3/4]') 45 | printPage.evaluate(function() { 46 | Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom ); 47 | }); 48 | } ); 49 | 50 | printPage.onCallback = function(data) { 51 | // For some reason we need to "jump the queue" for syntax highlighting to work. 52 | // See: http://stackoverflow.com/a/3580132/129269 53 | setTimeout(function() { 54 | console.log( 'Export PDF: Writing file [4/4]' ); 55 | printPage.render( outputFile ); 56 | console.log( 'Export PDF: Finished successfully!' ); 57 | phantom.exit(); 58 | }, 0); 59 | }; 60 | } 61 | else { 62 | 63 | console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' ); 64 | phantom.exit(1); 65 | 66 | } 67 | } ); 68 | 69 | 70 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/qrcodejs/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | .idea 4 | .project 5 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/qrcodejs/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | --------------------- 3 | Copyright (c) 2012 davidshimjs 4 | 5 | Permission is hereby granted, free of charge, 6 | to any person obtaining a copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, 8 | including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/qrcodejs/README.md: -------------------------------------------------------------------------------- 1 | # QRCode.js 2 | QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM. 3 | QRCode.js has no dependencies. 4 | 5 | ## Basic Usages 6 | ``` 7 | 8 | 11 | ``` 12 | 13 | or with some options 14 | 15 | ``` 16 | 17 | 27 | ``` 28 | 29 | and you can use some methods 30 | 31 | ``` 32 | qrcode.clear(); // clear the code. 33 | qrcode.makeCode("http://naver.com"); // make another code. 34 | ``` 35 | 36 | ## Browser Compatibility 37 | IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC. 38 | 39 | ## License 40 | MIT License 41 | 42 | ## Contact 43 | twitter @davidshimjs 44 | 45 | [](https://bitdeli.com/free "Bitdeli Badge") 46 | 47 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/qrcodejs/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qrcode.js", 3 | "version": "0.0.1", 4 | "homepage": "https://github.com/davidshimjs/qrcodejs", 5 | "authors": [ 6 | "Sangmin Shim", "Sangmin Shim12 | 13 | 14 | 44 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/qrcodejs/index.svg: -------------------------------------------------------------------------------- 1 | 2 | 38 | -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/test/examples/assets/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/test/examples/assets/image1.png -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/test/examples/assets/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Caballerog/cleancodeJS/0d3822b9a5cb99aafe1ff7cf88efab94437c7b6a/99-cleanJS-presentation/slides/test/examples/assets/image2.png -------------------------------------------------------------------------------- /99-cleanJS-presentation/slides/test/examples/barebones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
15 |
16 |
29 |
30 |
31 |
32 |
33 |
34 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/test/examples/embedded-media.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
18 |
19 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/test/examples/slide-transitions.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
26 |
27 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/test/simple.md:
--------------------------------------------------------------------------------
1 | ## Slide 1.1
2 |
3 | ```js
4 | var a = 1;
5 | ```
6 |
7 |
8 | ## Slide 1.2
9 |
10 |
11 |
12 | ## Slide 2
13 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/test/test-markdown-element-attributes.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | Reveal.addEventListener( 'ready', function() {
4 |
5 | QUnit.module( 'Markdown' );
6 |
7 | test( 'Vertical separator', function() {
8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
9 | });
10 |
11 |
12 | test( 'Attributes on element header in vertical slides', function() {
13 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
14 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
15 | });
16 |
17 | test( 'Attributes on element paragraphs in vertical slides', function() {
18 | strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
19 | });
20 |
21 | test( 'Attributes on element list items in vertical slides', function() {
22 | strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
23 | });
24 |
25 | test( 'Attributes on element paragraphs in horizontal slides', function() {
26 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
27 | });
28 | test( 'Attributes on element list items in horizontal slides', function() {
29 | strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
30 | });
31 | test( 'Attributes on element list items in horizontal slides', function() {
32 | strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
33 | });
34 |
35 | test( 'Attributes on elements in vertical slides with default element attribute separator', function() {
36 | strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
37 | });
38 |
39 | test( 'Attributes on elements in single slides with default element attribute separator', function() {
40 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
41 | });
42 |
43 | } );
44 |
45 | Reveal.initialize();
46 |
47 |
--------------------------------------------------------------------------------
/99-cleanJS-presentation/slides/test/test-markdown-external.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 
26 |