<commit_before>// Look up URLs in SURBL
var url  = require('url');
var dns  = require('dns');

var two_level_tlds = {};

exports.hook_data = function (next, connection) {
    // enable mail body parsing
    connection.transaction.parse_body = 1;
    next();
}

exports.hook_data_post = function (next, connection) {
    var zones = this.config.get('data.uribl.zones', 'list');

    this.config.get('data.uribl.two_level_tlds', 'list').forEach(function (tld) {
        two_level_tlds[tld] = 1;
    });

    // this.loginfo(two_level_tlds);

    var urls = {};

    // this.loginfo(connection.transaction.body);

    extract_urls(urls, connection.transaction.body);

    var hosts = Object.keys(urls);

    var pending_queries = 0;
    var next_ran = 0;
    var plugin = this;

    for (var i=0,l=hosts.length; i < l; i++) {
        var host = hosts[i];
        var match = host.match(/([^\.]+\.)?([^\.]+\.[^\.]+)$/);
        if (match && !host.match(/^\d+\.\d+\.\d+\.\d+$/)) {
            if (two_level_tlds[match[2]]) {
                host = match[0];
            }
            else {
                host = match[2];
            }
        }
        // Now query for "host".zone
        for (var i=0,l=zones.length; i < l; i++) {
            pending_queries++;
            this.logdebug("Looking up: " + host + '.' + zones[i]);
            dns.resolveTxt(host + '.' + zones[i], function (err, addresses) {
                pending_queries--;
                if (!err) {
                    if (!next_ran) {
                        next_ran++;
                        return next(DENY, addresses);
                    }
                }
                if (pending_queries === 0) {
                    next();
                }
            });
        }
    }

    if (pending_queries === 0) {
        // we didn't execute any DNS queries
        next();
    }
}

var numeric_ip = /\w{3,16}:\/+(\S+@)?(\d+|0[xX][0-9A-Fa-f]+)\.(\d+|0[xX][0-9A-Fa-f]+)\.(\d+|0[xX][0-9A-Fa-f]+)\.(\d+|0[xX][0-9A-Fa-f]+)/g;
var schemeless = /((?:www\.)?[a-zA-Z0-9][a-zA-Z0-9\-.]+\.(?:aero|arpa|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|[a-zA-Z]{2}))(?!\w)/g;
var schemed    = /(\w{3,16}:\/+(?:\S+@)?([a-zA-Z0-9][a-zA-Z0-9\-.]+\.(?:aero|arpa|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|[a-zA-Z]{2})))(?!\w)/g;

function extract_urls (urls, body) {
    // extract from body.bodytext
    var match;
    // extract numeric URIs
    while (match = numeric_ip.exec(body.bodytext)) {
        var uri = url.parse(match[0]);
        urls[uri.hostname.split(/\./).reverse().join('.')] = uri;
    }

    // match plain hostname.tld
    while (match = schemeless.exec(body.bodytext)) {
        var uri = url.parse('http://' + match[1]);
        urls[uri.hostname] = uri;
    }

    // match http:// URI
    while (match = schemed.exec(body.bodytext)) {
        var uri = url.parse(match[1]);
        urls[uri.hostname] = uri;
    }

    for (var i=0,l=body.children.length; i < l; i++) {
        extract_urls(urls, body.children[i]);
    }
}
<commit_msg>don't extract numeric IPs for now - DBL doesn't allow them. Ugh.<commit_after>// Look up URLs in SURBL
var url  = require('url');
var dns  = require('dns');

var two_level_tlds = {};

exports.hook_data = function (next, connection) {
    // enable mail body parsing
    connection.transaction.parse_body = 1;
    next();
}

exports.hook_data_post = function (next, connection) {
    var zones = this.config.get('data.uribl.zones', 'list');

    this.config.get('data.uribl.two_level_tlds', 'list').forEach(function (tld) {
        two_level_tlds[tld] = 1;
    });

    // this.loginfo(two_level_tlds);

    var urls = {};

    // this.loginfo(connection.transaction.body);

    extract_urls(urls, connection.transaction.body);

    var hosts = Object.keys(urls);

    var pending_queries = 0;
    var next_ran = 0;
    var plugin = this;

    for (var i=0,l=hosts.length; i < l; i++) {
        var host = hosts[i];
        var match = host.match(/([^\.]+\.)?([^\.]+\.[^\.]+)$/);
        if (match && !host.match(/^\d+\.\d+\.\d+\.\d+$/)) {
            if (two_level_tlds[match[2]]) {
                host = match[0];
            }
            else {
                host = match[2];
            }
        }
        // Now query for "host".zone
        for (var i=0,l=zones.length; i < l; i++) {
            pending_queries++;
            this.logdebug("Looking up: " + host + '.' + zones[i]);
            dns.resolveTxt(host + '.' + zones[i], function (err, addresses) {
                pending_queries--;
                if (!err) {
                    if (!next_ran) {
                        next_ran++;
                        return next(DENY, addresses);
                    }
                }
                if (pending_queries === 0) {
                    next();
                }
            });
        }
    }

    if (pending_queries === 0) {
        // we didn't execute any DNS queries
        next();
    }
}

var numeric_ip = /\w{3,16}:\/+(\S+@)?(\d+|0[xX][0-9A-Fa-f]+)\.(\d+|0[xX][0-9A-Fa-f]+)\.(\d+|0[xX][0-9A-Fa-f]+)\.(\d+|0[xX][0-9A-Fa-f]+)/g;
var schemeless = /((?:www\.)?[a-zA-Z0-9][a-zA-Z0-9\-.]+\.(?:aero|arpa|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|[a-zA-Z]{2}))(?!\w)/g;
var schemed    = /(\w{3,16}:\/+(?:\S+@)?([a-zA-Z0-9][a-zA-Z0-9\-.]+\.(?:aero|arpa|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|[a-zA-Z]{2})))(?!\w)/g;

function extract_urls (urls, body) {
    // extract from body.bodytext
    var match;
    // extract numeric URIs
    // commented out because DBL doesn't allow numeric IP queries
    //while (match = numeric_ip.exec(body.bodytext)) {
    //    var uri = url.parse(match[0]);
    //    urls[uri.hostname.split(/\./).reverse().join('.')] = uri;
    //}

    // match plain hostname.tld
    while (match = schemeless.exec(body.bodytext)) {
        var uri = url.parse('http://' + match[1]);
        urls[uri.hostname] = uri;
    }

    // match http:// URI
    while (match = schemed.exec(body.bodytext)) {
        var uri = url.parse(match[1]);
        urls[uri.hostname] = uri;
    }

    for (var i=0,l=body.children.length; i < l; i++) {
        extract_urls(urls, body.children[i]);
    }
}
<|endoftext|>


<commit_before>"use strict";
$(document).ready(function(){
	// rende i select meravigliosi colorati e hipster
	$("select").selectpicker({style: 'btn-hg btn-primary', menuStyle: 'dropdown-inverse'});
  	$("button.dropdown-toggle").css({
  	    'background':'#404040'
  	});

  	// switch costo abitazione (conosciuto o no)
  	$('#checkbox-abitazione').change(function () {
  	  $('#costo-sconosciuto').fadeToggle();
  	  $('#costo-conosciuto').fadeToggle();
  	});

  	//aggiungi nuova auto
  	$('#bottone-aggiungi-auto').click(function () {
  	  $('#aggiungi-auto').fadeToggle();
  	});
  	//aggiungi nuovo mezzo
  	$('#bottone-aggiungi-mezzo').click(function () {
  	  $('#aggiungi-mezzo').fadeToggle();
  	});

	/*
		Controllo se è la prima visita dell'utente o se ci sono
		già i dati salvati in localstorage
	*/
	if (!check_user_local_storage()) {
		//Se e la prima visita carico il menu di benvenuto,
		//di default nascosto
		if ($("#welcome").css("display") == "none") {
			$("#welcome").show();
		}
	}else{
		//Carico i dati dell'utente
	}
});

function start_new_location () {
	//Nascondo il messaggio di benvenuto
	$("#welcome").hide();
}

function switch_views(id_hide, id_show){
	//Nascondo la view
	$(id_hide+"-form").css({"left" : "-600px"});
	//Mostro la nuova view
	$(id_show+"-form").css({"left":"0px"});
}

//===============================================================
//======================  LOCALSTORAGE ==========================
//===============================================================

var userKey = {
	"key" : "MMCUserData"
};

/**
	Funzione che controlla che in localStorage, alla chiave
	MMCUserData sono presenti dati
	@return true ci sono dati, false altrimenti
*/
function check_user_local_storage () {
	if (localStorage[userKey.key] !== null) {
		return true;
	}else{
		return false;
	}
}

/**
	Funzione che carica da localstorage i dati salvati dall'utente
	@return Object che contiene i dati.
*/
function load_user_data () {
	var data;
	if (check_user_local_storage()) {
		try{
			data = JSON.parse(localStorage[userKey.key]);
		}catch(ex){
			console.log("Errore nel parsing dei dati utente");
		}
	}

	return data;
}

/**
	Funzione che salva i dati dell'utente in localStorage
	@data: dati da salvare
*/
function save_user_data (data) {
	localStorage[userKey.key] = JSON.stringify(data);
}<commit_msg>Aggiunta azioni al click sulla barralaterale sx<commit_after>"use strict";
$(document).ready(function(){
	//===============================================================
	//==========================  UI ================================
	//===============================================================

	// rende i select meravigliosi colorati e hipster
	$("select").selectpicker({style: 'btn-hg btn-primary', menuStyle: 'dropdown-inverse'});
  	$("button.dropdown-toggle").css({
  	    'background':'#404040'
  	});

  	// switch costo abitazione (conosciuto o no)
  	$('#checkbox-abitazione').change(function () {
  	  $('#costo-sconosciuto').fadeToggle();
  	  $('#costo-conosciuto').fadeToggle();
  	});

  	//aggiungi nuova auto
  	$('#bottone-aggiungi-auto').click(function () {
  	  $('#aggiungi-auto').fadeToggle();
  	});
  	//aggiungi nuovo mezzo
  	$('#bottone-aggiungi-mezzo').click(function () {
  	  $('#aggiungi-mezzo').fadeToggle();
  	});

  	$("#menu-trasporti").click(function() {
  		show_side_menu("#trasporti");
  	});

  	$("#menu-abitazione").click(function() {
  		show_side_menu("#abitazione");
  	});

  	$("#menu-famiglia").click(function() {
  		show_side_menu("#famiglia");
  	});

  	$("#menu-spostamenti").click(function() {
  		show_side_menu("#spostamenti");
  	});

	/*
		Controllo se è la prima visita dell'utente o se ci sono
		già i dati salvati in localstorage
	*/
	if (!check_user_local_storage()) {
		//Se e la prima visita carico il menu di benvenuto,
		//di default nascosto
		if ($("#welcome").css("display") == "none") {
			$("#welcome").show();
		}
	}else{
		//Carico i dati dell'utente
	}
});

function start_new_location () {
	//Nascondo il messaggio di benvenuto
	$("#welcome").hide();
}

function show_side_menu(id_categorie){
	//Nascondo tutti i from
	$(".form").css({"left" : "-600px"});
	//Mostro solo il menu indicato
	$(id_categorie+"-form").css({"left":"0px"});
}

//===============================================================
//======================  LOCALSTORAGE ==========================
//===============================================================

var userKey = {
	"key" : "MMCUserData"
};

/**
	Funzione che controlla che in localStorage, alla chiave
	MMCUserData sono presenti dati
	@return true ci sono dati, false altrimenti
*/
function check_user_local_storage () {
	if (localStorage[userKey.key] !== null) {
		return true;
	}else{
		return false;
	}
}

/**
	Funzione che carica da localstorage i dati salvati dall'utente
	@return Object che contiene i dati.
*/
function load_user_data () {
	var data;
	if (check_user_local_storage()) {
		try{
			data = JSON.parse(localStorage[userKey.key]);
		}catch(ex){
			console.log("Errore nel parsing dei dati utente");
		}
	}

	return data;
}

/**
	Funzione che salva i dati dell'utente in localStorage
	@data: dati da salvare
*/
function save_user_data (data) {
	localStorage[userKey.key] = JSON.stringify(data);
}<|endoftext|>


<commit_before>// Import React
import React from "react";
import mapValues from "lodash/mapValues";

// Import Spectacle Core tags
import {
  Appear,
  //BlockQuote,
  //Cite,
  CodePane,
  Deck,
  //Fill,
  Heading,
  Image,
  Layout,
  Link,
  List,
  ListItem,
  //Markdown,
  //Quote,
  Slide,
  Table,
  TableRow,
  TableHeaderItem,
  TableItem
  //Text
} from "spectacle";

import Counter from './counter_01';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");
require("./custom.css");

const slideTransition = ["slide"];
const images = mapValues({
  lifecycle: require("../images/lifecycle.png"),
  survivejs: require("../images/survivejs.png")
}, (v) => v.replace("/", ""));

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "black",
  tertiary: "#09b5c4",
  quartenary: "rgba(255, 219, 169, 0.43)"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={slideTransition} transitionDuration={500} theme={theme}>
        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={1} fit caps lineHeight={1} textColor="tertiary">
            React Components
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            React Philosophy
          </Heading>
          <List>
            <Appear><ListItem>Model your application as a component hierarchy</ListItem></Appear>
            <Appear><ListItem>Each component can have props and state</ListItem></Appear>
            <Appear><ListItem>Escape hatches through lifecycle methods and refs</ListItem></Appear>
            <Appear><ListItem>React forces you to think about state (a good thing!)</ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Components
          </Heading>
          <Layout>

                <TableRow>
                  <TableHeaderItem />
                  <TableHeaderItem>createClass</TableHeaderItem>
                  <TableHeaderItem>extends Component</TableHeaderItem>
                  <TableHeaderItem>Functions</TableHeaderItem>
                </TableRow>

                <Appear>
                  <TableRow>
                    <TableItem>props</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>context</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>refs</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>state</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem />
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>Lifecycle methods</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem />
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>Notes</TableItem>
                    <TableItem>Deprecated!</TableItem>
                    <TableItem />
                    <TableItem>Good default</TableItem>
                  </TableRow>
                </Appear>

          </Layout>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            React.Component
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Cat Counter
          </Heading>
          <Counter />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/76gK41lrQ">React.Component</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/NxXNAOZAK">No JSX</Link>
          </Heading>
          <CodePane
            lang="js"
            source={require("raw-loader!content!./counter_no_jsx.js")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            <Link href="https://codesandbox.io/s/JZxJgDqNg">React.Component</Link> with <Link href="https://github.com/tc39/proposal-class-public-fields">public fields (stage 2)</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_02.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            <Link href="https://codesandbox.io/s/3lBqVwL5A">React.Component</Link> with Function Style setState
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_03.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            <Link href="https://codesandbox.io/s/g5kzWv3Zl">React.Component</Link> with Function Style setState Extracted
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_04.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Fork the last code example at <Link href="https://codesandbox.io/">CodeSandbox</Link>. You can find a link to it in the header.</ListItem></Appear>
            <Appear><ListItem>1. Make it possible to add two cats at once</ListItem></Appear>
            <Appear><ListItem>2. Add a reset button to restore the count to zero*</ListItem></Appear>
            <Appear><ListItem>3. Add multiple options. Hint: [1, 2, 4].map(...). Look up React <Link href="https://facebook.github.io/react/docs/reconciliation.html">key</Link>. Why is it needed?**</ListItem></Appear>
            <Appear><ListItem>4. Try this.setState(..., cb)***</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/g5kzWv3Zl">0</Link>, <Link href="https://codesandbox.io/s/L98PX9kMp">1</Link>, <Link href="https://codesandbox.io/s/Q1qvPRW55">2</Link>, <Link href="https://codesandbox.io/s/31J17rM7n">3</Link>, <Link href="https://codesandbox.io/s/qvEWNmJ0">4</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            key
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!../examples/key_01.jsx")}
            margin="20px auto"
          />
          <Link href="https://facebook.github.io/react/docs/reconciliation.html">Read React reconciliation documentation to understand more</Link>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            Composition
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/qvEWNmJ0">Why composition?</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!../examples/composition_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/X6GyyXg9v">Decomposition</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!../examples/composition_02.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Decompose the counter as in the slides</ListItem></Appear>
            <Appear><ListItem>1. Implement App that contains multiple CatCounters</ListItem></Appear>
            <Appear><ListItem>2. Implement a generic Counter so you can count other things*</ListItem></Appear>
            <Appear><ListItem>3. Count total of all things in the user interface**</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/X6GyyXg9v">0</Link>, <Link href="https://codesandbox.io/s/73AKPwX3j">1</Link>, <Link href="https://codesandbox.io/s/O7L2zM0mg">2</Link>, <Link href="https://codesandbox.io/s/X64K29kMo">3</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            refs
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            React.Component with a ref
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/refs_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            Function based component with a ref
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/refs_02.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Capture a custom amount using an input and a ref</ListItem></Appear>
            <Appear><ListItem>1. Do the same without a ref*</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/VO7zJD0k5">0</Link> (can you see the bug?), <Link href="https://codesandbox.io/s/RoznJpjpE">1</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            Lifecycle Methods
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Lifecycle Methods
          </Heading>
          <Image src={images.lifecycle} margin="40px auto" height="324px" />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            shouldComponentUpdate(nextProps, nextState)
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/lifecycle_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Implement a shouldComponentUpdate at Counter so that it returns false and see when it gets triggered</ListItem></Appear>
            <Appear><ListItem>1. Implement a componentDidMount and componentWillUnmount to increase the count given an interval*</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/lO8pPZ2Zl">0</Link>, <Link href="https://codesandbox.io/s/JZpQ1Gm3K">1</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            Higher-Order Components
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            Why Higher-Order Components?
          </Heading>
          <List>
            <Appear><ListItem>Encapsulate a specific concern</ListItem></Appear>
            <Appear><ListItem>Examples: authenticated route, connect (pass state)</ListItem></Appear>
            <Appear><ListItem>Smaller slices to test</ListItem></Appear>
            <Appear><ListItem><Link href="https://facebook.github.io/react/docs/higher-order-components.html">Read React Higher-Order Components to learn more</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            Higher-Order Component Example
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/hoc_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Extract reset concern into withReset HOC that contains Counter reset related logic</ListItem></Appear>
            <Appear><ListItem>1. Extract custom value concern into withCustomValue HOC that contains Counter custom input related logic*</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/R6OWvlK30">0</Link>, <Link href="https://codesandbox.io/s/73v4G8MPr">1</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Link href="https://www.survivejs.com/">
            <Heading size={1}>
              SurviveJS
            </Heading>
          </Link>
          <Image src={images.survivejs} margin="0px auto 40px" height="524px"/>
        </Slide>

        <Slide transition={slideTransition} bgColor="tertiary">
          <Heading size={1} caps fit textColor="primary">
            Made in Finland by
          </Heading>
          <Link href="https://twitter.com/bebraw">
            <Heading caps fit size={2} textColor="secondary">
              Juho Vepsäläinen
            </Heading>
          </Link>
        </Slide>
      </Deck>
    );
  }
}
<commit_msg>chore: Improve outlook<commit_after>// Import React
import React from "react";
import mapValues from "lodash/mapValues";

// Import Spectacle Core tags
import {
  Appear,
  //BlockQuote,
  //Cite,
  CodePane,
  Deck,
  //Fill,
  Heading,
  Image,
  Layout,
  Link,
  List,
  ListItem,
  //Markdown,
  //Quote,
  Slide,
  Table,
  TableRow,
  TableHeaderItem,
  TableItem
  //Text
} from "spectacle";

import Counter from './counter_01';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");
require("./custom.css");

const slideTransition = ["slide"];
const images = mapValues({
  lifecycle: require("../images/lifecycle.png"),
  survivejs: require("../images/survivejs.png")
}, (v) => v.replace("/", ""));

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "black",
  tertiary: "#09b5c4",
  quartenary: "rgba(255, 219, 169, 0.43)"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={slideTransition} transitionDuration={500} theme={theme}>
        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={1} fit caps lineHeight={1} textColor="tertiary">
            React Components
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            React Philosophy
          </Heading>
          <List>
            <Appear><ListItem>Model your application as a component hierarchy</ListItem></Appear>
            <Appear><ListItem>Each component can have props and state</ListItem></Appear>
            <Appear><ListItem>Escape hatches through lifecycle methods and refs</ListItem></Appear>
            <Appear><ListItem>React forces you to think about state (a good thing!)</ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Components
          </Heading>
          <Layout>

                <TableRow>
                  <TableHeaderItem />
                  <TableHeaderItem>createClass</TableHeaderItem>
                  <TableHeaderItem>extends Component</TableHeaderItem>
                  <TableHeaderItem>Functions</TableHeaderItem>
                </TableRow>

                <Appear>
                  <TableRow>
                    <TableItem>props</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>context</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>refs</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>state</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem />
                  </TableRow>
                </Appear>
                <Appear>
                  <TableRow>
                    <TableItem>Lifecycle methods</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem>X</TableItem>
                    <TableItem />
                  </TableRow>
                </Appear>

          </Layout>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            React.Component
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Cat Counter
          </Heading>
          <Counter />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/76gK41lrQ">React.Component</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/NxXNAOZAK">No JSX</Link>
          </Heading>
          <CodePane
            lang="js"
            source={require("raw-loader!content!./counter_no_jsx.js")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            <Link href="https://codesandbox.io/s/JZxJgDqNg">React.Component</Link> with <Link href="https://github.com/tc39/proposal-class-public-fields">public fields (stage 2)</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_02.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            <Link href="https://codesandbox.io/s/3lBqVwL5A">React.Component</Link> with Function Style setState
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_03.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            <Link href="https://codesandbox.io/s/g5kzWv3Zl">React.Component</Link> with Function Style setState Extracted
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!./counter_04.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Fork the last code example at <Link href="https://codesandbox.io/">CodeSandbox</Link>. You can find a link to it in the header.</ListItem></Appear>
            <Appear><ListItem>1. Make it possible to add two cats at once</ListItem></Appear>
            <Appear><ListItem>2. Add a reset button to restore the count to zero*</ListItem></Appear>
            <Appear><ListItem>3. Add multiple options. Hint: [1, 2, 4].map(...). Look up React <Link href="https://facebook.github.io/react/docs/reconciliation.html">key</Link>. Why is it needed?**</ListItem></Appear>
            <Appear><ListItem>4. Try this.setState(..., cb)***</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/g5kzWv3Zl">0</Link>, <Link href="https://codesandbox.io/s/L98PX9kMp">1</Link>, <Link href="https://codesandbox.io/s/Q1qvPRW55">2</Link>, <Link href="https://codesandbox.io/s/31J17rM7n">3</Link>, <Link href="https://codesandbox.io/s/qvEWNmJ0">4</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            key
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!../examples/key_01.jsx")}
            margin="20px auto"
          />
          <Link href="https://facebook.github.io/react/docs/reconciliation.html">Read React reconciliation documentation to understand more</Link>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            Composition
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/qvEWNmJ0">Why composition?</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!../examples/composition_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            <Link href="https://codesandbox.io/s/X6GyyXg9v">Decomposition</Link>
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!content!../examples/composition_02.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Decompose the counter as in the slides</ListItem></Appear>
            <Appear><ListItem>1. Implement App that contains multiple CatCounters</ListItem></Appear>
            <Appear><ListItem>2. Implement a generic Counter so you can count other things*</ListItem></Appear>
            <Appear><ListItem>3. Count total of all things in the user interface**</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/X6GyyXg9v">0</Link>, <Link href="https://codesandbox.io/s/73AKPwX3j">1</Link>, <Link href="https://codesandbox.io/s/O7L2zM0mg">2</Link>, <Link href="https://codesandbox.io/s/X64K29kMo">3</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            refs
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            React.Component with a ref
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/refs_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            Function based component with a ref
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/refs_02.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Capture a custom amount using an input and a ref</ListItem></Appear>
            <Appear><ListItem>1. Do the same without a ref*</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/VO7zJD0k5">0</Link> (can you see the bug?), <Link href="https://codesandbox.io/s/RoznJpjpE">1</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            Lifecycle Methods
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Lifecycle Methods
          </Heading>
          <Image src={images.lifecycle} margin="40px auto" height="324px" />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            shouldComponentUpdate(nextProps, nextState)
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/lifecycle_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Implement a shouldComponentUpdate at Counter so that it returns false and see when it gets triggered</ListItem></Appear>
            <Appear><ListItem>1. Implement a componentDidMount and componentWillUnmount to increase the count given an interval*</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/lO8pPZ2Zl">0</Link>, <Link href="https://codesandbox.io/s/JZpQ1Gm3K">1</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition} bgColor="secondary">
          <Heading size={2} textColor="tertiary">
            Higher-Order Components
          </Heading>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            Why Higher-Order Components?
          </Heading>
          <List>
            <Appear><ListItem>Encapsulate a specific concern</ListItem></Appear>
            <Appear><ListItem>Examples: authenticated route, connect (pass state)</ListItem></Appear>
            <Appear><ListItem>Smaller slices to test</ListItem></Appear>
            <Appear><ListItem><Link href="https://facebook.github.io/react/docs/higher-order-components.html">Read React Higher-Order Components to learn more</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2} fit>
            Higher-Order Component Example
          </Heading>
          <CodePane
            lang="jsx"
            source={require("raw-loader!../examples/hoc_01.jsx")}
            margin="20px auto"
          />
        </Slide>

        <Slide transition={slideTransition}>
          <Heading size={2}>
            Exercises
          </Heading>
          <List>
            <Appear><ListItem>0. Extract reset concern into withReset HOC that contains Counter reset related logic</ListItem></Appear>
            <Appear><ListItem>1. Extract custom value concern into withCustomValue HOC that contains Counter custom input related logic*</ListItem></Appear>
            <Appear><ListItem>Solutions: <Link href="https://codesandbox.io/s/R6OWvlK30">0</Link>, <Link href="https://codesandbox.io/s/73v4G8MPr">1</Link></ListItem></Appear>
          </List>
        </Slide>

        <Slide transition={slideTransition}>
          <Link href="https://www.survivejs.com/">
            <Heading size={1}>
              SurviveJS
            </Heading>
          </Link>
          <Image src={images.survivejs} margin="0px auto 40px" height="524px"/>
        </Slide>

        <Slide transition={slideTransition} bgColor="tertiary">
          <Heading size={1} caps fit textColor="primary">
            Made in Finland by
          </Heading>
          <Link href="https://twitter.com/bebraw">
            <Heading caps fit size={2} textColor="secondary">
              Juho Vepsäläinen
            </Heading>
          </Link>
        </Slide>
      </Deck>
    );
  }
}
<|endoftext|>


<commit_before>import React from "react";

import {
  Appear,
  CodePane,
  Deck,
  Heading,
  Image,
  Link,
  List,
  ListItem,
  S,
  Slide,
  Spectacle,
  Text
} from "spectacle";

import preloader from "spectacle/lib/utils/preloader";
import createTheme from "spectacle/lib/themes/default";

require("normalize.css");
require("spectacle/lib/themes/default/index.css");
require("../assets/prism-vs.css");

const images = {
  logo: require("../assets/flow-logo.png")
};

preloader(images);

const theme = createTheme({
  primary: "#f4f4f4",
  secondary: "#363d42",
  tertiary: "#363d42",
  quartenary: "#363d42"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={["slide"]} transitionDuration={300}>
          <Slide bgColor="#363d42">
            <Heading>
              <Image src={images.logo} height={300} />
            </Heading>
            <Text caps textColor="white">
              Um verificador de tipos para JavaScript
            </Text>
          </Slide>
          <Slide>
            <Heading>O que é?</Heading>
            <List>
              <Appear><ListItem><S type="bold">Verificador</S> de tipos para JavaScript</ListItem></Appear>
              <Appear><ListItem>Consegue inferir tipos sem precisar informá-los</ListItem></Appear>
              <Appear><ListItem>Projetado para funcionar com a natureza dinâmica do JS</ListItem></Appear>
              <Appear><ListItem>Projetado para poder ser adotado gradualmente no projeto</ListItem></Appear>
              <Appear><ListItem>Mantido pelo Facebook</ListItem></Appear>
            </List>
          </Slide>
        </Deck>
      </Spectacle>
    );
  }
}
<commit_msg>Change progress to bar<commit_after>import React from "react";

import {
  Appear,
  CodePane,
  Deck,
  Heading,
  Image,
  Link,
  List,
  ListItem,
  S,
  Slide,
  Spectacle,
  Text
} from "spectacle";

import preloader from "spectacle/lib/utils/preloader";
import createTheme from "spectacle/lib/themes/default";

require("normalize.css");
require("spectacle/lib/themes/default/index.css");
require("../assets/prism-vs.css");

const images = {
  logo: require("../assets/flow-logo.png")
};

preloader(images);

const theme = createTheme({
  primary: "#f4f4f4",
  secondary: "#363d42",
  tertiary: "#363d42",
  quartenary: "#363d42"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck progress="bar" transition={["slide"]} transitionDuration={300}>
          <Slide bgColor="#363d42">
            <Heading>
              <Image src={images.logo} height={300} />
            </Heading>
            <Text caps textColor="white">
              Um verificador de tipos para JavaScript
            </Text>
          </Slide>
          <Slide>
            <Heading>O que é?</Heading>
            <List>
              <Appear><ListItem><S type="bold">Verificador</S> de tipos para JavaScript</ListItem></Appear>
              <Appear><ListItem>Consegue inferir tipos sem precisar informá-los</ListItem></Appear>
              <Appear><ListItem>Projetado para funcionar com a natureza dinâmica do JS</ListItem></Appear>
              <Appear><ListItem>Projetado para poder ser adotado gradualmente no projeto</ListItem></Appear>
              <Appear><ListItem>Mantido pelo Facebook</ListItem></Appear>
            </List>
          </Slide>
        </Deck>
      </Spectacle>
    );
  }
}
<|endoftext|>


<commit_before>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  BlockQuote,
  Cite,
  Deck,
  Heading,
  Image,
  ListItem,
  List,
  Quote,
  Slide,
  Text
} from "spectacle";

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png"),
  logo_mgd: require("../assets/logo_mgd_v5.png")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#1F2022",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

function showMapboxgl() {
  console.log("showMapboxgl");
  document.getElementById('mbgl-map').style.visibility = 'visible';
  //document.getElementById('iframe-panel').style.display = 'none';
  //document.getElementById('iframe-panel').src = 'http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/';
}

class Mapboxgl extends React.Component {

  componentWillMount() {
    showMapboxgl();
    if (this.props.flyTo) {
      g_mbgl_map.flyTo(this.props.flyTo);
    }
    g_mbgl_map.showTileBoundaries = !!this.props.showTileBoundaries;
  }

  render() {
    return null;
  }
}

//----------------------------------------------------------------------------
//----------------------------------------------------------------------------

const location_world = {
  center: [0, 0],
  zoom: 1
}

const location_nantes = {
  center: [-1.55, 47.216671],
  zoom: 12.75
}

const location_mgdesign = {
  center: [-1.556206, 47.20675],
  zoom: 15.0
}

//----------------------------------------------------------------------------
//----------------------------------------------------------------------------

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["zoom", "slide"]} transitionDuration={500} theme={theme}>

        <Slide transition={["zoom"]} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            Promenade au pays de la carto
          </Heading>
          <Text margin="10px 0 0" textColor="tertiary" size={1} bold>
            mapboxgl
          </Text>
          <Mapboxgl flyTo={location_nantes}/>
        </Slide>

        <Slide transition={["fade"]} bgColor="primary">
          <Image src={images.logo_mgd.replace('/', '')} width="80%"/>
          <Heading size={3} textColor="secondary">Nicolas Lelong</Heading>
          <Mapboxgl flyTo={location_mgdesign}/>
        </Slide>

        <Slide transition={["fade"]} bgColor="primary">
          <Heading size={6} textColor="primary" caps>Typography</Heading>
          <Heading size={1} textColor="secondary">Heading 1</Heading>
          <Heading size={2} textColor="secondary">Heading 2</Heading>
          <Heading size={3} textColor="secondary">Heading 3</Heading>
          <Heading size={4} textColor="secondary">Heading 4</Heading>
          <Heading size={5} textColor="secondary">Heading 5</Heading>
          <Text size={6} textColor="secondary">Standard text</Text>
        </Slide>

        <Slide transition={["fade"]} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>Standard List</Heading>
          <List>
            <ListItem>Item 1</ListItem>
            <ListItem>Item 2</ListItem>
            <ListItem>Item 3</ListItem>
            <ListItem>Item 4</ListItem>
          </List>
        </Slide>

        <Slide transition={["fade"]} bgColor="secondary" textColor="primary">

            <Quote>Example Quote</Quote>
            Author

        </Slide>
      </Deck>
    );
  }
}
<commit_msg>quick test to change map style<commit_after>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  BlockQuote,
  Cite,
  Deck,
  Heading,
  Image,
  ListItem,
  List,
  Quote,
  Slide,
  Text
} from "spectacle";

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png"),
  logo_mgd: require("../assets/logo_mgd_v5.png")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#1F2022",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

function showMapboxgl() {
  console.log("showMapboxgl");
  document.getElementById('mbgl-map').style.visibility = 'visible';
  //document.getElementById('iframe-panel').style.display = 'none';
  //document.getElementById('iframe-panel').src = 'http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/';
}

//----------------------------------------------------------------------------
//----------------------------------------------------------------------------

let _g_dirty_globals = {
  style: null
};

class Mapboxgl extends React.Component {

  componentWillMount() {

    showMapboxgl();

    if (this.props.flyTo) {
      g_mbgl_map.flyTo(this.props.flyTo);
    }

    g_mbgl_map.showTileBoundaries = !!this.props.showTileBoundaries;

    let style = this.props.style || style_default;
    if (_g_dirty_globals.style != style) {            // NOTE(nico) pour éviter le repaint complet de la carte
      _g_dirty_globals.style = style;
      g_mbgl_map.setStyle(style);
    }
  }

  render() {
    return null;
  }
}

//----------------------------------------------------------------------------
//----------------------------------------------------------------------------

const location_world = {
  center: [0, 0],
  zoom: 1
}

const location_nantes = {
  center: [-1.55, 47.216671],
  zoom: 12.75
}

const location_mgdesign = {
  center: [-1.556206, 47.20675],
  zoom: 15.0
}

const style_default = 'mapbox://styles/mapbox/streets-v9';

const style_raster = {
  "version": 8,
  "sources": {
    "raster-tiles": {
        "type": "raster",
        "url": "mapbox://mapbox.streets",
        "tileSize": 256
    }
  },
  "layers": [{
    "id": "simple-tiles",
    "type": "raster",
    "source": "raster-tiles",
    "minzoom": 0,
    "maxzoom": 22
  }]
}

//----------------------------------------------------------------------------
//----------------------------------------------------------------------------

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["zoom", "slide"]} transitionDuration={500} theme={theme}>

        <Slide transition={["zoom"]} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            Promenade au pays de la carto
          </Heading>
          <Text margin="10px 0 0" textColor="tertiary" size={1} bold>
            mapboxgl
          </Text>
          <Mapboxgl flyTo={location_nantes}/>
        </Slide>

        <Slide transition={["fade"]} bgColor="primary">
          <Image src={images.logo_mgd.replace('/', '')} width="80%"/>
          <Heading size={3} textColor="secondary">Nicolas Lelong</Heading>
          <Mapboxgl flyTo={location_mgdesign}/>
        </Slide>

        <Slide transition={["fade"]} bgColor="primary">
          <Heading size={6} textColor="primary" caps>Typography</Heading>
          <Heading size={1} textColor="secondary">Heading 1</Heading>
          <Heading size={2} textColor="secondary">Heading 2</Heading>
          <Heading size={3} textColor="secondary">Heading 3</Heading>
          <Heading size={4} textColor="secondary">Heading 4</Heading>
          <Heading size={5} textColor="secondary">Heading 5</Heading>
          <Text size={6} textColor="secondary">Standard text</Text>
        </Slide>

        <Slide transition={["fade"]} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>Standard List</Heading>
          <List>
            <ListItem>Item 1</ListItem>
            <ListItem>Item 2</ListItem>
            <ListItem>Item 3</ListItem>
            <ListItem>Item 4</ListItem>
          </List>
        </Slide>

        <Slide transition={["fade"]} bgColor="secondary" textColor="primary">

            <Quote>Example Quote</Quote>
            Author

        </Slide>
      </Deck>
    );
  }
}
<|endoftext|>


<commit_before>/**
 * Policy Mappings
 * (sails.config.policies)
 *
 * Policies are simple functions which run **before** your controllers.
 * You can apply one or more policies to a given controller, or protect
 * its actions individually.
 *
 * Any policy file (e.g. `api/policies/authenticated.js`) can be accessed
 * below by its filename, minus the extension, (e.g. "authenticated")
 *
 * For more information on how policies work, see:
 * http://sailsjs.org/#/documentation/concepts/Policies
 *
 * For more information on configuring policies, check out:
 * http://sailsjs.org/#/documentation/reference/sails.config/sails.config.policies.html
 *
 * Here's an example of mapping some policies to run before a controller
 * and its actions:
 *
 * ```
 * RabbitController: {
 *
 *   // Apply the `false` policy as the default for all of RabbitController's actions
 *   // (`false` prevents all access, which ensures that nothing bad happens to our rabbits)
 *   '*': false,
 *
 *   // For the action `nurture`, apply the 'isRabbitMother' policy
 *   // (this overrides `false` above)
 *   nurture  : 'isRabbitMother',

 *   // Apply the `isNiceToAnimals` AND `hasRabbitFood` policies
 *   // before letting any users feed our rabbits
 *   feed : ['isNiceToAnimals', 'hasRabbitFood']
 * }
 * ```
 */
module.exports.policies = {

  /**
   * Default policy for all controllers and actions (`true` allows publicaccess)
   */

  '*': true, // all routes allowed e.g dynamic routes with ThemeController.check, check config/routes.js for that

  BlogController: {
    'setup': 'developerOrBetter',
    'create': true,
    'update': 'bloggerOrBetter',
    'upload': 'bloggerOrBetter',
    'find': true,
    'destroy': 'bloggerOrBetter',
  },

  CMSController: {
    'setup': 'developerOrBetter',
    'infoUser': true
  },

  ConfigController: {
    'setup': 'developerOrBetter',
    'find': true
  },

  ContentController: {
    'setup': 'developerOrBetter',
    'find': true,
    'findAll': true,
    'findAllWithImage': true
  },

  DocsController: {
    'setup': 'developerOrBetter',
    'config': true,
    'controllers': true,
    'policies': true,
    'services': true,
    'adapters': true,
    'models': true,
    'hooks': true,
    'blueprints': true,
    'responses': true,
    'views': true,
    'available': true,
    'all': true
  },

  DocumentController: {
    'setup': 'developerOrBetter',
    'upload': true,
    'convert': true,
  },

  EmailController: {
    'setup': 'developerOrBetter',
    'send': true,
    'contact': true,
    'application': true,
  },

  GalleryController: {
    'setup': 'developerOrBetter',
    'find': true,
    'findOne': true,
    'upload': 'siteadminOrBetter'
  },

  LocaleController: {
    'setup': 'developerOrBetter',
  },

  MagentoController: {
    'setup': 'developerOrBetter',
  },

  MarkdownController: {
    'setup': 'developerOrBetter',
    'find': true
  },

  MemberController: {
    'setup': 'developerOrBetter',
    'find': true,
  },

  MultisiteController: {
    'find': 'superadmin',
    'findNames': 'superadmin',
    'findHosts': 'superadmin',
  },

  NavigationController: {
    'setup': 'developerOrBetter',
    'find': true
  },

  RoutesController: {
    'setup': 'developerOrBetter',
    'update': 'siteadminOrBetter',
    'destroy': 'siteadminOrBetter',
    'create': 'siteadminOrBetter',
    'updateOrCreate': 'siteadminOrBetter',
    'updateOrCreateByHost': 'superadmin',
    'updateOrCreateEach': 'siteadminOrBetter',
    'updateOrCreateEachByHost': 'superadmin',
    'find': true,
    'findByHost': 'superadmin',
  },

  SessionController: {
    'setup': 'developerOrBetter',
    'create': true,
    'subscribe': true,
    'authenticated': true,
    'bloggerOrBetter': true,
    'developerOrBetter': true,
    'siteadminOrBetter': true,
    'superadmin': true,
    'employee': true,
    'employeeOrBetter': true,
    'getAllPolicies': true,
    'getUser': true
  },

  SetupController: {
    '*': 'developerOrBetter',
  },

  ThemeController: {
    'setup': 'developerOrBetter',
    'assets': true,
    'likeAssets': true,
    'favicon': true,
    'signin': true,
    'modern': true,
    'fallback': true,
    'view': true,
    'find': 'siteadminOrBetter',
    'findByHost': 'superadmin',
    'updateOrCreate': 'siteadminOrBetter',
    'updateOrCreateByHost': 'superadmin',
    'updateOrCreateEach': 'siteadminOrBetter',
    'updateOrCreateEachByHost': 'siteadminOrBetter',
    'dynamicForced': true,
    'dynamicSupported': true,
    'dynamicRoute': true,
  },

  TimelineController: {
    'setup': 'developerOrBetter',
    'find': true,
  },

  UserController: {
    'setup': 'developerOrBetter',
    'find': true,
  },

  VWHeritageController: {
    'setup': 'developerOrBetter',
    'find': true,
  }
};
<commit_msg>do not allow everyone to create blogs<commit_after>/**
 * Policy Mappings
 * (sails.config.policies)
 *
 * Policies are simple functions which run **before** your controllers.
 * You can apply one or more policies to a given controller, or protect
 * its actions individually.
 *
 * Any policy file (e.g. `api/policies/authenticated.js`) can be accessed
 * below by its filename, minus the extension, (e.g. "authenticated")
 *
 * For more information on how policies work, see:
 * http://sailsjs.org/#/documentation/concepts/Policies
 *
 * For more information on configuring policies, check out:
 * http://sailsjs.org/#/documentation/reference/sails.config/sails.config.policies.html
 *
 * Here's an example of mapping some policies to run before a controller
 * and its actions:
 *
 * ```
 * RabbitController: {
 *
 *   // Apply the `false` policy as the default for all of RabbitController's actions
 *   // (`false` prevents all access, which ensures that nothing bad happens to our rabbits)
 *   '*': false,
 *
 *   // For the action `nurture`, apply the 'isRabbitMother' policy
 *   // (this overrides `false` above)
 *   nurture  : 'isRabbitMother',

 *   // Apply the `isNiceToAnimals` AND `hasRabbitFood` policies
 *   // before letting any users feed our rabbits
 *   feed : ['isNiceToAnimals', 'hasRabbitFood']
 * }
 * ```
 */
module.exports.policies = {

  /**
   * Default policy for all controllers and actions (`true` allows publicaccess)
   */

  '*': true, // all routes allowed e.g dynamic routes with ThemeController.check, check config/routes.js for that

  BlogController: {
    'setup': 'developerOrBetter',
    'create': 'bloggerOrBetter',
    'update': 'bloggerOrBetter',
    'upload': 'bloggerOrBetter',
    'find': true,
    'destroy': 'bloggerOrBetter',
  },

  CMSController: {
    'setup': 'developerOrBetter',
    'infoUser': true
  },

  ConfigController: {
    'setup': 'developerOrBetter',
    'find': true
  },

  ContentController: {
    'setup': 'developerOrBetter',
    'find': true,
    'findAll': true,
    'findAllWithImage': true
  },

  DocsController: {
    'setup': 'developerOrBetter',
    'config': true,
    'controllers': true,
    'policies': true,
    'services': true,
    'adapters': true,
    'models': true,
    'hooks': true,
    'blueprints': true,
    'responses': true,
    'views': true,
    'available': true,
    'all': true
  },

  DocumentController: {
    'setup': 'developerOrBetter',
    'upload': true,
    'convert': true,
  },

  EmailController: {
    'setup': 'developerOrBetter',
    'send': true,
    'contact': true,
    'application': true,
  },

  GalleryController: {
    'setup': 'developerOrBetter',
    'find': true,
    'findOne': true,
    'upload': 'siteadminOrBetter'
  },

  LocaleController: {
    'setup': 'developerOrBetter',
  },

  MagentoController: {
    'setup': 'developerOrBetter',
  },

  MarkdownController: {
    'setup': 'developerOrBetter',
    'find': true
  },

  MemberController: {
    'setup': 'developerOrBetter',
    'find': true,
  },

  MultisiteController: {
    'find': 'superadmin',
    'findNames': 'superadmin',
    'findHosts': 'superadmin',
  },

  NavigationController: {
    'setup': 'developerOrBetter',
    'find': true
  },

  RoutesController: {
    'setup': 'developerOrBetter',
    'update': 'siteadminOrBetter',
    'destroy': 'siteadminOrBetter',
    'create': 'siteadminOrBetter',
    'updateOrCreate': 'siteadminOrBetter',
    'updateOrCreateByHost': 'superadmin',
    'updateOrCreateEach': 'siteadminOrBetter',
    'updateOrCreateEachByHost': 'superadmin',
    'find': true,
    'findByHost': 'superadmin',
  },

  SessionController: {
    'setup': 'developerOrBetter',
    'create': true,
    'subscribe': true,
    'authenticated': true,
    'bloggerOrBetter': true,
    'developerOrBetter': true,
    'siteadminOrBetter': true,
    'superadmin': true,
    'employee': true,
    'employeeOrBetter': true,
    'getAllPolicies': true,
    'getUser': true
  },

  SetupController: {
    '*': 'developerOrBetter',
  },

  ThemeController: {
    'setup': 'developerOrBetter',
    'assets': true,
    'likeAssets': true,
    'favicon': true,
    'signin': true,
    'modern': true,
    'fallback': true,
    'view': true,
    'find': 'siteadminOrBetter',
    'findByHost': 'superadmin',
    'updateOrCreate': 'siteadminOrBetter',
    'updateOrCreateByHost': 'superadmin',
    'updateOrCreateEach': 'siteadminOrBetter',
    'updateOrCreateEachByHost': 'siteadminOrBetter',
    'dynamicForced': true,
    'dynamicSupported': true,
    'dynamicRoute': true,
  },

  TimelineController: {
    'setup': 'developerOrBetter',
    'find': true,
  },

  UserController: {
    'setup': 'developerOrBetter',
    'find': true,
  },

  VWHeritageController: {
    'setup': 'developerOrBetter',
    'find': true,
  }
};
<|endoftext|>


<commit_before>/**
 * Policy mappings (ACL)
 *
 * Policies are simply Express middleware functions which run **before** your controllers.
 * You can apply one or more policies to a given controller, or protect just one of its actions.
 *
 * Any policy file (e.g. `authenticated.js`) can be dropped into the `/policies` folder,
 * at which point it can be accessed below by its filename, minus the extension, (e.g. `authenticated`)
 *
 * For more information on policies, check out:
 * http://sailsjs.org/#documentation
 */

module.exports.policies = {

  // Default policy for all controllers and actions
  // (`true` allows public access)
  '*': true,

  PhotoController: {
    '*': ['isAuthenticated', 'isAdmin'],
    //destroy: 'isWallOwner', TODO
    destroy: true,
    find: true,
    create: true,
  },

  WallController: {
    '*': ['isAuthenticated', 'isAdmin'],
    //destroy: 'isWallOwner', TODO
    destroy: true,
    find: true,
    photos: true,
    myWalls: 'isAuthenticated',
    create: 'isAuthenticated',
    findOneByTitle: true
  },

  UserController: {
    '*': ['isAuthenticated', 'isAdmin'],
    login: true,
    find: true,
    create: true,
  },

};

/**
 * Here's what the `isNiceToAnimals` policy from above might look like:
 * (this file would be located at `policies/isNiceToAnimals.js`)
 *
 * We'll make some educated guesses about whether our system will
 * consider this user someone who is nice to animals.
 *
 * Besides protecting rabbits (while a noble cause, no doubt),
 * here are a few other example use cases for policies:
 *
 *	+ cookie-based authentication
 *	+ role-based access control
 *	+ limiting file uploads based on MB quotas
 *	+ OAuth
 *	+ BasicAuth
 *	+ or any other kind of authentication scheme you can imagine
 *
 */

/*
module.exports = function isNiceToAnimals (req, res, next) {

	// `req.session` contains a set of data specific to the user making this request.
	// It's kind of like our app's "memory" of the current user.

	// If our user has a history of animal cruelty, not only will we
	// prevent her from going even one step further (`return`),
	// we'll go ahead and redirect her to PETA (`res.redirect`).
	if ( req.session.user.hasHistoryOfAnimalCruelty ) {
		return res.redirect('http://PETA.org');
	}

	// If the user has been seen frowning at puppies, we have to assume that
	// they might end up being mean to them, so we'll
	if ( req.session.user.frownsAtPuppies ) {
		return res.redirect('http://www.dailypuppy.com/');
	}

	// Finally, if the user has a clean record, we'll call the `next()` function
	// to let them through to the next policy or our controller
	next();
};
*/
<commit_msg>Policies for photo/upload<commit_after>/**
 * Policy mappings (ACL)
 *
 * Policies are simply Express middleware functions which run **before** your controllers.
 * You can apply one or more policies to a given controller, or protect just one of its actions.
 *
 * Any policy file (e.g. `authenticated.js`) can be dropped into the `/policies` folder,
 * at which point it can be accessed below by its filename, minus the extension, (e.g. `authenticated`)
 *
 * For more information on policies, check out:
 * http://sailsjs.org/#documentation
 */

module.exports.policies = {

  // Default policy for all controllers and actions
  // (`true` allows public access)
  '*': true,

  PhotoController: {
    '*': ['isAuthenticated', 'isAdmin'],
    //destroy: 'isWallOwner', TODO
    destroy: true,
    find: true,
    create: true,
    upload: true,
  },

  WallController: {
    '*': ['isAuthenticated', 'isAdmin'],
    //destroy: 'isWallOwner', TODO
    destroy: true,
    find: true,
    photos: true,
    myWalls: 'isAuthenticated',
    create: 'isAuthenticated',
    findOneByTitle: true
  },

  UserController: {
    '*': ['isAuthenticated', 'isAdmin'],
    login: true,
    find: true,
    create: true,
  },

};

/**
 * Here's what the `isNiceToAnimals` policy from above might look like:
 * (this file would be located at `policies/isNiceToAnimals.js`)
 *
 * We'll make some educated guesses about whether our system will
 * consider this user someone who is nice to animals.
 *
 * Besides protecting rabbits (while a noble cause, no doubt),
 * here are a few other example use cases for policies:
 *
 *	+ cookie-based authentication
 *	+ role-based access control
 *	+ limiting file uploads based on MB quotas
 *	+ OAuth
 *	+ BasicAuth
 *	+ or any other kind of authentication scheme you can imagine
 *
 */

/*
module.exports = function isNiceToAnimals (req, res, next) {

	// `req.session` contains a set of data specific to the user making this request.
	// It's kind of like our app's "memory" of the current user.

	// If our user has a history of animal cruelty, not only will we
	// prevent her from going even one step further (`return`),
	// we'll go ahead and redirect her to PETA (`res.redirect`).
	if ( req.session.user.hasHistoryOfAnimalCruelty ) {
		return res.redirect('http://PETA.org');
	}

	// If the user has been seen frowning at puppies, we have to assume that
	// they might end up being mean to them, so we'll
	if ( req.session.user.frownsAtPuppies ) {
		return res.redirect('http://www.dailypuppy.com/');
	}

	// Finally, if the user has a clean record, we'll call the `next()` function
	// to let them through to the next policy or our controller
	next();
};
*/
<|endoftext|>


<commit_before>'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
}
<commit_msg>修改build中的api地址<commit_after>'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://localhost:8080"'
}
<|endoftext|>


<commit_before>module.exports = {
    api_user: '',
    api_key: ''
};<commit_msg>Added placeholder text to sendgrid config<commit_after>module.exports = {
    api_user: 'ENTER_API_USER_HERE',
    api_key: 'ENTER_API_KEY_HERE'
};
<|endoftext|>


<commit_before>/**
 * Reactize v0.4.2
 */
(function(exports) {
  var Reactize = {};

  var CLASS_NAME_REGEX = /\sclass=/g;
  var INPUT_TAG_WITH_VALUE_REGEX = /\s(<input[^>]*).*value=(".*")(.*>)/g;
  var CLOSING_TAG_REGEX = /\s(.*)(<input[^>]*|<hr[^>]*|<br[^>]*|<img[^>]*)(>)/g;

  Reactize.reactize = function(element) {
    var code = JSXTransformer.transform(
      "/** @jsx React.DOM */" +
      this.htmlToJsx(element.innerHTML)).code;

    return eval(code);
  };

  Reactize.applyDiffOnHTMLString = function(targetElement, htmlString) {
    var div = document.createElement('div');
    div.innerHTML = htmlString
    Reactize.applyDiff(targetElement, div)
  };

  Reactize.applyDiff = function(targetElement, replacementElement) {
    var bod = Reactize.reactize(replacementElement);
    React.render(bod, targetElement);
  };

  Reactize.applyBodyDiff = function() {
    Reactize.applyDiff(document.body, document.body)
  };

  // Converts an HTML string into a JSX-compliant string.
  Reactize.htmlToJsx = function(html) {
    html = html.replace(CLASS_NAME_REGEX, " className=");
    html = html.replace(INPUT_TAG_WITH_VALUE_REGEX, "$1 defaultValue=$2 $3")
    debugger;
    return html = html.replace(CLOSING_TAG_REGEX, "$1$2 /$3")
  };

  Reactize.version = "0.4.3";

  exports.Reactize = Reactize;
})(window);
<commit_msg>fixed version number and removed debugger<commit_after>/**
 * Reactize v0.4.3
 */
(function(exports) {
  var Reactize = {};

  var CLASS_NAME_REGEX = /\sclass=/g;
  var INPUT_TAG_WITH_VALUE_REGEX = /\s(<input[^>]*).*value=(".*")(.*>)/g;
  var CLOSING_TAG_REGEX = /\s(.*)(<input[^>]*|<hr[^>]*|<br[^>]*|<img[^>]*)(>)/g;

  Reactize.reactize = function(element) {
    var code = JSXTransformer.transform(
      "/** @jsx React.DOM */" +
      this.htmlToJsx(element.innerHTML)).code;

    return eval(code);
  };

  Reactize.applyDiffOnHTMLString = function(targetElement, htmlString) {
    var div = document.createElement('div');
    div.innerHTML = htmlString
    Reactize.applyDiff(targetElement, div)
  };

  Reactize.applyDiff = function(targetElement, replacementElement) {
    var bod = Reactize.reactize(replacementElement);
    React.render(bod, targetElement);
  };

  Reactize.applyBodyDiff = function() {
    Reactize.applyDiff(document.body, document.body)
  };

  // Converts an HTML string into a JSX-compliant string.
  Reactize.htmlToJsx = function(html) {
    html = html.replace(CLASS_NAME_REGEX, " className=");
    html = html.replace(INPUT_TAG_WITH_VALUE_REGEX, "$1 defaultValue=$2 $3")
    return html = html.replace(CLOSING_TAG_REGEX, "$1$2 /$3")
  };

  Reactize.version = "0.4.3";

  exports.Reactize = Reactize;
})(window);
<|endoftext|>


<commit_before>jest.dontMock('../src/Virtualbox');
var virtualBox = require('../src/Virtualbox');
var util = require('../src/Util');
var Promise = require('bluebird');

describe('VirtualBox', function () {
  it('returns the right command', function () {
    expect(virtualBox.command()).toBe('/usr/bin/VBoxManage');
  });

  describe('version 4.3.20r96996', function () {
    pit('correctly parses virtualbox version', function () {
      util.exec.mockImplementation(function () {
        return Promise.resolve('4.3.20r96996');
      });
      return virtualBox.version().then(function (version) {
        expect(version).toBe('4.3.20');
      });
    });
  });
});
<commit_msg>Fixing VirtualBox case<commit_after>jest.dontMock('../src/VirtualBox');
var virtualBox = require('../src/VirtualBox');
var util = require('../src/Util');
var Promise = require('bluebird');

describe('VirtualBox', function () {
  it('returns the right command', function () {
    expect(virtualBox.command()).toBe('/usr/bin/VBoxManage');
  });

  describe('version 4.3.20r96996', function () {
    pit('correctly parses virtualbox version', function () {
      util.exec.mockImplementation(function () {
        return Promise.resolve('4.3.20r96996');
      });
      return virtualBox.version().then(function (version) {
        expect(version).toBe('4.3.20');
      });
    });
  });
});
<|endoftext|>