<commit_before><!--
The wc-presentation element loads files from the given url
and creates a slide show treating each file as a separate slide.
Slides using markdown and html can be marked up.  Syntax highlighting
uses prism and can support any language prism supports.  Mousetrap
supports keyboard navigation of the slide deck.

Example:

        <wc-presentation
            url="/presentation/slides/"
            markdown="md, markdown, html"></wc-presentation>

@element wc-presentation
@homepage autosponge.github.io/wc-presentation/presentation/components/wc-presentation/
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../font-roboto/roboto.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="../core-ajax/core-ajax.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/iconsets/av-icons.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog/paper-dialog-transition.html">
<link rel="import" href="../firebase-element/firebase-element.html">

<!--
external script file dependencies

You want to separate out the <script> tag into a separate .html file
that you include using the <link> tag.  This will allow multiple
instances to load from the cache.

Although we only have one instance of this component, someone else
could reuse it a different way.  So, follow the patterns!
-->

<link rel="import" href="prism-include.html">
<link rel="import" href="mousetrap-include.html">

<!--
This is our element.  Make sure this name
matches the file name, the file's directory
and as the first parameter when invoking Polymer
below.
-->
<polymer-element
    name="wc-presentation"
    on-key-right="{{ next }}"
    on-key-left="{{ prev }}"
    attributes="url markdown raw">

    <template>
        <style>
            :host {
                position: absolute;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                overflow-x: hidden; }

            #controls paper-input /deep/ input {
                text-align: center; }

            .raw {
                font-size: 6em; }

            .model {
                position: absolute;
                left: 0;
                top: 0;
                fill: white;
            }

            .model:hover {
                fill: grey;
            }

            .docs {
                position: absolute;
                left: 0;
                top: 24px;
                display: block;
                text-indent: -9999px;
                width: 24px;
                height: 16px;
            }

            .docs:hover {
                background: url('p-logo.svg');
                background-size: 24px 16px;
            }

            #dialog {
                width: 60%;
            }

            #dialog pre code {
                overflow-x: hidden;
            }

        </style>

        <!-- external stylesheet -->
        <link rel="stylesheet" href="wc-presentation.css">
        <link rel="stylesheet" href="../prismjs/prism-okaidia.css">

        <!-- import the list of slides -->
        <core-ajax
            auto
            url="{{ url }}"
            handleAs="document"
            on-core-response="{{ handleFilesList }}"></core-ajax>

        <!-- connection to firebase data for remote sync -->
        <firebase-element
                location=""
                data="{{ data }}"></firebase-element>

        <!-- start the presentation section -->
        <section class="presentation" layout vertical>

            <!-- display progress -->
            <paper-progress value="{{ data.selected + 1 }}" min="0" max="{{ files.length }}"></paper-progress>

            <!-- the presentation's main content area -->
            <section id="content" flex relative>

                <!-- the presentation's pages -->
                <core-animated-pages
                    id="slides"
                    transitions="slide-from-right"
                    selected="{{ data.selected }}" notap>

                    <template repeat="{{ file in files }}">
                        <article class="slide" horizontal layout center-justified>
                            <core-ajax
                                auto
                                url="{{ url + file.name }}"
                                handleAs="text"
                                response="{{ file.body }}"></core-ajax>
                            <span>
                                <core-icon class="model" icon="icons:settings" on-click="{{ showModel }}"></core-icon>
                            </span>
                            <template if="{{ file.extension | matchExtension('markdown') }}">
                                <marked-element
                                    class="markdown"
                                    text="{{ file.body }}"
                                    on-marked-js-highlight="{{ highlight }}"></marked-element>
                            </template>
                            <template if="{{ file.extension | matchExtension('raw') }}">
                                <div class="raw">{{ file.body }}</div>
                            </template>
                        </article>
                    </template>

                </core-animated-pages>
                <!-- end presentation's pages -->

            </section>
            <!-- end presentation's main content area -->

            <!-- controls -->
            <section id="controls" horizontal layout center-justified>
                <core-icon icon="av:skip-previous" on-click="{{ prev }}"></core-icon>
                <!--<paper-input value="{{ data.selected }}"></paper-input>-->
                <paper-input value="{{ data.selected }}"></paper-input>
                <core-icon icon="av:skip-next" on-click="{{ next }}"></core-icon>
            </section>

            <!-- dialog -->
            <paper-dialog
                    id="dialog"
                    class="markdown"
                    backdrop="true"
                    transition="paper-dialog-transition-bottom"></paper-dialog>

        </section>
        <!-- end the presentation section -->
<commit_msg>adding firebase-element<commit_after><!--
The wc-presentation element loads files from the given url
and creates a slide show treating each file as a separate slide.
Slides using markdown and html can be marked up.  Syntax highlighting
uses prism and can support any language prism supports.  Mousetrap
supports keyboard navigation of the slide deck.

Example:

        <wc-presentation
            url="/presentation/slides/"
            markdown="md, markdown, html"></wc-presentation>

@element wc-presentation
@homepage autosponge.github.io/wc-presentation/presentation/components/wc-presentation/
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../font-roboto/roboto.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="../core-ajax/core-ajax.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/iconsets/av-icons.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog/paper-dialog-transition.html">
<link rel="import" href="../firebase-element/firebase-element.html">

<!--
external script file dependencies

You want to separate out the <script> tag into a separate .html file
that you include using the <link> tag.  This will allow multiple
instances to load from the cache.

Although we only have one instance of this component, someone else
could reuse it a different way.  So, follow the patterns!
-->

<link rel="import" href="prism-include.html">
<link rel="import" href="mousetrap-include.html">

<!--
This is our element.  Make sure this name
matches the file name, the file's directory
and as the first parameter when invoking Polymer
below.
-->
<polymer-element
    name="wc-presentation"
    on-key-right="{{ next }}"
    on-key-left="{{ prev }}"
    attributes="url markdown raw">

    <template>
        <style>
            :host {
                position: absolute;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                overflow-x: hidden; }

            #controls paper-input /deep/ input {
                text-align: center; }

            .raw {
                font-size: 6em; }

            .model {
                position: absolute;
                left: 0;
                top: 0;
                fill: white;
            }

            .model:hover {
                fill: grey;
            }

            .docs {
                position: absolute;
                left: 0;
                top: 24px;
                display: block;
                text-indent: -9999px;
                width: 24px;
                height: 16px;
            }

            .docs:hover {
                background: url('p-logo.svg');
                background-size: 24px 16px;
            }

            #dialog {
                width: 60%;
            }

            #dialog pre code {
                overflow-x: hidden;
            }

        </style>

        <!-- external stylesheet -->
        <link rel="stylesheet" href="wc-presentation.css">
        <link rel="stylesheet" href="../prismjs/prism-okaidia.css">

        <!-- import the list of slides -->
        <core-ajax
            auto
            url="{{ url }}"
            handleAs="document"
            on-core-response="{{ handleFilesList }}"></core-ajax>

        <!-- connection to firebase data for remote sync -->
        <firebase-element
                location=""
                data="{{ data }}"></firebase-element>

        <!-- start the presentation section -->
        <section class="presentation" layout vertical>

            <!-- display progress -->
            <paper-progress value="{{ data.selected + 1 }}" min="0" max="{{ files.length }}"></paper-progress>

            <!-- the presentation's main content area -->
            <section id="content" flex relative>

                <!-- the presentation's pages -->
                <core-animated-pages
                    id="slides"
                    transitions="slide-from-right"
                    selected="{{ data.selected }}" notap>

                    <template repeat="{{ file in files }}">
                        <article class="slide" horizontal layout center-justified>
                            <core-ajax
                                auto
                                url="{{ url + file.name }}"
                                handleAs="text"
                                response="{{ file.body }}"></core-ajax>
                            <span>
                                <core-icon class="model" icon="icons:settings" on-click="{{ showModel }}"></core-icon>
                            </span>
                            <template if="{{ file.extension | matchExtension('markdown') }}">
                                <marked-element
                                    class="markdown"
                                    text="{{ file.body }}"
                                    on-marked-js-highlight="{{ highlight }}"></marked-element>
                            </template>
                            <template if="{{ file.extension | matchExtension('raw') }}">
                                <div class="raw">{{ file.body }}</div>
                            </template>
                        </article>
                    </template>

                </core-animated-pages>
                <!-- end presentation's pages -->

            </section>
            <!-- end presentation's main content area -->

            <!-- controls -->
            <section id="controls" horizontal layout center-justified>
                <core-icon icon="av:skip-previous" on-click="{{ prev }}"></core-icon>
                <paper-input value="{{ data.selected }}"></paper-input>
                <core-icon icon="av:skip-next" on-click="{{ next }}"></core-icon>
            </section>

            <!-- dialog -->
            <paper-dialog
                    id="dialog"
                    class="markdown"
                    backdrop="true"
                    transition="paper-dialog-transition-bottom"></paper-dialog>

        </section>
        <!-- end the presentation section -->

{'fraction_non_alphanumeric': 0.13690793989779573, 'fraction_numerical': 0.004271222637479978, 'mean_word_length': 1.5152503356992135, 'pattern_counts': {'":': 0, '<': 166, '<?xml version=': 0, '>': 166, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1790213', 'n_tokens_mistral': 3389, 'n_tokens_neox': 3105, 'n_words': 841}