<commit_before><link rel="import" href="../bower_components/polymer-flex-layout/polymer-flex-layout.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-signals/core-signals.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/pvc-globals/pvc-globals.html">
      
<!-- UI -->
<link rel="import" href="ele-workspace.html">
<link rel="import" href="ele-header.html">
<link rel="import" href="ele-footer.html">
<link rel="import" href="ele-package-settings.html">
<link rel="import" href="ele-package-list.html">

<!-- Data -->
<link rel="import" href="ele-ajax.html">
<link rel="import" href="divshot-env.html">

<polymer-element name="ele-editor" attributes="packageId">
  <template>
    <link rel="stylesheet" href="ele-editor.css">
    
    <pvc-globals id="globals" values="{{globals}}"></pvc-globals>
    <divshot-env id="env" values="{{globals.env}}" on-loaded="{{bootstrap}}"></divshot-env>
    
    <ele-ajax id="reqSelf" path="/self" on-core-complete="{{checkAuth}}"></ele-ajax>
    <ele-ajax id="reqPackage" path="/{{globals.user.username}}/{{packageId}}" on-core-response="{{packageResponse}}"></ele-ajax>
    <ele-ajax id="reqCreatePackage" path="/packages" method="POST" on-core-response="{{packageResponse}}"></ele-ajax>
    <ele-ajax id="reqUpdatePackage" path="/{{globals.user.username}}/{{globals.package.id}}" method="PUT" on-core-response="{{saveSucceeded}}"></ele-ajax>
    <ele-ajax id="reqDestroyPackage" path="/{{globals.user.username}}/{{globals.package.id}}" method="DELETE" on-core-response="{{destroySucceeded}}"></ele-ajax>
    
    <template if="{{globals.user && globals.package}}">
      <core-drawer-panel responsiveWidth="1600px" id="drawer">
        <core-signals on-core-signal-drawer-toggle="{{toggleDrawer}}" on-core-signal-save="{{save}}" on-core-signal-destroy="{{destroy}}"></core-signals>

        <core-header-panel drawer mode="seamed">
          <polymer-flex-layout vertical></polymer-flex-layout>
          <core-toolbar>Your Elements</core-toolbar>
          <div flex id="element-sidebar">
            <ele-package-list selected="{{packageId}}" on-selected="{{loadPackage}}"></ele-package-list>
            <paper-button id="new-element" on-click=="{{createElement}}">Create New Element</paper-button>
          </div>
        </core-header-panel>

        <core-header-panel main flex mode="seamed">
          <polymer-flex-layout vertical></polymer-flex-layout>
          <ele-header id="header"></ele-header>
          <ele-workspace id="workspace" flex></ele-workspace>
        </core-header-panel>
      </core-drawer-panel>
    </template>
    <template if="{{!globals.user || !globals.package}}">
      <div id="spinner">Loading, please wait...</div>
    </template>
  </template>
  <script>
    Polymer('ele-editor', {
      observe: {
        'globals.package': 'packageChanged',
        'globals.package.name': 'packageNameChanged',
      },
      commands: {
        layout: function(type) {
          this.$.workspace.setAttribute('layout', type);
        }
      },
      runCommand: function(e, command) {
        this.commands[command.name].call(this, command.args);
      },
      bootstrap: function() {
        this.$.reqSelf.origin = this.globals.env.API_ORIGIN;
        this.$.reqSelf.go();
      },
      toggleDrawer: function(e) {
        e.target.parentNode.togglePanel();
      },
      packageNameChanged: function(oldName, newName) {
        if (oldName && newName) {
          this.$.reqUpdatePackage.params = {name: newName};
          this.$.reqUpdatePackage.go({name: newName});
        }
      },
      save: function(e, params) {
        if (e.source && e.demo) { params = e; }
        this.$.reqUpdatePackage.go({source: params.source, demo: params.demo});
      },
      saveSucceeded: function() {
        console.log("Save succeeded.");
      },
      destroy: function() {
        if (confirm('Are you sure you want to delete this element? There is no going back.')) {
          this.$.reqDestroyPackage.go();
        }
      },
      destroySucceeded: function() {
        for (var i = 0; i < this.globals.packages.length; i++) {
          if (this.globals.packages[i].id === this.globals.package.id) {
            this.globals.packages.splice(i, 1); break;
          }
        }
        this.globals.package = null;
        this.packageId = this.globals.packages[0].id;
      },
      checkAuth: function(e, result) {
        if (result.response === 200) {
          this.globals.user = this.$.reqSelf.response;
          this.globals.packages = this.globals.user.packages;
          
          if (!this.globals.package) {
            if (this.globals.packages.length > 0) {
              var urlMatch = window.location.pathname.match(/\/e\/([^/?]+)/i)
              if (urlMatch) {
                this.packageId = urlMatch[1]; 
              } else {
                this.packageId = this.globals.packages[0].id;
              }
            } else {
              this.createElement();
            }
          }
        } else if (result.response === 401) {
          window.location = this.globals.env.API_ORIGIN + "/auth";
        } else {
          alert("There was a problem connecting to the API. Sorry!");
        }
      },
      createElement: function() {
        this.globals.package = null;
        this.packageId = null;
        this.$.reqCreatePackage.go();
      },
      packageChanged: function() {
        if (this.globals.package) {
          document.title = this.globals.user.username + "/" + this.globals.package.name + " - Ele Web Components Editor";
          if(this.globals.package.id !== this.packageId){
            this.packageId = this.globals.package.id;
          }
        };
        
        var drawer = this.shadowRoot.getElementById('drawer');
        if (drawer && drawer.selected === 'drawer'){ drawer.togglePanel(); }
      },
      packageResponse: function(e, response) {
        this.globals.package = response.response;
      },
      loadPackage: function(e, packageName) {
        this.packageId = packageId;
      },
      packageIdChanged: function() {
        if (this.packageId) {
          history.pushState(null, "", "/e/" + this.packageId);
        }
        
        if (!this.globals.package || this.globals.package.id !== this.packageId) {
          this.globals.package = null;
          this.$.reqPackage.go();
        }
      }
    });
  </script>
</polymer-element><commit_msg>Add new elements to list on response. Closes #10<commit_after><link rel="import" href="../bower_components/polymer-flex-layout/polymer-flex-layout.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-signals/core-signals.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/pvc-globals/pvc-globals.html">
      
<!-- UI -->
<link rel="import" href="ele-workspace.html">
<link rel="import" href="ele-header.html">
<link rel="import" href="ele-footer.html">
<link rel="import" href="ele-package-settings.html">
<link rel="import" href="ele-package-list.html">

<!-- Data -->
<link rel="import" href="ele-ajax.html">
<link rel="import" href="divshot-env.html">

<polymer-element name="ele-editor" attributes="packageId">
  <template>
    <link rel="stylesheet" href="ele-editor.css">
    
    <pvc-globals id="globals" values="{{globals}}"></pvc-globals>
    <divshot-env id="env" values="{{globals.env}}" on-loaded="{{bootstrap}}"></divshot-env>
    
    <ele-ajax id="reqSelf" path="/self" on-core-complete="{{checkAuth}}"></ele-ajax>
    <ele-ajax id="reqPackage" path="/{{globals.user.username}}/{{packageId}}" on-core-response="{{packageResponse}}"></ele-ajax>
    <ele-ajax id="reqCreatePackage" path="/packages" method="POST" on-core-response="{{packageResponse}}"></ele-ajax>
    <ele-ajax id="reqUpdatePackage" path="/{{globals.user.username}}/{{globals.package.id}}" method="PUT" on-core-response="{{saveSucceeded}}"></ele-ajax>
    <ele-ajax id="reqDestroyPackage" path="/{{globals.user.username}}/{{globals.package.id}}" method="DELETE" on-core-response="{{destroySucceeded}}"></ele-ajax>
    
    <template if="{{globals.user && globals.package}}">
      <core-drawer-panel responsiveWidth="1600px" id="drawer">
        <core-signals on-core-signal-drawer-toggle="{{toggleDrawer}}" on-core-signal-save="{{save}}" on-core-signal-destroy="{{destroy}}"></core-signals>

        <core-header-panel drawer mode="seamed">
          <polymer-flex-layout vertical></polymer-flex-layout>
          <core-toolbar>Your Elements</core-toolbar>
          <div flex id="element-sidebar">
            <ele-package-list selected="{{packageId}}" on-selected="{{loadPackage}}"></ele-package-list>
            <paper-button id="new-element" on-click=="{{createElement}}">Create New Element</paper-button>
          </div>
        </core-header-panel>

        <core-header-panel main flex mode="seamed">
          <polymer-flex-layout vertical></polymer-flex-layout>
          <ele-header id="header"></ele-header>
          <ele-workspace id="workspace" flex></ele-workspace>
        </core-header-panel>
      </core-drawer-panel>
    </template>
    <template if="{{!globals.user || !globals.package}}">
      <div id="spinner">Loading, please wait...</div>
    </template>
  </template>
  <script>
    Polymer('ele-editor', {
      observe: {
        'globals.package': 'packageChanged',
        'globals.package.name': 'packageNameChanged',
      },
      commands: {
        layout: function(type) {
          this.$.workspace.setAttribute('layout', type);
        }
      },
      runCommand: function(e, command) {
        this.commands[command.name].call(this, command.args);
      },
      bootstrap: function() {
        this.$.reqSelf.origin = this.globals.env.API_ORIGIN;
        this.$.reqSelf.go();
      },
      toggleDrawer: function(e) {
        e.target.parentNode.togglePanel();
      },
      packageNameChanged: function(oldName, newName) {
        if (oldName && newName) {
          this.$.reqUpdatePackage.params = {name: newName};
          this.$.reqUpdatePackage.go({name: newName});
        }
      },
      save: function(e, params) {
        if (e.source && e.demo) { params = e; }
        this.$.reqUpdatePackage.go({source: params.source, demo: params.demo});
      },
      saveSucceeded: function() {
        console.log("Save succeeded.");
      },
      destroy: function() {
        if (confirm('Are you sure you want to delete this element? There is no going back.')) {
          this.$.reqDestroyPackage.go();
        }
      },
      destroySucceeded: function() {
        for (var i = 0; i < this.globals.packages.length; i++) {
          if (this.globals.packages[i].id === this.globals.package.id) {
            this.globals.packages.splice(i, 1); break;
          }
        }
        this.globals.package = null;
        this.packageId = this.globals.packages[0].id;
      },
      checkAuth: function(e, result) {
        if (result.response === 200) {
          this.globals.user = this.$.reqSelf.response;
          this.globals.packages = this.globals.user.packages;
          
          if (!this.globals.package) {
            if (this.globals.packages.length > 0) {
              var urlMatch = window.location.pathname.match(/\/e\/([^/?]+)/i)
              if (urlMatch) {
                this.packageId = urlMatch[1]; 
              } else {
                this.packageId = this.globals.packages[0].id;
              }
            } else {
              this.createElement();
            }
          }
        } else if (result.response === 401) {
          window.location = this.globals.env.API_ORIGIN + "/auth";
        } else {
          alert("There was a problem connecting to the API. Sorry!");
        }
      },
      createElement: function() {
        this.globals.package = null;
        this.packageId = null;
        this.$.reqCreatePackage.go();
      },
      packageChanged: function() {
        if (this.globals.package) {
          document.title = this.globals.user.username + "/" + this.globals.package.name + " - Ele Web Components Editor";
          if(this.globals.package.id !== this.packageId){
            this.packageId = this.globals.package.id;
          }
        };
        
        var drawer = this.shadowRoot.getElementById('drawer');
        if (drawer && drawer.selected === 'drawer'){ drawer.togglePanel(); }
      },
      packageResponse: function(e, response) {
        if (!_.findWhere(this.globals.packages, {id: response.response.id})) {
          this.globals.packages.push(response.response);
          this.globals.packages.sort(function(a,b){ return (a.name > b.name) ? 1 : -1; });
        }
        
        this.globals.package = response.response;
      },
      loadPackage: function(e, packageName) {
        this.packageId = packageId;
      },
      packageIdChanged: function() {
        if (this.packageId) {
          history.pushState(null, "", "/e/" + this.packageId);
        }
        
        if (!this.globals.package || this.globals.package.id !== this.packageId) {
          this.globals.package = null;
          this.$.reqPackage.go();
        }
      }
    });
  </script>
</polymer-element>
{'fraction_non_alphanumeric': 0.1763046544428773, 'fraction_numerical': 0.0026724073936604557, 'mean_word_length': 2.516575306708431, 'pattern_counts': {'":': 0, '<': 135, '<?xml version=': 0, '>': 136, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '908199', 'n_tokens_mistral': 4134, 'n_tokens_neox': 4065, 'n_words': 652}