@widgetic/editor 3.11.4 → 4.0.1

package/src/core/views/video-details.pug

@@ -1,7 +0,0 @@
-extends input-layout
-block input
-	div.input-video
-		span.icon
-		span.video-prew
-		div.video-title
-		input.control-input.input-text(type="text",placeholder=options.placeholder, readonly=options.readonly,autocorrect="off",autocapitalize="off")

package/src/core/views/video.pug

@@ -1,4 +0,0 @@
-extends input-layout
-block input
-	div.input-video
-		input.control-input.input-text(type="text",placeholder=options.placeholder, readonly=options.readonly,autocorrect="off",autocapitalize="off")

package/src/core/widget/index.coffee

@@ -1,66 +0,0 @@
-
-Controller = window.require 'spine/controller'
-Container  = window.require 'spine/controller/container'
-###
-Base class for all widgets
-###
-class Widget extends Controller
-	className:'blogvio-widget'
-
-	@include Container
-
-	constructor : (opts,skin,content)->
-		super
-		@el.attr 'data-version', @VERSION if @VERSION
-		@style=$('<style>')
-
-		@setSkin(skin) if skin?
-		@setContent(content) if content?
-
-		@append @style
-
-	###
-	Set the current skin
-	###
-	setSkin  	: (skin)->
-		@stopListening(@skin)
-		@stopListening(skin)
-		@skin = skin
-		@listenTo(@skin, 'update', =>
-			@changeSkin arguments...
-		) if @skin.bind?
-		@changeSkin(skin)
-		@
-
-	###
-	Change a list of properties in the current skin
-	this function should be overrided in the widget main component
-	###
-	changeSkin: (skin)->
-		# console.log("Widget Base changeSkin:", skin);
-		@
-
-	###
-	Set current content
-	###
-	setContent  : (content=[])->
-		@content  = content
-		@clearContent()
-		@addContent(item) for item in content
-		@
-
-	###
-	Add one content item
-	###
-	addContent   : (item)->
-		@
-
-	###
-	Remove all content from the widget
-	###
-	clearContent: ->
-		@
-
-	resize:  (w,h) ->
-
-module.exports = Widget

package/src/editor/content/browser/dropzone.html

@@ -1,268 +0,0 @@
-<Service ref:Uploads
-  service="Uploads"
-  on:update="_onUploadsUpdate()"
-  />
-
-<div class="dropzone {{ dragging ? 'dropzone--dragging' : '' }}" ref:dropzone>
-  <div class="dropzone_stats">
-    {{#if uploading.total > 0}}
-      <strong>Uploading {{ uploading.now }} / {{ uploading.total }}</strong>
-    {{else}}
-      <svg class="icon icon-upload"><use xlink:href="#icon-upload"></use></svg>
-      <br/>
-      <span><strong>{{ prettyUsed }}</strong> out of <strong>{{ prettyQuota }}</strong> used.</span>
-    {{/if}}
-  </div>
-</div>
-
-<style>
-  .dropzone {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background: #fff;
-    border: 1px dashed #b8b8b8;
-
-    font-size: 14px;
-    font-family: "ProximaNova-Regular";
-    text-align: center;
-    cursor: pointer;
-
-    transition: top 300ms ease-in, background 150ms ease-in 50ms;
-  }
-
-  .dropzone_stats {
-    pointer-events: none;
-  }
-
-  .dropzone_stats span {
-    transition: opacity 150ms ease-in 150ms;
-  }
-
-  .dropzone:hover {
-    border-color: #888;
-  }
-
-  .dropzone.dropzone--dragging,
-  .dropzone:hover {
-    background: #f4f5f8;
-  }
-
-  .dropzone--dragging .dropzone_stats span {
-    opacity: 0;
-    transition: opacity 150ms ease-in;
-  }
-
-  .dropzone--dragging .dropzone_stats .icon {
-    transform: scale(3) translateY(20%);
-  }
-
-  .dz-message, .dz-preview {
-    display: none
-  }
-
-  .icon {
-    fill: #929292;
-    transition: transform 300ms ease-in;
-  }
-</style>
-
-<script>
-import Dropzone from 'dropzone';
-import Service from './service.html';
-import prettyBytes from 'pretty-bytes';
-
-// Third party libraries imports
-import * as tus from 'tus-js-client';
-
-export default {
-  components: { Service },
-  data() {
-    return {
-      filetypes: '*',
-      used: 0,
-      quota: 0,
-      uploading: { total: 0, now: 0 },
-      dragging: false,
-      maxFilesize: 10, // in MB default
-      chunkSize: 0, // 0 by default, so no chunking
-      instanceId: 0,
-    };
-  },
-  computed: {
-    prettyQuota: quota => prettyBytes(quota),
-    prettyUsed: used => prettyBytes(used),
-  },
-  oncreate() {
-    this.Uploads = this.refs.Uploads.instance();
-
-    // read the quota and used space from the Uploads service
-    this.set({ quota: this.Uploads.quota, used: this.Uploads.used });
-
-    // check if should process uploads with XHR depending on the chunkSize
-    const autoProcessQueue = !this.get('chunkSize');
-    // console.log("Dropzone oncreate autoProcessQueue:", autoProcessQueue);
-
-    // Initialize Dropzone component
-    this.dropzone = new Dropzone(this.refs.dropzone, {
-      acceptedFiles: this.get('filetypes') || 'application/offset+octet',
-      url: this.Uploads.getUploadURL(),
-      headers: this.Uploads.getAuthHeaders(),
-      accept: this.Uploads.accept.bind(this.Uploads),
-      uploadMultiple: false,
-      maxFilesize: this.get('maxFilesize'),
-      // Disable the default XHR upload handler to use TUS instead
-      autoProcessQueue: autoProcessQueue,
-    });
-
-    const events = {
-      dragenter: this._onDragEnter.bind(this),
-      dragleave: this._onDragLeave.bind(this),
-      drop: this._onDragLeave.bind(this),
-      addedfile: this._onUploadStart.bind(this),
-      thumbnail: this._onThumbnail.bind(this),
-      error: this._onError.bind(this),
-      uploadprogress: this._onUploadProgress.bind(this),
-      processing: this._updateFileState.bind(this, 'processing'),
-      sending: this._updateFileState.bind(this, 'sending'),
-      success: this._updateFileState.bind(this, 'success'),
-      complete: this._updateFileState.bind(this, 'complete'),
-      canceled: this._updateFileState.bind(this, 'canceled'),
-      complete: this._onUploadComplete.bind(this),
-      totaluploadprogress: this._onTotalUploadProgress.bind(this),
-      queuecomplete: this._onQueueComplete.bind(this),
-    };
-
-    for (const event in events) {
-      this.dropzone.on(event, events[event]);
-    }
-  },
-  // TODO implement ondestroy
-  methods: {
-    _onDragEnter() {
-      this.set({ dragging: true });
-      this.fire('dragging', true);
-    },
-    _onDragLeave() {
-      this.set({ dragging: false });
-      this.fire('dragging', false);
-    },
-    _onUploadStart(file) {
-      console.log("Dropzone _onUploadStart file:", file);
-
-      // get the chunk size from the component
-      const chunkSize = this.get('chunkSize');
-      // console.log("Dropzone _onUploadStart chunkSize:", chunkSize);
-
-      // get the TUS endpoint path from the Uploads service
-      let endpointPath = this.Uploads.getUploadURL();
-      console.log("Dropzone _onUploadStart TUS endpoint:", endpointPath);
-
-      /* Initialize TUS upload */
-      if(chunkSize) {
-        const upload = new tus.Upload(file, {
-          endpoint: endpointPath,
-          headers: this.Uploads.getAuthHeaders(),
-          retryDelays: [0, 3000, 5000, 10000, 20000],
-          chunkSize: chunkSize * 1024 * 1024, // in MB
-          metadata: {
-            filename: file.name,
-            filetype: file.type,
-          },
-          onError: (error) => {
-            // console.error("Failed because: " + error);
-            this._onError(file, error);
-          },
-          onProgress: (bytesUploaded, bytesTotal) => {
-            const percentage = (bytesUploaded / bytesTotal * 100);//.toFixed(2);
-            // console.log("Dropzone TUS Client Progress:", percentage);
-            this._onUploadProgress(file, percentage, bytesUploaded);
-          },
-          onSuccess: (payload) => {
-            // console.log("Dropzone TUS Client onSuccess:", upload);
-
-            // if the response is not empty, then the upload to widgetic server finished
-            if(upload._req._xhr.response == "") {
-
-              console.log("Dropzone TUS Client Upload Complete to server for file:", upload);
-
-              // update the file thumbnail to processing state
-              this._updateFileState('sending', file);
-            }
-
-            else {
-              console.log("Dropzone TUS Client Upload Complete to B2 with response:", upload._req._xhr.response);
-
-              // create uploadFile object
-              let uploadFile =  upload.file;
-
-              // add the request to the file object for later use in Uploads.uploadComplete method
-              uploadFile.xhr = upload._req._xhr;
-
-              // call upload complete method from here that calls the Uploads.uploadComplete method
-              this._onUploadComplete(uploadFile);
-            }
-          }
-        });
-
-        // Start the TUS upload
-        upload.start();
-      }
-
-      // fire new event in the editor
-      this.fire('new', file);
-
-      // call uploadStart method on Uploads service
-      this.Uploads.upload(file);
-
-      // change the file state to uploading
-      this._updateFileState('sending', file);
-    },
-    _onThumbnail(file, thumbnail) {
-      this.Uploads.setThumbnail(file, thumbnail);
-    },
-    _onError(file, error) {
-      // console.error(error);
-      
-      // Fire an error event in the editor
-      this.fire('error', { message: error });
-
-      // Set the error on the file object in the Uploads service
-      this.Uploads.setError(file, error);
-    },
-    _onUploadProgress(file, percentage, size) {
-      this.Uploads.setUploadProgress(file, percentage, size);
-    },
-    _onUploadComplete(file) {
-      // console.log("Dropzone Component cploadComplete for file:", file);
-      this.Uploads.uploadComplete(file, this.get('instanceId'));
-    },
-    _updateFileState(state, file) {
-      // console.log("Dropzone Component _updateFileState:", state);
-      this.Uploads.setUploadState(file, state);
-    },
-    _onTotalUploadProgress() {
-      const total = this.dropzone.getAcceptedFiles().length;
-      const queued = this.dropzone.getQueuedFiles().length;
-      const uploading = this.dropzone.getUploadingFiles().length;
-      const now = total - queued;
-
-      this.set({ uploading: { total, now } });
-    },
-    _onQueueComplete() {
-      this.dropzone.removeAllFiles();
-    },
-    _onUploadsUpdate() {
-
-      // console.log("Dropzone _onUploadsUpdate:", this.Uploads.quota, this.Uploads.used);
-
-      // Update the quota and used space so it updates in the dropzone UI
-      this.set({
-        quota: this.Uploads.quota,
-        used: this.Uploads.used,
-      });
-    },
-  },
-};
-</script>

package/src/editor/content/browser/file.html

@@ -1,124 +0,0 @@
-<Service ref:Sounds
-  service="Sounds"
-  on:state="_onSoundsStateChange(file.id)"
-  />
-
-<div class="browser-{{ file.type }} {{ state }} browser-entry activateable upload--is-{{file.state}} {{ selected ? 'active' : '' }} {{ file.error ? 'upload-error' : '' }}">
-  <div class="browser-entry-prew browser-entry-prew--{{ selectedIcon }}" on:click="fire( 'select', file )">
-    <span class="browser-entry-icon"></span>
-    {{#if file.error}}
-      <svg class="icon icon-error"><use xlink:href="#icon-error"></use></svg>
-    {{/if}}
-    {{#if file.thumbnail}}
-      <div class="browser-image-prew_img" style="background-image: url('{{ file.thumbnail }}')" width="112" height="71"/>
-    {{/if}}
-
-    <div class="progress-bar">
-      {{#if file.progress === 100 && file.state === 'sending'}}
-        <div style="width: 100%">Processing...</div>
-      {{else}}
-        <div class="progress-bar_fill" style="width: {{ file.progress }}%"></div>
-      {{/if}}
-    </div>
-    
-  </div>
-  <div class="browser-entry-info" on:click="togglePlay()">{{ file.name }}</div>
-</div>
-
-<style>
-  .browser-entry-icon {
-    display: none;
-  }
-
-  .upload--is-complete .browser-entry-icon {
-    display: block;
-  }
-
-  .browser-entry-info:before {
-    display: none;
-  }
-
-  .browser-audio.upload--is-complete .browser-entry-info:before {
-    display: inline-block;
-  }
-
-  .icon-error {
-    position: absolute;
-    top: 0;
-    left: 45px;
-    width: 20px;
-    height: 100%;
-    z-index: 1;
-  }
-
-  .browser-image-prew_img {
-    opacity: 1;
-  }
-
-  .upload-error .browser-entry-prew:after {
-    display: none;
-  }
-
-  .upload--is-sending .browser-image-prew_img,
-  .upload-error .browser-image-prew_img {
-    opacity: .2;
-  }
-
-  .progress-bar {
-    background: #cccacf;
-    position: absolute;
-    top: 32px;
-    width: 80px;
-    left: 15px;
-    height: 7px;
-    border-radius: 3px;
-    font-family: 'ProximaNova-Regular';
-    font-size: 12px;
-  }
-  .progress-bar_fill {
-    background: #adadb3;
-    height: 100%;
-    border-radius: inherit;
-    transition: width 100ms linear;
-  }
-
-  .upload--is-sending .progress-bar {
-    background: transparent;
-  }
-
-  .upload--is-complete .progress-bar {
-    display: none;
-  }
-</style>
-
-<script>
-import Service from './service.html';
-
-export default {
-  components: { Service },
-  data() {
-    return {
-      file: undefined,
-      selected: false,
-      state: 'paused',
-      selectedIcon: 'check',
-    };
-  },
-  methods: {
-    togglePlay() {
-      const file = this.get('file');
-      if (file.type !== 'audio') return this.fire('select', file);
-      if (!file.url) throw new Error('File is missing the URL');
-
-      this.refs.Sounds.instance().load(file.id, file.url);
-      this.refs.Sounds.instance().togglePlay(file.id);
-    },
-
-    _onSoundsStateChange(id) {
-      this.set({
-        state: this.refs.Sounds.instance().getState(id),
-      });
-    },
-  },
-};
-</script>

package/src/editor/content/browser/scroll-pane.html

@@ -1,32 +0,0 @@
-<div ref:nano class="nano scrolling-container">
-  <div class="scroll-content">{{ yield }}</div>
-</div>
-
-<script>
-export default {
-  oncreate() {
-    $(this.refs.nano).nanoScroller({
-      preventPageScrolling: true,
-      disableResize: true,
-      contentClass: 'scroll-content',
-      paneClass: 'scroll-pane',
-    });
-  },
-
-  ondestroy() {
-    $(this.refs.nano).nanoScroller({ destroy: true });
-  },
-
-  methods: {
-    update() {
-      $(this.refs.nano).nanoScroller();
-    },
-    scrollTop() {
-      $(this.refs.nano).find('.scroll-content').animate({ scrollTop: 0 }, 500);
-    },
-    scrollBottom() {
-      $(this.refs.nano).nanoScroller({ scroll: 'bottom' });
-    },
-  },
-};
-</script>

package/src/editor/content/browser/service.html

@@ -1,53 +0,0 @@
-<script>
-import Container from "Core/services/container/instance";
-
-export default {
-  data() {
-    return { service: null };
-  },
-
-  computed: {
-    instance: service => Container[service], // get the service instance
-  },
-
-  oncreate() {
-    this._unsubscribes = [];
-    this._proxiedProperties = [];
-
-    this.observer = this.observe("instance", this._subscribe.bind(this));
-  },
-
-  ondestroy() {
-    this._unsubscribe();
-    this.observer.cancel();
-  },
-
-  methods: {
-    instance() {
-      return this.get("instance");
-    },
-
-    /**
-     * Subscribe to the instance's events and fire them on the component
-     */
-    _subscribe(instance) {
-      this._unsubscribe();
-
-      for (let name in instance.events) {
-        // store the unsubscribe handle
-        this._unsubscribes.push(
-          // link instance events to component events
-          instance.events[name](value => {
-            this.fire(name, value);
-          }),
-        );
-      }
-    },
-
-    _unsubscribe() {
-      this._unsubscribes.forEach(unsubscribe => unsubscribe());
-      this._unsubscribes = [];
-    },
-  },
-};
-</script>

package/src/editor/content/browser/upload.coffee

@@ -1,44 +0,0 @@
-Controller 		= window.require 'spine/controller'
-Activateable	= window.require 'spine/controller/activateable'
-
-Container = require("../../../core/services/container/instance").default;
-UploadComponent = require('./upload.html').default
-
-module.exports = class UploadBrowser extends Controller
-  @include Activateable
-
-  @isCompatible: (types) ->
-    return false if !types
-    return types.some (type) => type in ['audio', 'image', 'video']
-
-  className: 'browser activateable upload-browser'
-  attributes: authenticated: true
-  title: 'uploads'
-
-  constructor: (options) ->
-    super
-    @_initilized = new Promise((res) => @_resolve = res)
-
-    { filetypes = [] } = options
-    filetypes = filetypes.join(',')
-    @options = Object.assign(options, { filetypes })
-
-    @on 'activate', =>
-      @_init() if !@component
-      @component.activate()
-
-  _init: ->
-    @component = new UploadComponent target: @el[0], data: @options
-    @component.on 'error', (ev) => @$trigger 'error', 'Error: ' + ev.message
-    @component.on 'toggle', (event) => @trigger 'toggle', event
-    @component.on 'clearContent', (event) => @trigger 'clearContent', event
-    @component.observe 'loading', (loading) => @el.toggleClass('loading', loading)
-    @_resolve()
-
-  set: (state) ->
-    @_initilized.then =>
-      @component.set state
-
-  observe: (args...)->
-    @_initilized.then =>
-      @component.observe args...