@widgetic/editor 3.11.4 → 4.0.2

package/src/editor/editor.coffee

@@ -1,274 +0,0 @@
-
-
-Tabs    = window.require 'spine/controller/tabs'
-
-ContentModel = window.require 'core/models/content'
-SkinModel    = window.require 'core/models/skin'
-Composition  = window.require 'core/models/composition'
-WidgetModel  = window.require 'core/models/widget'
-
-Skin    = require './skin'
-Content = require './content'
-Details = require './details'
-Save   	= require './save'
-Footer  = require './footer'
-
-timestamp = window.require 'spine/utils/timestamp'
-
-LoginPopup = require './login-popup'
-
-class WidgetEditor extends Tabs
-	tabContainer 		: require './footer'
-	tabRenderer			: require './footer/breadcrumb'
-	className	 		: 'editor'
-	tabContainerClass 	: 'editor-footer'
-	containerClass 		: 'editor-container'
-
-	###
-	DOM Events and their handlers
-	###
-	events:
-		'viewChange':                    '_onViewChange'
-		'Footer:step':                   '_onStep'
-		'Breadcrumb:step':               '_onStep'
-		'Save:close':                    '_onSaveClose'
-		'DetailsEditor:empty':           '_onDetailsEditorEmpty'
-		'editor:content:notification':   '_onContentNotification'
-		'editor:content:browserState':   '_onContentBrowserState'
-
-	###
-	A list of Controllers that should be created in this TabsController
-	###
-	controllers:
-		'skin':    Skin
-		'content': Content
-		'details': Details
-		'save':    Save
-
-	###
-	An object containing associations between the step name and the step
-	controller reference
-	###
-	steps:
-		'skin':     'skin'
-		'edit_skin':'skin'
-		'theme':    'skin'
-		'content':  'content'
-		'details':  'details'
-		'done':     'save'
-
-	###
-	Collection of validation functions for displaying editors
-
-	Each function is ran before trying to activate an editor.
-	###
-	stepValidators:
-		'skin': ->
-			return console.warn 'No composition set' unless @composition
-			return true
-		'edit_skin': -> @stepValidators['skin'].call(@) and !@canEditSkin? or @canEditSkin
-		'theme': -> @stepValidators['skin'].call(@)
-		'content': ->
-			return false unless @stepValidators['skin'].call @
-			if @hasPendingChange()
-				@initSave()
-				@step 'skin'
-				return false
-			return true
-		'details': ->
-			return false unless @stepValidators.content.call @
-			unless @composition.hasEnoughContent()
-				@content.notificator.notify @composition.validateLength().errorMsg
-				@step 'content'
-				return false
-			return true
-		'done': ->
-			return false unless @stepValidators['details'].call @
-			return true
-
-	###
-	Creates the embedded Editors, Navigation and binds events
-	###
-	constructor: ->
-		timestamp 'WidgetEditor:constructor'
-		super
-		@children (child) => child.setPremium? @premium
-		@refreshElements()
-		@el.append @tabs.el
-		LoginPopup.place @el
-		Blogvio.pubsub.subscribe 'api/token/update', @_updateLoggedInStatus
-
-		@el.attr('editorVersion', VERSION)
-
-	###
-	Initializes all embbedded Editors to work on a composition
-	Starts waiting for all of the `initialized` events
-	Navigates to the 'skin' step
-	###
-	for: (composition) ->
-		timestamp 'WidgetEditor:for'
-		@initialize(composition)
-		@skin.for(@composition)
-		@content.for(@composition)
-		@details.for(@composition)
-		@save.for(@composition)
-		@
-
-	initialize: (composition) ->
-		timestamp 'WidgetEditor:initialize'
-		@stopListening(@composition)
-		@composition = composition
-
-		@_waitForInit()
-
-		@_updatePersistedStatus()
-		@_updateLoggedInStatus()
-
-		@listenTo @composition, 'validateLength', @_onValidateLength
-		@composition.validateLength()
-
-		$(window).on 'beforeunload', @onBeforeUnload
-
-	###
-	Tests if there are any pending (unsaved) changes in the editors
-	###
-	hasPendingChange: -> @skin.hasPendingChange()
-
-	###
-	Initializes the save dialog when there is a pending change
-	###
-	initSave: -> @skin.initSave()
-
-	###
-	Jump to a step (one of the editors)
-	###
-	step: (step) ->
-		return console.warn "The editor does not have the #{step} step." unless @steps[step]
-		stepController = @[@steps[step]]
-		stepController.active step if @stepValidators[step].call @
-		@_updatePersistedStatus()
-
-	selectSkin: (skin, force = true) -> @skin.select(skin, force)
-
-	###
-	Event Handler for step navigation events
-	###
-	_onStep: (ev, step) ->
-		@step(step)
-		@$trigger 'step:intent', {step, skin_pending: @hasPendingChange(), content: @composition.hasEnoughContent()}
-
-	###
-	Event Handler for the Composition `validateLength` event
-
-	Updates the `minValid` and `maxValid` attributes on the editor DOM element
-	Used for styling based on the validation state
-	###
-	_onValidateLength: (_, valid, error) =>
-		return unless @composition
-		@el.attr minValid: valid or error isnt 'min', maxValid: valid or error isnt 'max'
-
-	_updatePersistedStatus: =>
-		@el.attr 'persisted-comp', @composition.isPersisted()
-
-	_updateLoggedInStatus: =>
-		# timestamp 'WidgetEditor:_updateLoggedInStatus'
-
-		status = Blogvio.auth.status()
-		isConnected = status.status is 'connected'
-
-		@el.toggleClass('anonymous-user', !isConnected)
-
-	###
-	Event Handler for the `viewChange` events launched by the editors
-
-	Updates the `current-view` attribute on the editor DOM element
-	Used for styling based on the current view
-	###
-	_onViewChange: (ev, view) =>
-		@el.attr 'current-view', view
-
-	###
-	Binds event listeners for the Editors' `initialized` event
-	###
-	_waitForInit: =>
-		@initCount = 0
-		@listenToOnce @skin,    'initialized', @_onInitialized
-		@listenToOnce @content, 'initialized', @_onInitialized
-		@listenToOnce @details, 'initialized', @_onInitialized
-
-	###
-	Event Handler for the Editors `initialized` event
-
-	Triggers the WidgetEditor `initialized` event when all of
-	the embbedded editors have finised initalization.
-	TODO: check if this still works
-	###
-	_onInitialized: =>
-		return if ++@initCount isnt 3
-
-		@trigger 'initialized'
-
-	###
-	Event Handler for the `editor:content:notification` event
-	###
-	_onContentNotification: (ev, options) ->
-		@el.attr 'notification-visible', options.show
-
-	###
-	Event Handler for the `editor:content:browserState` event
-	###
-	_onContentBrowserState: (ev, options) ->
-		@el.attr 'content-browser-service', options.service
-		@el.attr 'content-browser-auth', options.authenticated
-
-	###
-	Event Handler for the `DetailsEditor:empty` event
-
-	Navigate to the content editor when there is no content to
-	display in the details editor
-	###
-	_onDetailsEditorEmpty: -> @step 'content'
-
-	###
-	Event Handler for the `Save:close` event
-
-	Navigate to the details editor when the save editor's login
-	popup is closed
-	###
-	_onSaveClose: -> @step 'details'
-
-	setOptions: do ->
-		_methods = {
-			'skin_editor', 'step', 'navigation'
-			'skin':'selectSkin'
-			'composition':'setCompositionName'
-			'sources': 'addContentSources'
-			'active_source': 'activateSource'
-		}
-		(opts = {}) -> @[_fn]? params for prop, _fn of _methods when params = opts[prop]
-
-	navigation: (opts) =>
-		@el.attr 'data-steps', opts.steps.join ' ' if opts.steps?
-		@tabs.setOptions arguments...
-
-	skin_editor: (opts = {}) =>
-		@canEditSkin = opts.enabled if opts.enabled?
-		@skin.setOptions opts
-
-	addContentSources: (sources = {}) ->
-		@content.addBrowser source, sourceName for sourceName, source of sources
-
-	setCompositionName: (opts = {}) =>
-		@composition.name = opts.name if opts.name?
-
-	activateSource: (source) =>
-		@content.focusBrowser source
-
-	release: ->
-		@_release @
-		super
-
-	onBeforeUnload: =>
-		return 'There are some unsaved changes!' if @hasPendingChange()
-
-module.exports = WidgetEditor

package/src/editor/footer/breadcrumb.coffee

@@ -1,17 +0,0 @@
-Controller   = window.require 'spine/controller'
-Activateable = window.require 'spine/controller/activateable'
-class Breadcrumb extends Controller
-	@include Activateable
-	tag:'a'
-	events:
-		'click':'click'
-
-	render: =>
-		@$addClass(@panel.title.toLowerCase()).html(@panel.title)
-		@
-
-	click: ->
-		@$trigger 'Breadcrumb:step', @panel.title.toLowerCase()
-
-	
-module.exports = Breadcrumb

package/src/editor/footer/index.coffee

@@ -1,36 +0,0 @@
-Activator 	= window.require 'spine/controller/activator'
-Content 	= window.require 'core/models/content'
-Composition = window.require 'core/models/composition'
-class Footer extends Activator
-	className		: 'editor-footer'
-	containerClass 	: 'editor-breadcrumbs'
-	events:
-		'click .editor-next-btn':'getStep'
-		'click .editor-prev-btn':'getStep'
-
-	init: =>
-		@prevBtn = $ "<div class='editor-prev-btn' data-dir='prev'>prev</div>"
-		@nextBtn = $ "<div class='editor-next-btn' data-dir='next'></div>"
-		@append @prevBtn, @nextBtn
-		super
-
-	getStep: (e) ->
-		currentStep = @children( (i)->i.isActive() )[0]
-		return unless currentStep
-		desiredStep = currentStep.el[($ e.target).data('dir')]().controller().panel.title.toLowerCase()
-		@$trigger 'Footer:step', desiredStep
-	
-	_active:(@ctrl)=>
-		super
-		@prevBtn.toggleClass 'disabled', !@ctrl.el.prev().controller()?
-
-	setOptions: (opts) =>
-		@el.toggle opts.enabled if opts.enabled?
-		return unless opts.steps
-
-		@children (ch) -> 
-			ch.el.remove() unless ch.panel.title.toLowerCase() in opts.steps
-
-		@_active @ctrl
-
-module.exports = Footer

package/src/editor/index.coffee

@@ -1,79 +0,0 @@
-Controller   = window.require 'spine/controller'
-Container    = window.require 'spine/controller/container'
-
-WidgetEditor = require './editor'
-RemotePreview = require './remote-preview'
-Widget  = window.require 'core/models/widget'
-Composition  = window.require 'core/models/composition'
-Skin  = window.require 'core/models/skin'
-Content = window.require 'core/models/content'
-
-class Editor extends Controller
-	@include Container
-	@VERSION: '1.9.24'
-
-	events:
-		'SkinItem:selected': '_onSkinItemSelected'
-
-	constructor: (options) ->
-		if !options.remote then throw new Error('Remote UI.composition is missing!')
-		if !options.premium then options.premium = false
-		super
-
-		@preview = new RemotePreview(@remote)
-		@editor = new WidgetEditor({@premium})
-		@append @editor
-		$('html').toggleClass('isTouch', !!("undefined" != typeof document.documentElement.ontouchstart))
-
-	hasPendingChange: -> @editor.hasPendingChange()
-
-	initSave: -> @editor.initSave()
-
-	new: (widget_id) ->
-		@preview.startLoading()
-		Widget.load(widget_id)
-			.then(@_newComposition)
-			.then(@_initialize)
-			.then(=> @setOptions())
-			.fail((e) -> console.error(e))
-
-	edit: (composition_id) ->
-		Composition.load(composition_id)
-			.then(@_editComposition)
-			.then(@_initialize)
-			.then(=> @setOptions())
-			.fail((e) -> console.error(e))
-
-	step: -> @editor.step arguments...
-
-	selectSkin: (skin) -> @editor.selectSkin(skin)
-
-	_newComposition: (@widget) =>
-		@composition = new Composition
-			widget_id: @widget.id
-			width: @widget.width
-			height: @widget.height
-
-		@composition.save({ajax:false})
-
-	_editComposition: (@composition) =>
-		@widget = @composition.getWidget()
-
-	_initialize: =>
-		@editor.for @composition
-		@preview.load @composition
-
-	_onSkinItemSelected: (ev, skin) =>
-		@trigger('skin:select', skin)
-		@preview.setSkin(skin)
-
-	setInitOptions: (@initOptions) ->
-
-	setOptions: (opts) -> @editor.setOptions $.extend step: 'skin', opts or @initOptions
-
-	release: ->
-		@_release @
-		@preview.release()
-		super
-
-module.exports = Editor

package/src/editor/listeners/embed-listener.coffee

@@ -1,143 +0,0 @@
-send = (message) ->
-  (window.opener or window.parent).postMessage(JSON.stringify(message), '*')
-
-id = window.location.hash.replace('#', '')
-initOptions = {}
-_authToken = null
-
-messenger = {
-  load: -> send({t: 'w', id: id})
-  notify: (ev, data) ->
-    ev = ev.type || ev
-    send(t: 'ee', id: id, d: data, e: ev)
-}
-
-loadScript = (url, callback) ->
-    head = document.getElementsByTagName('head')[0]
-    script = document.createElement('script')
-    script.type = 'text/javascript'
-    script.src = url
-
-    script.onreadystatechange = callback
-    script.onload = callback
-
-    head.appendChild(script)
-
-# A function to be called when the composition iframe is ready
-ready = (_, data = {}) ->
-  # get the composition iframe by id
-  preview = data.preview or data.source.frames[id]
-  # console.log("ready preview:", preview);
-  return unless preview
-  preview.Blogvio.auth.token _authToken
-  window.require._require.push preview.require
-
-  # initialize the Blogvio.api relay
-  {composition, widget, user} = preview.getData()
-  if !user then user = {
-    "id": "591bf4ecd85c6d076c787001",
-    "premium": false,
-    "upload_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI1OTFiZjRlY2Q4NWM2ZDA3NmM3ODcwMDEiLCJjb250ZXh0Ijp7ImlkIjoiYXBwIiwibmFtZSI6ImFwcCJ9LCJtYXhRdW90YSI6MTAwMDAwMDAwMCwiYXVkIjoiZmlsZS11cGxvYWQiLCJleHAiOjE2MjI2MjY4NTF9.Hg_6L3taBamqc9hkxk9cMWh3HihwyvtMzev_K384xPE"
-  }
-  # console.log("ready user:", user);
-
-  initEditor composition, widget, preview, user
-
-initEditor = (composition, widget, remote, user) ->
-  ($body = $ 'body').toggleClass 'is-popup', !!window.opener
-  Editor = require("../index")
-  premium = user?.premium || false
-
-  Container = require('../../core/services/container').default
-  # console.log("Init Editor:", user);
-  Container.init({
-    user,
-    uploadToken: user?.upload_token || ''
-  })
-
-  window.editor = new Editor {
-    el: $body,
-    remote, initOptions, premium
-  }
-
-  if composition
-    editor.edit(composition.id)
-      .then(notifyInit)
-      .fail((e) -> console.log(e.stack))
-  else
-    editor.new(widget.id)
-      .then(notifyInit)
-      .fail((e) -> console.log(e.stack))
-
-  editor.bind('skin:select', (skin) -> messenger.notify('skin:select', skin))
-  editor.$bind('skin:save', (_, skin) -> messenger.notify('skin:save', skin))
-  editor.$bind('skin:destroy', (_, skin) -> messenger.notify('skin:destroy', skin))
-  editor.$bind('composition:save', messenger.notify)
-  editor.$bind('composition:temporary:save', messenger.notify)
-  editor.$bind('content:auth-req', messenger.notify)
-  editor.$bind('step:intent', messenger.notify)
-  editor.$bind('Control:upgrade', messenger.notify)
-  editor.$bind('Content:upgrade', messenger.notify)
-
-  $(window).on 'unload', window.editor.release.bind editor
-
-  return editor
-
-notifyInit = ->
-  messenger.notify('editor:init')
-
-# relay mouse and keyboard events to the parent frame
-eventToObject = (event) ->
-  res = {}
-  for key, value of event
-    continue if typeof value is 'object'
-    res[key] = value
-  return res
-
-relayEvent = (ev) ->
-  Widgetic.Event.on window, ev, (ev) ->
-    messenger.notify Widgetic.UI.Editor.RELAY, eventToObject(ev)
-
-# Adds postMessage event listeners and notifies that the editor
-# iframe is ready
-run = ->
-  receivers = {
-    'ready': ready
-    'step': (e) -> window.editor.step(e.d)
-    'token': (e) ->
-      if e.d
-        Blogvio.auth.token(_authToken = e.d)
-        window.editor?.preview.remote.Blogvio.auth.token _authToken
-      else Blogvio.auth.disconnect()
-    'cont': (e) ->
-      window.editor.el.trigger "content:#{e.d.source}:add", items: e.d.data
-    'opts': (e) ->
-      return initOptions = e.d unless window.editor
-      if window.editor.composition then window.editor.setOptions e.d else window.editor.setInitOptions e.d
-    'ree': (e) -> relayEvent(e.d)
-  }
-
-  wl = window.location
-  lo = decodeURIComponent (wl.search.match(/(?:lo=)([^\#\&$]*)/) or [0,wl.origin])[1]
-  receiver = (event) ->
-    return unless event.origin is lo
-    try
-      data = JSON.parse(event.data)
-      receivers[data.t]?(data, source: event.source)
-    catch e
-      debugger if window.localStorage?.debug_on_error
-      console.error e.stack
-    return
-
-  Blogvio.Event.on window, 'load', ->
-    # bind listener for `message`
-    Blogvio.Event.on(window, 'message', receiver)
-
-    # notify load
-    messenger.load()
-
-  # on window unload release the editor and restore the preview
-  Blogvio.Event.on window, 'unload', ->
-    window.editor.release()
-
-module.exports = {run, ready}

package/src/editor/login-popup.coffee

@@ -1,29 +0,0 @@
-Popup	= require './popup'
-
-class LoginPopup extends Popup
-	className: 'popup login-popup'
-
-	confirmBtnClass: 'dim-button button--uc login-button'
-	cancelBtnClass: 'green-button button--uc button--icon-right button--go register-button'
-	title: 'Login or sign up.'
-	content: ''
-	note: ''
-	separator: false
-	confirmBtn: 'Log in'
-	cancelBtn: 'Sign up free'
-
-	setTitle: (title = 'Login or sign up.') ->
-		@title = title
-		@render @
-		@
-
-	place: (place) ->
-		@pop = @pop.bind @, place
-
-	onConfirm: ->
-		@$trigger 'login-intent'
-
-	onCancel: ->
-		@$trigger 'signup-intent'
-
-module.exports = new LoginPopup

package/src/editor/notification-controller.coffee

@@ -1,35 +0,0 @@
-class NotificationController
-	className: 'message notification'
-	template: (message) =>
-		"<div class='text'>#{message}</div><div class='close' data-icon='x'></div>"
-
-	constructor: ->
-		@el = $ "<div class=\"#{@className}\">"
-		@message = ''
-		@el.on 'click', '.close', @close
-		@el.on 'click', @_onClick
-
-	render: (@message = @message)=>
-		@el.html @template @message
-
-	close: (ev) =>
-		ev?.stopPropagation()
-		clearTimeout @interval
-		@el.transition top: -60, queue: false
-		@el.trigger 'editor:notification', show: false
-
-	notify: (message, options = {}) =>
-		@el.trigger 'editor:notification', show: true
-		@render message
-
-		clearTimeout @interval
-		@clickAction = options.onClick
-		@el.show().stop(true,false).transition top: 0, =>
-			@interval = setTimeout @close, options.interval || 3000
-
-	_onClick: (ev) =>
-		ev.preventDefault()
-		@clickAction?()
-		@close(ev)
-
-module.exports = NotificationController

package/src/editor/popup.coffee

@@ -1,68 +0,0 @@
-Controller = window.require 'spine/controller'
-
-class Popup extends Controller
-	className:	'popup'
-	template:	require './views/popup'
-
-	_confirmBtnClass: 'confirm-button'
-	_cancelBtnClass: 'cancel-button'
-
-	events:
-		'click .close':				'close'
-		'click .confirm-button':	'confirm'
-		'click .cancel-button':		'cancel'
-		'keyup':					'keyup'
-
-	###
-	Popup constructor
-	@param [Object]:
-		[String] confirmBtnClass - Confirm button class
-		[String] cancelBtnClass  - Cancel button class
-		[String] title		- Popup Title
-		[String] content 	- Popup ExtraContent
-		[String] note
-		[String] confirmBtn	- Confirm button text
-		[String] cancelBtn 	- Cancel button text
-		[Bool] separator	- Show or not the separator (default: false)
-	###
-	constructor:->
-		super
-		@render @
-
-	render: (item) ->
-		@el.html @template
-			confirmBtnClass: [@_confirmBtnClass, item.confirmBtnClass].join ' '
-			cancelBtnClass: [@_cancelBtnClass, item.cancelBtnClass].join ' '
-			title: item.title
-			content: item.content
-			note: item.note
-			confirm: item.confirmBtn
-			cancel: item.cancelBtn
-			separator: item.separator or false
-		@item = item
-		@
-
-	keyup:(e)-> @confirm() if e.keyCode is 13
-
-	confirm: => @_remove() and @onConfirm()
-
-	cancel: => @_remove() and @onCancel()
-
-	close: => @_remove() and @trigger 'canceled'
-
-	onConfirm: => @trigger 'confirmed'
-
-	onCancel: => @trigger 'canceled'
-
-	pop: (place, @onConfirm = @onConfirm, @onCancel = @onCancel) =>
-		return if @el.is ':visible'
-		place.append @el.stop(true, true).css(opacity: 0).show().animate opacity: 1, 250
-		@el.unbind('click', @_close).bind 'click', @_close
-
-	_remove: =>
-		@el.stop(true, true).animate opacity: 0, 250, => @el.hide().detach()
-
-	_close: (e) =>
-		do @close if @el.is e.target
-
-module.exports = Popup