tabbit

Sat Apr 01 2017
Copied to clipboard! Copy reply
<template>
  <div v-if="$store.state.bars.length && name" style="position: relative">

    <div class="form-group bar-actions">
      <div class="" style="text-align: right">
        <div class="" role="group">
          <button type="button" class="btn btn">Activate</button>
          <button type="button" class="btn btn-success" @click='saveBar'>Save</button>
          <button type="button" class="btn btn-danger">Delete</button>
        </div>
      </div>
    </div>

    <div class="dashboard-card">
      <h4 class="text-center">{{ name }}</h4>
      <!-- <div class="bar-actions">
        <button type="button" class="btn btn-success">Activate</button>
        <button type="button" class="btn btn-danger">Delete</button>
      </div> -->

      <div>

        <div class="form-group">
          <label>Name <small class="text-muted"><i>(required)</i></small></label>
          <input type="text" class="form-control" v-model='name' placeholder="My E-mail bar">
          <small class="form-text text-muted">
            This is simply a name so you can identify this bar later.
          </small>
        </div>

        <div class="form-group">
          <label>Exclude pages? <small class="text-muted"><i>(optional)</i></small></label>
          <input type="email" class="form-control" placeholder="mysite.com/shop, mysite.com/contact">
          <small class="form-text text-muted" hidden>
            By default, the bar will appear on every page of
            your domain. So if your domain is <i>www.example.com</i>, the bar will appear
            when a visitor visits <i>http://example.com, www.example.com/contact</i>, etc.
            Here you may exclude the pages you do not want the bar to appear.
            For example, entering <code>wwww.example.com/shop, www.example.com/sale</code>
            below, will prevent the bar from appearing on those pages.
          </small>
        </div>

        <div :class="'alert alert-' + formResult.class" v-show="formResult.result != null">
          <div class="error" v-if="formResult.result == 'error'">
            <strong>Oh no!</strong> Could not save bar because:
            <ul style="margin: 0.3em 0 0 0">
              <li>{{ formResult.payload }}</li>
            </ul>
          </div>
          <div class="success"  v-if="formResult.result == 'success'">
            <strong>Success!</strong> Your bar has been saved.
          </div>
        </div>
        <!-- <div class="" style="text-align: right">
          <input type="submit" class="btn" value="Save">
        </div> -->
      </div>
      <!-- <div style="display:block">{{ this.$store.state.bars }}</div> -->
    </div>

    <div class="dashboard-card">
      <h2 class="text-center" style="font-weight: lighter">Preview</h2>
      <!-- <p class="text-center">This is how your bar looks. You can edit the text right here, too.</p> -->
      <div id="form-css"><!-- holds css for live preview --></div>
      <div id="preview">
        <div id="nanobar" v-html='html'></div>
      </div>
    </div>

    <div class="dashboard-card">
      <h2 class="text-center" style="font-weight: lighter">Look &amp; Feel</h2>
      <p class="text-center">
        Customize your bar's look and feel here.
      </p>

      <div class="form-group row">
        <table class="table table-sm customize">
          <tbody>
            <tr>
              <td>Background color</td>
              <td>
                <input type="color"
                class='picker'
                data-variable='backgroundColor'
                :value='variables.css.backgroundColor' />
                </td>
            </tr>
            <!--
            <tr>
              <td>Email field background color</td>
              <td><input type="color"  class='picker' value="#ff0000" /></td>
            </tr>
            <tr>
              <td>Email field text color</td>
              <td><input type="color"  class='picker' value="#ff0000" /></td>
            </tr>
            <tr>
              <td>Email button background color</td>
              <td><input type="color"  class='picker' value="#ff0000" /></td>
            </tr>
            <tr>
              <td>Email button text color</td>
              <td><input type="color"  class='picker' value="#ff0000" /></td>
            </tr>

            <tr>
              <td>Link color</td>
              <td>
                <input type="color"
                class='picker'
                data-variable='linkColor'
                :value='cssVars.linkColor' />
              </td>
            </tr>
             -->
            <tr>
              <td>Close button color</td>
              <td>
                <input type="color"
                class='picker'
                data-variable='closeButtonColor'
                :value='variables.css.closeButtonColor' />
              </td>
            </tr>
            <tr>
              <td>Close button text</td>
              <td colspan="3">
                <input type="text" />
              </td>
            </tr>
            <tr>
              <td>Padding</td>
              <td colspan="3">
                <!-- slice -2 to remove 'px' -->
                <input type="range"
                min="0"
                max="100"
                data-variable='padding'
                :value='variables.css.padding.slice(0,-2)'
                @change="updateCss">
              </td>
            </tr>
            <tr>
              <td>Border</td>
              <td>
                <input
                type="color"
                class='picker'
                data-variable='borderColor'
                :value='variables.css.borderColor' />
              </td>
              <td>
                <!-- slice -2 to remove 'px' -->
                <input type="range"
                :value='variables.css.borderWidth.slice(0,-2)'
                min="0"
                max="10"
                data-variable='borderWidth'
                @change="updateCss">
              </td>
              <td>
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" value="option1"> Top
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" value="option2"> Bottom
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" value="option3"> Left
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" value="option3"> Right
                  </label>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="dashboard-card">
      <h2 class="text-center" style="font-weight: lighter">Bar's behavior</h2>
      <p class="text-center">
        Customize your bar's behavior here
      </p>
      <div class="form-group row">
        <table class="table table">
          <tr>
            <td>Entrance</td>
            <td>
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-secondary"
                  :class="{active: variables.js.entrance == 'push'}">
                  <input
                    v-model="variables.js.entrance"
                    value="overlay"
                    type="radio"
                    name="entrance"> Slide-in
                </label>
                <label class="btn btn-secondary"
                  :class="{active: variables.js.entrance == 'overlay'}">
                  <input
                    v-model="variables.js.entrance"
                    value="push"
                    type="radio"

                    name="entrance"> Overlay
                </label>
              </div>
            </td>
          </tr>
          <tr>
            <td>Position</td>
            <td>
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-secondary"
                  :class="{active: variables.js.position == 'top'}">
                  <input
                    v-model="variables.js.position"
                    value="top"
                    type="radio"
                    name="position"
                    data-variable='position'
                    @change="updateJs"
                    autocomplete="off">Top
                </label>
                <label class="btn  btn-secondary"
                  :class="{active: variables.js.position == 'bottom'}">
                  <input
                    v-model="variables.js.position"
                    value="bottom"
                    type="radio"
                    name="position"
                    data-variable='position'
                    @change="updateJs"
                    autocomplete="off">Bottom
                </label>
              </div>
            </td>
          </tr>
          <tr>
            <td>Delay</td>
            <td>
              <input type="text" v-model='variables.js.delay'>
            </td>
          </tr>
          <tr>
            <td>Autohide</td>
            <td>
              <input type="text" v-model='variables.js.autohide'>
            </td>
          </tr>
        </table>
      </div>
    </div>

  </div>

  <div v-else>
    loading.... {{ $store.state.bars.length }}
    <br>
    name:{{name}}
  </div>

</template>


<script>

  'use strict';

  const resultMap = {
    error: 'danger'
  }

  export default {
    name: 'Bar',
    data()
    {
      return {
        name: null,
        variables: null,

        isSubmitting: false,
        formResult: {
          result: null,
          payload: null,
          class: null
        }
      }
    },

    beforeCreate()
    {

    },
    computed: {

      /*
       * Bar's css and other variables.
       * These are also stored in the database,
       * so whenever we add/remove a variable here,
       * we must make sure to do the same in main.py.
       */

      /*cssVars()
      {
        const cssVars = JSON.parse(this.bar.config).variables.css
        return {
          padding: cssVars.padding,
          fontSize: cssVars.fontSize,
          borderWidth: cssVars.borderWidth,
          borderColor: cssVars.borderColor,
          backgroundColor: cssVars.backgroundColor,
          textColor: cssVars.textColor,
          linkColor: cssVars.linkColor,
          closeButtonColor: cssVars.closeButtonColor,
          closeButtonText: cssVars.closeButtonText
        }
      },*/


      /*barVariables: {
        get()
        {
          const variables = JSON.parse(this.bar.config).variables
          return {
            css: {
              padding: variables.css.padding,
              fontSize: variables.css.fontSize,
              borderWidth: variables.css.borderWidth,
              borderColor: variables.css.borderColor,
              backgroundColor: variables.css.backgroundColor,
              textColor: variables.css.textColor,
              linkColor: variables.css.linkColor,
              closeButtonColor: variables.css.closeButtonColor,
              closeButtonText: variables.css.closeButtonText
            },
            js: {
              entrance: variables.js.entrance,
              position: variables.js.position,
              delay: variables.js.delay,
              autohide: variables.js.autohide
            }
          }
        },
        set(v)
        {

        }

      },*/


      /*
       * Because we fetch our bar async, have it as computed
       * because when page loads and read local state, there
       * would be no value yet.
       */

     /* bar()
      {
        return this.$store.state.bars.length ? this.$store.state.bars[0] : ''
      },*/

      barName: {
        get()
        {
          return this.bar ? JSON.parse(this.bar.config).name : 'fetching name...'
        },
        set(input)
        {
          const cfg = JSON.parse(this.bar.config)
          cfg.name = input
          this.bar.config = JSON.stringify(cfg)
          this.updateStateBar()
        }
      },


      /*
       * Getter and Setter for the bar's html
       */

      html: {
        get()
        {
          return this.bar ? JSON.parse(this.bar.config).html : 'fetching html...'
        }
        /*,
        set(input)
        {
          const cfg = JSON.parse(this.bar.config)
          cfg.html.content = input
          this.bar.config = JSON.stringify(cfg)
          console.log('this bar cfg: ', this.bar.config)
          this.updateStateBar()
        }*/
      },


      /*
       * This is the css compiled with the cssVars() above.
       * Whenever those change, this will get updated,
       * and the view will update, causing the preview
       * to update too. This will also be sent to the db.
       */

      css()
      {
        return `
        <style>
         #nanobar {
            padding: ${this.variables.css.padding};
            font-size: ${this.variables.css.fontSize};
            border: ${this.variables.css.borderWidth} solid ${this.variables.css.borderColor};
            background: ${this.variables.css.backgroundColor};
            text-align: center;
            color: ${this.variables.css.textColor};
          }
          #nanobar > a {
            color: ${this.variables.css.linkColor};
          },
          #nanobar > .email {
            color: #000;
            background: #fff;
          },
          #nanobar > .button {
            background: green,
          },
          #nanobar > .clock {

          },
          #nanobar .close {
            color: ${this.variables.css.closeButtonColor};
          }
        </style>`

      }
    },

    mounted()
    {
      $().button('toggle')
    },
    updated()
    {
      console.log('updated..')
      if ( !this.name)
      {
        console.log('----> SET VARIABLES')
        const bar = this.$store.state.bars[0] //TODO grab by url id
        const config = JSON.parse(bar.config)
        console.log('variables...')
        this.variables = config.variables
        this.name = config.name
        console.log(this.variables)
      }
      else
      {
        console.log('store has no bars..')
      }




      $('#nanobar').trumbowyg({
        btns: [
          ['viewHTML'],
          ['formatting'],
          'btnGrp-semantic',
          //['superscript', 'subscript']
          ['foreColor', 'backColor'],
          ['link'],
          ['insertImage'],
          'btnGrp-justify',
          'btnGrp-lists',
          ['horizontalRule'],
          ['removeformat'],
          ['fullscreen']
        ]
      });
      const self = this

      $('#form-css').append(this.css)

      //$('#nanobar').append(content)

      $(".picker").spectrum({
        chooseText: 'Okay',
        change(color)
        {
          this.value = color.toHexString()
          const e = {target: this}
          self.updateCss(e)
        }

      });


    },

    methods: {

      /*
       * This updates the vuex bar. All bars are stored in vuex. So
       * to get this bar, we filter it out of the vuex bars array,
       * push the newly edited bar to the array (this.bar), and
       * dispatch the action to the store.
       * This is called after a UI element changes the bar.
       * ie, when css/html/behavior, or any part of the form, changes.
       * Each function that changes the bar should call this
       * to update the bar's state.
       */

      updateStateBar()
      {
        const allbars = this.$store.state.bars.filter(b => b.id != this.$route.params.id)
        allbars.push(this.bar)
        this.$store.dispatch({type: 'updateBars', barsArray: allbars})
      },


      /*
       * Actions triggered by the UI (sliders, color pickers, etc).
       * Each UI element has a data-variable=x where 'x' is one
       * of the variables in barVariables.css. We then update that
       * variable with the value of the UI element.
       */

      updateCss(e, method)
      {
        const self = this
        const barConfig = JSON.parse(self.bar.config)

        function update(variable, value)
        {

          // Some values require different handling
          switch (variable)
          {
            case 'borderWidth':
            case 'padding':
            case 'fontSize':
              value += 'px'
          }

          // Update css variable
          self.variables.css[variable] = value

          // self.css is updated when cssVar changes (computed).
          // Update our bar with new variables and compiled css
          barConfig.style = self.css
          barConfig.variables.css = self.variables.css
          self.bar.config = JSON.stringify(barConfig)

          // Update our bar in the vuex store - which will cause a rerender
          // of this component, updating the preview
          self.updateStateBar()
        }


        update(e.target.dataset.variable, e.target.value)
      },


      /*
       * Update js
       */
      updateJs(v)
      {
        console.log('v: ',v)
      },


      /*
       * Save bar on the server.
       */

      saveBar()
      {
        const self = this

        //const domains = document.getElementById('domains').value
        const req = new XMLHttpRequest()
        const formdata = new FormData()


        // Grab bar's html from Trumbowyg
        const cfg = JSON.parse(this.bar.config)
        cfg.html = $('#nanobar').trumbowyg('html')
        this.bar.config = JSON.stringify(cfg)

        console.log('this bar: ', this.bar)
        formdata.append('bar', JSON.stringify(this.bar))
        //formdata.append('domains', domains)
        req.open('POST', `/api/bar/${this.bar.id}`, true)
        req.send(formdata)
        req.onload = function()
        {
          if (req.status >= 200 && req.status < 400)
          {
            const response = JSON.parse(req.responseText)
            self.formResult = {
              result: response.result,
              payload: response.payload,
              class: response.result == 'error' ? 'danger' : response.result
            }

          }
          else
          {
            self.formResult = { result: 'error', message: 'Error on the server.' }
          }
          self.isSubmitting = false
        }

      },


      /*
       * Second save button. Saves the css and css variables, and
       * js behavior. Since our css and cssVars are already the way
       * we want, we just send the bar to the server :)
       */

      /*saveCss()
      {

      }*/


    }
  }






</script>