uploadcare-widget 0.9 → 0.11.1

data/app/assets/javascripts/uploadcare/core/boot.js.coffee

@@ -1,6 +1,5 @@
 # = require ./namespace
 # = require ./jquery
 # = require ./jquery-role
-# = require ./raphael
 # ≠ require ./testing
 # = require ./pusher

data/app/assets/javascripts/uploadcare/core/namespace.coffee

@@ -18,4 +18,15 @@ uploadcare.namespace = (path, fn) ->
   fn(target)
 
 uploadcare.expose = (key, value) ->
-  window.uploadcare[key] = value || uploadcare[key]
+  parts = key.split('.')
+  last = parts.pop()
+
+  target = window.uploadcare
+  source = uploadcare
+
+  for part in parts
+    target[part] ||= {}
+    target = target[part]
+    source = source?[part]
+
+  target[last] = value || source[last]

data/app/assets/javascripts/uploadcare/files.js.coffee

@@ -41,18 +41,10 @@ namespace 'uploadcare', (ns) ->
     input: (settings, input) ->
       [new f.InputFile(settings, input)]
     url: (settings, urls) ->
-      # We also accept plain UUIDs here for an internally used shortcut.
-      # Typically, you should use the `uploaded` converter for clarity.
       unless $.isArray(urls)
         urls = [urls]
       for url in urls
-        cdnBase = utils.escapeRegExp(settings.cdnBase)
-          .replace(/^https?/i, 'https?')
-        cdn = new RegExp("^#{cdnBase}/#{utils.uuidRegex.source}", 'i')
-        if utils.fullUuidRegex.test(url) || cdn.test(url)
-          new f.UploadedFile settings, url
-        else
-          new f.UrlFile settings, url
+        new f.UrlFile settings, url
     uploaded: (settings, uuids) ->
       unless $.isArray(uuids)
         uuids = [uuids]
@@ -65,3 +57,16 @@ namespace 'uploadcare', (ns) ->
           new f.ReadyFile(settings, fileData)
         else
           new f.DeletedFile()
+
+    # internally used shortcut
+    'url-or-uploaded': (settings, urls) ->
+      unless $.isArray(urls)
+        urls = [urls]
+      cdnBase = utils.escapeRegExp(settings.cdnBase)
+        .replace(/^https?/i, 'https?')
+      cdn = new RegExp("^#{cdnBase}/#{utils.uuidRegex.source}", 'i')
+      for url in urls
+        if utils.fullUuidRegex.test(url) || cdn.test(url)
+          new f.UploadedFile settings, url
+        else
+          new f.UrlFile settings, url

data/app/assets/javascripts/uploadcare/files/base.js.coffee

@@ -92,6 +92,9 @@ namespace 'uploadcare.files', (ns) ->
             width: img.width
             height: img.height
 
+        img.onerror = =>
+          @reject()
+
         img.src = url
       ).promise()
 
@@ -196,6 +199,6 @@ namespace 'uploadcare.utils', (utils) ->
       if utils.isFile(value)
         value
       else
-        uploadcare.fileFrom('url', value, settings)
+        uploadcare.fileFrom('url-or-uploaded', value, settings)
     else
       null

data/app/assets/javascripts/uploadcare/files/uploaded.js.coffee

@@ -24,7 +24,7 @@ namespace 'uploadcare.files', (ns) ->
   class ns.ReadyFile extends ns.BaseFile
     constructor: (settings, @__fileData) ->
       super
-      @fileId = @__fileData.file_id
+      @fileId = @__fileData.uuid
       @__uploadDf.resolve()
 
     __startUpload: ->

data/app/assets/javascripts/uploadcare/files/url.js.coffee

@@ -81,7 +81,7 @@ namespace 'uploadcare.files', (ns) ->
         success: (data) =>
           return if @__shutdown
           @__state('progress', data)
-          [@fileName, @fileId] = [data.original_filename, data.file_id]
+          [@fileName, @fileId] = [data.original_filename, data.uuid]
           @__uploadDf.resolve(this)
 
         error: =>

data/app/assets/javascripts/uploadcare/locale/en.js.coffee

@@ -37,7 +37,8 @@ uploadcare.namespace 'uploadcare.locale.translations', (ns) ->
             dropbox: 'Dropbox'
             gdrive: 'Google Drive'
             instagram: 'Instagram'
-            vk: 'Vkontakte'
+            vk: 'VK'
+            evernote: 'Evernote'
             url: 'Arbitrary Links'
         url:
           title: 'Files from the Web'

data/app/assets/javascripts/uploadcare/locale/es.js.coffee

@@ -32,7 +32,8 @@ uploadcare.namespace 'uploadcare.locale.translations', (ns) ->
             dropbox: 'Dropbox'
             gdrive: 'Google Drive'
             instagram: 'Instagram'
-            vk: 'Vkontakte'
+            vk: 'VK'
+            evernote: 'Evernote'
             url: 'Una dirección cualquiera'
         url:
           title: 'Archivos de la web'

data/app/assets/javascripts/uploadcare/locale/ru.js.coffee

@@ -39,6 +39,7 @@ uploadcare.namespace 'uploadcare.locale.translations', (ns) ->
             gdrive: 'Google Drive'
             instagram: 'Instagram'
             vk: 'ВКонтакте'
+            evernote: 'Evernote'
             url: 'Произвольную ссылку'
         url:
           title: 'Файлы с других сайтов'

data/app/assets/javascripts/uploadcare/settings.js.coffee

@@ -23,14 +23,14 @@ namespace 'uploadcare.settings', (ns) ->
     'public-key': null
     'pusher-key': '79ae88bd931ea68464d9'
     'social-base': 'https://social.uploadcare.com'
-    'tabs': 'file url facebook gdrive instagram'
+    'tabs': 'file url facebook gdrive instagram evernote'
     'url-base': 'https://upload.uploadcare.com'
     'script-base': if SCRIPT_BASE? then SCRIPT_BASE else ''
     'script-ext': '.min.js'
 
   presets =
     'tabs':
-      all: 'file url facebook vk dropbox gdrive instagram'
+      all: 'file url facebook vk dropbox gdrive instagram evernote'
       default: defaults.tabs
 
 
@@ -159,3 +159,20 @@ namespace 'uploadcare.settings', (ns) ->
     waitForSettingsCb.add (common) ->
       fn normalize $.extend({}, common, settings or {})
 
+  class ns.CssCollector
+    constructor: () ->
+      @urls = []
+      @styles = []
+
+    addUrl: (url) ->
+      if not /^https?:\/\//i.test(url)
+        throw new Error('Embedded urls should be absolute. ' + url)
+
+      unless url in @urls
+        @urls.push url
+
+    addStyle: (style) ->
+      @styles.push style
+
+  tabsCss = new ns.CssCollector
+  expose 'tabsCss', tabsCss

data/app/assets/javascripts/uploadcare/templates/circle-canvas.jst.ejs

@@ -0,0 +1 @@
+<canvas>

data/app/assets/javascripts/uploadcare/templates/circle-text.jst.ejs

@@ -0,0 +1,3 @@
+<div class="uploadcare-widget-circle-back" role="uploadcare-circle-back">
+  <div class="uploadcare-widget-circle-text" role="uploadcare-circle-text"></div>
+</div>

data/app/assets/javascripts/uploadcare/templates/tab-file.jst.ejs

@@ -11,18 +11,20 @@
   <div class="uploadcare-dialog-big-button" role="uploadcare-dialog-browse-file">
     <%- t('dialog.tabs.file.button') %>
   </div>
-  <div class="uploadcare-dialog-file-or">
-    <%- t('dialog.tabs.file.also') %>
-  </div>
-  <div class="uploadcare-dialog-file-sources">
-    <% for (var i = 0; i < avalibleTabs.length; i++) { 
-      var tab = avalibleTabs[i];
-      if (tab == 'file') continue; %>
-      <div 
-        class="uploadcare-dialog-file-source"
-        role="uploadcare-dialog-switch-tab"
-        data-tab="<%- tab %>"
-      ><%- t('dialog.tabs.file.tabNames.' + tab) %></div>
-    <% } %>
-  </div>
+  <% if (avalibleTabs.length > 1) { %>
+    <div class="uploadcare-dialog-file-or">
+      <%- t('dialog.tabs.file.also') %>
+    </div>
+    <div class="uploadcare-dialog-file-sources">
+      <% for (var i = 0; i < avalibleTabs.length; i++) {
+        var tab = avalibleTabs[i];
+        if (tab == 'file') continue; %>
+        <div
+          class="uploadcare-dialog-file-source"
+          role="uploadcare-dialog-switch-tab"
+          data-tab="<%- tab %>"
+        ><%- t('dialog.tabs.file.tabNames.' + tab) %></div>
+      <% } %>
+    </div>
+  <% } %>
 </div>

data/app/assets/javascripts/uploadcare/templates/widget-button.jst.ejs

@@ -1,4 +1,4 @@
-<li 
-  role="uploadcare-widget-buttons-<%= name %>" 
-  class="uploadcare-widget-buttons-<%= name %>"
-><%- caption %></li>
+<div
+  role="uploadcare-widget-buttons-<%= name %>"
+  class="uploadcare-widget-button uploadcare-widget-buttons-<%= name %>"
+><%- caption %></div>

data/app/assets/javascripts/uploadcare/templates/widget.jst.ejs

@@ -1,6 +1,6 @@
 <div class="uploadcare-widget">
     <div role="uploadcare-widget-status"></div>
     <div role="uploadcare-widget-status-text" class="uploadcare-widget-status-text"></div>
-    <ul role="uploadcare-widget-buttons" class="uploadcare-widget-buttons"></ul>
+    <div role="uploadcare-widget-buttons" class="uploadcare-widget-buttons"></div>
     <div class="uploadcare-widget-dragndrop-area" role="uploadcare-drop-area"><%- t('draghere') %></div>
 </div>

data/app/assets/javascripts/uploadcare/ui/progress.js.coffee

@@ -1,34 +1,21 @@
 {
   namespace,
   files,
-  jQuery: $
+  jQuery: $,
+  utils: {abilities}
 } = uploadcare
 
 {tpl} = uploadcare.templates
 
 namespace 'uploadcare.ui.progress', (ns) ->
-  class ns.Circle
-    constructor: (@element) ->
-      # should work with other jqueries
-      @element = $(@element)
-
-      @element.html(tpl('circle'))
-      @pie = @element.find('@uploadcare-widget-status')
-      @center = @element.find('@uploadcare-circle-center')
-      @element.addClass 'uploadcare-widget-circle'
-
-      @setColorTheme 'default'
-      
-      @size = Math.min(@element.width(), @element.height())
-      @pie.width(@size).height(@size)
 
-      @angleOffset = -90
-      @raphael = @__initRaphael()
-      @path = @raphael.path()
-      @path.attr(segment: 0, stroke: false)
-      @fullDelay = 500 # ms
-      @__update(0, true)
+  class ns.Circle
 
+    constructor: (element) ->
+      if abilities.canvas
+        @renderer = new ns.CanvasRenderer element
+      else
+        @renderer = new ns.TextRenderer element
       @observed = null
 
     listen: (file, selector = 'uploadProgress') ->
@@ -41,24 +28,40 @@ namespace 'uploadcare.ui.progress', (ns) ->
       @observed = file
 
       if @observed.state() is "resolved"
-        @__update 1, true
+        @renderer.setValue 1, true
       else
         @observed
           .progress (progress) =>
             # if we are still listening to this one
             if file == @observed
-              @__update selectorFn(progress)
+              @renderer.setValue selectorFn(progress)
 
           .always (uploadedFile) =>
             if file == @observed
-              @__update 1, false
+              @renderer.setValue 1, false
       @
 
-
     reset: (filled = false) ->
       @observed = null
-      @__update (if filled then 100 else 0), true
+      @renderer.setValue (if filled then 1 else 0), true
+
+    setColorTheme: (theme) ->
+      @renderer.setColorTheme theme
+
+
 
+
+  class ns.BaseRenderer
+    constructor: (el) ->
+      @element = $ el
+      @element.data 'uploadcare-progress-renderer', this
+      @element.addClass 'uploadcare-widget-circle'
+      @size = Math.min(@element.width(), @element.height())
+    setColorTheme: (theme) ->
+      if $.type(theme) is 'string'
+        theme = @colorThemes[theme]
+      @colorTheme = $.extend {}, @colorThemes.default, theme
+    setValue: (value, instant=false) -> throw new Error 'not implemented'
     colorThemes:
       default:
         back: '#e1e5e7'
@@ -71,65 +74,112 @@ namespace 'uploadcare.ui.progress', (ns) ->
         back: '#bfbfbf'
         front: '#8c8c8c'
 
+
+  class ns.TextRenderer extends ns.BaseRenderer
+    constructor: ->
+      super
+
+      $.extend true, @colorThemes, {
+        default:
+          front: '#000'
+        grey:
+          front: '#888'
+        darkGrey:
+          front: '#555'
+      }
+
+      @element.addClass 'uploadcare-widget-circle--text'
+      @element.html(tpl('circle-text'))
+      @background = @element.find('@uploadcare-circle-back')
+      @text = @element.find('@uploadcare-circle-text')
+      @setColorTheme 'default'
+
+
     setColorTheme: (theme) ->
-      if $.type(theme) is 'string'
-        theme = @colorThemes[theme]
-      @colorTheme = $.extend {}, @colorThemes.default, theme
-      
-      @pie.css 'background', @colorTheme.back
-      @center.css 'background', @colorTheme.center
+      super
+      @background.css 'background', @colorTheme.back
+      @text.css 'color', @colorTheme.front
 
-      if @raphael
-        @__update()
+    setValue: (val) ->
+      val = Math.round(val * 100)
+      @text.html "#{val} %"
 
-    __update: (val = @currentVal, instant = false) -> # val in [0..1]
-      val = 1 if val > 1
-      @currentVal = val
-      delay = @fullDelay * Math.abs(val - @value)
-      @value = val
 
-      if instant
-        @path.attr(segment: @__segmentVal(@value))
-      else do (value = @value) =>
-        @path.animate {segment: @__segmentVal(value)}, delay, 'linear', =>
-          # Revert value to current if changed during animation
-          @__update(@value, true) if @value != value
-
-    __segmentVal: (value) ->
-      # Supposed to be = 360 * value,
-      # but filling to 360 sometimes doesn't work to IE.
-      # There probably is a correct solution to this.
-      360 * if value < 1 then value else 0.99999999
-
-    __initRaphael: ->
-      raphael = uploadcare.Raphael @pie.get(0), @size, @size
-      size = @size
-      angleOffset = @angleOffset
-
-      getColor = =>
-        @colorTheme.front
-
-      raphael.customAttributes.segment = (angle) ->
-        x = size / 2
-        y = size / 2
-        r = size / 2
-        a1 = 0
-        a2 = angle
-        a1 += angleOffset
-        a2 += angleOffset
-
-        flag = (a2 - a1) > 180
-        a1 = (a1 % 360) * Math.PI / 180
-        a2 -= 0.00001
-        a2 = (a2 % 360) * Math.PI / 180
-
-        {
-          path: [
-            ["M", x, y]
-            ["l", r * Math.cos(a1), r * Math.sin(a1)]
-            ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]
-          ]
-          fill: getColor()
-        }
-      return raphael
+  class ns.CanvasRenderer extends ns.BaseRenderer
 
+    constructor: ->
+      super
+
+      @canvasSize = @size * 2
+
+      @element.addClass 'uploadcare-widget-circle--canvas'
+      @element.html(tpl('circle-canvas'))
+
+      @setColorTheme 'default'
+      @setValue 0, true
+
+      @canvasEl = @element.find('canvas')
+                  .css(width: @size, height: @size)
+                  .prop(width: @canvasSize, height: @canvasSize)
+      @canvasCtx = @canvasEl.get(0).getContext '2d'
+
+      @__reRender()
+
+    setColorTheme: (theme) ->
+      super
+      @__reRender()
+
+    __reRender: ->
+      if @canvasCtx
+        ctx = @canvasCtx
+        halfSize = @canvasSize/2
+
+        # Clear
+        ctx.clearRect 0, 0, @canvasSize, @canvasSize
+
+        # Background circle
+        ctx.fillStyle = @colorTheme.back
+        ctx.beginPath()
+        ctx.arc(halfSize, halfSize, halfSize, 0, 2*Math.PI)
+        ctx.fill()
+
+        # Progress circle
+        offset = -Math.PI / 2
+        ctx.fillStyle = @colorTheme.front
+        ctx.beginPath()
+        ctx.moveTo(halfSize, halfSize)
+        ctx.arc(halfSize, halfSize, halfSize, offset, 2*Math.PI * @val + offset)
+        ctx.fill()
+
+        # Center circle
+        ctx.fillStyle = @colorTheme.center
+        ctx.beginPath()
+        ctx.arc(halfSize, halfSize, @canvasSize/15, 0, 2*Math.PI)
+        ctx.fill()
+
+    __animateValue: (targetValue) ->
+      perStep = if targetValue > @val then 0.05 else -0.05
+      @__animIntervalId = setInterval =>
+        newValue = @val + perStep
+        if (perStep > 0 and newValue > targetValue) or (perStep < 0 and newValue < targetValue)
+          newValue = targetValue
+        if newValue == targetValue
+          @__stopAnimation()
+        @__setValue newValue
+      , 25
+
+    __stopAnimation: ->
+      if @__animIntervalId
+        clearInterval @__animIntervalId
+        @__animIntervalId = null
+
+    __setValue: (val) ->
+      @val = val
+      @__reRender()
+
+    setValue: (val, instant = false) ->
+      @__stopAnimation()
+      if instant
+        @__setValue(val)
+      else
+        @__animateValue(val)