client-lib

Shared Client side components.

Templates

To use a template included in this library, Coffeescript {templateName} = require 'client-lib/dist/templates.js' Javascript templateName = require('client-lib/dist/templates.js).templateName

Available Templates

• editorAssetsThumbnails

  Provides a list of thumbnail images as long as you provide an AssetCollection.toJSON() object as the template context's images value:

    @$el.html(@template(images: @collection.toJSON()))
  

• locationsFileDialog

  Provides a modal template for uploading and selecting images. Takes no arguments.

    @$el.html(@template())
  

• uploader

  Provides a Drag and Drop targetable interactive upload markup template (you have to provide the functionality yourself). Takes no arguments.

    @$el.html(@template())
  

• uploadItem

  Provides table rows for individual file uploads. Intended for use with the uploader template. Takes a contextualized FileUpload model as the context. Usually appended to an existing tbody element. Example usage:

    context =
      id: @model.cid
      filename: @model.get('name')
      size: @model.get('size')
      hasError: false
      valid: true
      autoUpload: true
      progress: @model.get('progress') * 100
      startMsg: "Upload File"
      cancelMsg: "Cancel Upload"
    ## unobserves any current event handlers
    @undelegateEvents()
    ## gets the current item
    $item = @getItemElement()
    ## replaces the current item or appends to 
    ## the element.
    if $item.length > 0
      $item.replaceWith(uploadItem(context))
    else
      @$el.append(uploadItem(context))
    ## re-observes event handlers on the new item.
    @delegateEvents(@events)
  

Available Handlebars helper functions

• thumbnail

  Produces a thumbnail image from an AssetModel

• url

  Produces a downloadable asset url from a passed identifier

• dateformat

  Formats dates in mm/dd/yyyy format.

• datetimeformat

  Formats dates in ddd mmm dd yyyy h:MM tt format

• filesizeformat

  Produces human readable kb or mb filesizes from b sized file sizes.

• filetype

  Produces an appropriate filetype icon from a filename or mime-type

• getIcon

  Produces the appropriate icon for an atm network

• replaceSpace

  replaces whitespace with "-" and ! with ""

• getLocationType

  Distinguishes atms from branches given an atm network

• roundNumber

  Converts a js number to two fixed decimal places

• isUnread

  converts the passed read state to the appropriate "" or "unread" string for rendering.

• userAvatar

  provides a downloadable avatar uri given a user identifier

Available Utilities

To use any of the utilities provided:

Coffeescript

{utilityName} = require 'client-lib/dist/utilityName.js'

Javascript

utilityName = require('client-lib/dist/utilityName.js').utilityName

• ContentTypeHelpers

  Converts filenames to file types and file types to icons. Exposes contentTypeToIcon and extensionToContentType methods.

Availible Views

To use any of the views provided:

Coffeescript

{viewName} = require 'client-lib/viewName.js'

Javascript

viewName = require('client-lib/viewName.js').viewName

• AssetGrid

  Base class for collection-based grid views.

• AssetCollectionAssetGrid

  Extends AssetGrid Provides an AssetCollection by default. Uses the editorAssetsThumbnails template to render assets in a grid. Fires an assetCollectionAssetGrid:imageSelected event when an image in the grid is clicked, providing the asset's id as an argument to listening event handlers.

• LocationsDialogAssetGrid

  Extends AssetCollectionAssetGrid Provides ContentType filtering to limit displayed assets to images only.

• LocationsFileDialogView

  Provides an interactive Bootstrap Modal dialog that can upload and select files. Fires a locationsFileDialogView:imageSelected event when an image is selected, providing the asset's id to listening event handlers.

• Uploader

  Provides a Drag and Drop and Button enabled interactive upload interface. Displays upload item progress and auto-removes upload items from the view when the upload is complete.

• UploadItem

  Displays information about it's upload item, including progress and provides ux for canceling in-process file uploads.

• notify

  Provides a styled notification component. Implemented as a simple function that takes a single string argument to display.

Available Models

To use any of the models provided:

Coffeescript

{modelName} = require 'client-lib/dist/modelName.js'

Javascript

modelName = require('client-lib/dist/modelName.js').modelName

• asset/model/AssetCollection

  Provides asset management. Default uri is '/_/api/asset/' Default model type is AssetModel Both defaults are overrideable at instantiation or via AssetCollection.extend.

• asset/model/AssetModel

  Provides a model for managing assets. Attributes include filename, description, contentType, uploadedOn, uploadeBy, and labels. Exposes isPdf, isSelected, isText, isTrash, notifyLabelChange, and trash methods.

• FileUploads

  A collection for managing file uploads. Default uri is '/_/api/asset' Default model type is FileUpload Both defaults are overrideable at instantiation or via FileUploads.extend.

• FileUpload

  Provides ajax file uploads. attributes include name type, size, maxFileSize, pending, progress, complete, and file. Implements an overridden sync method that converts a provided browser File object into a consumable multipart-form-data encoded representation to provide ajax-transferrable file uploads. Fires a fileupload:uploadStart event when an upload has begun transferring to the server, passing itself to listening event handlers. Fires a fileuplaod:complete event when the upload has completed. Fires an error event with the model, transport and sync options provided as arguments when an upload fails. Exposes methods to cancel the file upload while it is in progress.