noflo-project.html

<link rel="import" href="the-panel.html">
<link rel="import" href="../bower_components/the-graph/the-graph-thumb/the-graph-thumb.html">
<link rel="import" href="noflo-new-graph.html">
<link rel="import" href="noflo-new-component.html">
<link rel="import" href="noflo-project-inspector.html">
<link rel="import" href="noflo-project-sync.html">
<polymer-element name="noflo-project" attributes="project graph component">
  <template>
    <style>
      h2 {
        font-size: 16px;
        line-height: 36px;
        text-transform: none;
        font-weight: normal;
        padding: 0px;
        margin: 0px;
      }
      ul.graphs {
        margin-bottom: 144px;
      }
      ul.graphs li {
        width: 245px;
        height: 70px;
        overflow: hidden;
        float: left;
        text-align: center;
        background-color: hsl(190, 90%, 45%);
        color: black;
        border-radius: 3px;
        margin-right: 0px;
        margin-left: 0px;
        margin-bottom: 5px;
        position: relative;
        cursor: pointer;
      }
      ul.graphs li.add {
        background-color: hsl(192, 25%, 92%);
        color: black;
        cursor: default;
      }
      ul.graphs li the-graph-thumb {
        display: block;
        position: absolute;
        left: 100px;
        top: -20px;
      }
      ul.graphs li i.fa {
        display: block;
        position: absolute;
        right: 17px;
        top: 17px;
        font-size: 36px;
        color: black;
      }
      ul.graphs li button {
        display: block;
        position: absolute;
        right: 17px;
        top: 17px;
        background-color: transparent;
        color: hsl(190, 100%, 30%);
        border: 1px solid hsl(190, 100%, 30%);
        font-size: 13px;
        border-radius: 3px;
        font-family: "SourceCodePro",Helvetica,Arial,sans-serif;
        height: 36px;
        padding-left: 13px;
        padding-right: 13px;
      }
      ul.graphs li h2 {
        position: absolute;
        top: 18px;
        left: 17px;
        width: 75px;
        text-transform: none;
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
      }
      main {
        overflow-y: auto;
        max-height: calc(100% - 72px);
      }
      main.repo {
        max-height: calc(100% - 72px * 2);
      }
      main::-webkit-scrollbar {
        display: none;
      }
      footer {
        background-color: transparent;
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding-left: 36px;
        width: 325px;
        padding-right: 36px;
        box-sizing: border-box;
        overflow: hidden;
        height: 72;
        transition: background-color 0.3s ease-in-out;
      }
      the-panel#account[open] ::shadow footer {
        background-color: hsl(190, 90%, 45%);
      }
      footer h1 {
        font-size: 17px;
        line-height: 36px;
        text-align: center;
        margin: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      footer button {
        background-color: white;
        color: hsl(190, 90%, 45%);
        border: none;
        font-size: 13px;
        border-radius: 3px;
        font-family: "SourceCodePro",Helvetica,Arial,sans-serif;
        height: 36px;
        padding-left: 17px;
        padding-right: 17px;
        line-height: 36px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
      }
      footer button:disabled {
        opacity: 0.5;
      }
    </style>
    <the-panel id="account" edge="left" size="324" handle="36" automatic="false">
      <header>
        <template if="{{ project }}">
        <h1>{{ project.name }}</h1>
        </template>
        <template if="{{ !project }}">
        <h1>Sketch</h1>
        </template>
      </header>
      <main class="{{ (project.repo ? 'repo' : 'norepo') }}">
        <ul>
          <li><a on-click="{{ openHome }}"><i class="fa fa-home"></i>Home</a></li>
          <template if="{{ project }}">
          <li><a on-click="{{ openSettings }}"><i class="fa fa-cog"></i>Settings</a></li>
          </template>
        </ul>
        <template if="{{ project }}">
        <h2>Graphs</h2>
        <ul class="graphs">
          <li class="add">
            <h2>New graph</h2>
            <button on-click="{{ newGraph }}">Create</button>
          </li>
          <template repeat="{{ graph in project.graphs }}">
          <li on-click="{{ openGraph }}" data-id="{{ graph.properties.id }}">
            <the-graph-thumb graph="{{ graph }}" width="200" height="120"></the-graph-thumb>
            <h2>{{ graph.name }}</h2>
          </li>
          </template>
        </ul>
        <template if="{{ canComponent }}">
        <h2>Components</h2>
        <ul class="graphs">
          <li class="add">
            <h2>New component</h2>
            <button on-click="{{ newComponent }}">Create</button>
          </li>
          <template repeat="{{ component in project.components }}">
          <li on-click="{{ openComponent }}" data-id="{{ component.name }}">
            <h2>{{ component.name }}</h2>
            <template if="{{ component.language == 'coffeescript' }}">
            <i class="fa fa-coffee"></i>
            </template>
            <template if="{{ component.language != 'coffeescript' }}">
            <i class="fa fa-code"></i>
            </template>
          </li>
          </template>
        </ul>
        </template>
        </template>
      </main>
      <template if="{{ project.repo }}">
      <footer>
        <h1 title="{{ project.repo }}"><i class="fa fa-github"></i> {{ project.repo }}</h1>
        <button on-click="{{ synchronize }}">
          <i class="fa fa-cloud-upload"></i>
          <span>Synchronize</span>
        </button>
      </footer>
      </template>
    </the-panel>
  </template>
  <script>
    Polymer('noflo-project', {
      gridToken: '',
      project: null,
      runtimes: [],
      runtime: null,
      graph: null,
      component: null,
      canComponent: true,
      runtimeChanged: function () {
        if (this.runtime && this.runtime.definition && this.runtime.definition.capabilities) {
          this.canComponent = (this.runtime.definition.capabilities.indexOf('component:setsource') !== -1);
        }
      },
      newGraph: function (event) {
        event.preventDefault();
        if (document.querySelectorAll('.modal-content:not(polymer-element)').length) {
          return;
        }
        var dialog = document.createElement('noflo-new-graph');
        dialog.project = this.project;
        dialog.runtimes = this.runtimes;
        document.body.appendChild(dialog);
        dialog.addEventListener('new', function (event) {
          var graph = event.detail;
          this.project.graphs.push(graph);
          this.fire('newgraph', graph);
          this.gotoGraph(graph.properties.id);
        }.bind(this));
      },
      newComponent: function (event) {
        if (!this.canComponent) {
          return;
        }
        event.preventDefault();
        if (document.querySelectorAll('.modal-content:not(polymer-element)').length) {
          return;
        }
        var dialog = document.createElement('noflo-new-component');
        dialog.project = this.project;
        document.body.appendChild(dialog);
        dialog.addEventListener('new', function (event) {
          var component = event.detail;
          this.project.components.push(component);
          this.fire('newcomponent', component);
          this.gotoComponent(component.name);
        }.bind(this));
      },
      openHome: function (event) {
        event.preventDefault();
        if (document.querySelectorAll('.modal-content:not(polymer-element)').length) {
          return;
        }
        if (typeof ga === 'function') {
          ga('send', 'event', 'button', 'click', 'openHome');
        }
        this.$.account.toggleOpen(false);
        window.location.hash = '#';
      },
      openSettings: function (event) {
        event.preventDefault();
        if (document.querySelectorAll('.modal-content:not(polymer-element)').length) {
          return;
        }
        if (typeof ga === 'function') {
          ga('send', 'event', 'button', 'click', 'projectProperties');
        }
        var dialog = document.createElement('noflo-project-inspector');
        dialog.token = this.gridToken;
        dialog.project = this.project;
        document.body.appendChild(dialog);
        dialog.addEventListener('updated', function (event) {
          Object.keys(event.detail).forEach(function (property) {
            this.project[property] = event.detail[property];
          }.bind(this));

          // Send only the data we actually want to store
          this.fire('changed', {
            id: this.project.id,
            name: this.project.name,
            repo: this.project.repo,
            type: this.project.type,
            main: this.project.main,
            graphs: [],
            components: []
          });
        }.bind(this));
        dialog.addEventListener('delete', function (event) {
          this.fire('deleteProject', event.detail);
        }.bind(this));
      },
      gotoGraph: function (id) {
        this.$.account.toggleOpen(false);
        window.location.hash = '#project/' + encodeURIComponent(this.project.id) + '/' + encodeURIComponent(id);
      },
      gotoComponent: function (id) {
        this.$.account.toggleOpen(false);
        window.location.hash = '#project/' + encodeURIComponent(this.project.id) + '/component/' + encodeURIComponent(id);
      },
      openGraph: function (event, detail, sender) {
        event.preventDefault();
        if (document.querySelectorAll('.modal-content:not(polymer-element)').length) {
          return;
        }
        if (typeof ga === 'function') {
          ga('send', 'event', 'button', 'click', 'openGraph');
        }
        this.gotoGraph(sender.getAttribute('data-id'));
      },
      openComponent: function (event, detail, sender) {
        event.preventDefault();
        if (document.querySelectorAll('.modal-content:not(polymer-element)').length) {
          return;
        }
        if (typeof ga === 'function') {
          ga('send', 'event', 'button', 'click', 'openComponent');
        }
        this.gotoComponent(sender.getAttribute('data-id'));
      },
      synchronize: function (event) {
        event.preventDefault();
        event.stopPropagation();
        if (typeof ga === 'function') {
          ga('send', 'event', 'button', 'click', 'syncGithub');
        }
        this.fire('sync', {
          repo: this.project.repo,
          project: this.project
        });
      },
      confirm: function (operation) {
        var dialog = document.createElement('noflo-project-sync');
        dialog.operation = operation;
        document.body.appendChild(dialog);
        dialog.addEventListener('sync', function (event) {
          if (typeof ga === 'function') {
            if (event.detail.push.length) {
              ga('send', 'event', 'button', 'click', 'pushGithub');
            }
            if (event.detail.pull.length) {
              ga('send', 'event', 'button', 'click', 'pullGithub');
            }
          }
          this.fire('syncDecision', event.detail);
        }.bind(this));
      }
    });
  </script>
</polymer-element>