client-lib

Client side shared library

npm install client-lib
24 downloads in the last month

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.

npm loves you