modal 0.2.0 → 0.3.1

package/package.json

@@ -1,22 +1,49 @@
 {
   "name": "modal",
-  "version": "0.2.0",
-  "description": "A modal window for the browser.",
-  "main": "modal.js",
+  "version": "0.3.1",
+  "description": "Modal client library for JavaScript",
+  "license": "MIT",
+  "homepage": "https://modal.com/docs",
+  "repository": "github:modal-labs/libmodal",
+  "bugs": "https://github.com/modal-labs/libmodal/issues",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "/dist"
+  ],
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
   "scripts": {
-    "test": "node_modules/.bin/mocha/ -R spec test"
+    "build": "tsup",
+    "check": "tsc",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "scripts/gen-proto.sh",
+    "test": "vitest"
   },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/bengourley/modal.js.git"
+  "dependencies": {
+    "long": "^5.3.1",
+    "nice-grpc": "^2.1.12",
+    "protobufjs": "^7.5.0",
+    "smol-toml": "^1.3.3",
+    "uuid": "^11.1.0"
   },
-  "author": "Ben Gourley",
-  "license": "BSD",
   "devDependencies": {
-    "jade": "~0.28.1",
-    "jsdom": "~0.5.0",
-    "mocha": "~1.8.1",
-    "jadeify2": "0.0.3",
-    "jquery": "~1.8.3"
+    "@types/node": "^22.15.2",
+    "grpc-tools": "^1.13.0",
+    "p-queue": "^8.1.0",
+    "prettier": "^3.5.3",
+    "ts-proto": "^2.7.0",
+    "tsup": "^8.4.0",
+    "tsx": "^4.19.3",
+    "typescript": "~5.8.3",
+    "vitest": "^3.1.2"
   }
 }

package/.jshintrc

@@ -1,41 +0,0 @@
-{ "asi": true
-, "boss": true
-, "browser": true
-, "camelcase": true
-, "curly": false
-, "devel": false
-, "devel": true
-, "eqeqeq": true
-, "eqnull": true
-, "es5": false
-, "evil": false
-, "immed": false
-, "indent": 2
-, "jquery": true
-, "latedef": false
-, "laxbreak": true
-, "laxcomma": true
-, "maxcomplexity": 6
-, "maxdepth": 4
-, "maxstatements": 25
-, "newcap": true
-, "node": true
-, "noempty": false
-, "nonew": true
-, "predef":
-  [ "describe"
-  , "it"
-  , "before"
-  , "beforeEach"
-  , "after"
-  , "afterEach"
-  ]
-, "quotmark": "single"
-, "smarttabs": true
-, "strict": false
-, "trailing": false
-, "undef": true
-, "unused": true
-, "-W079": true
-, "-W069": true
-}

package/.npmignore

@@ -1,2 +0,0 @@
-node_modules
-.idea/**

package/Readme.md

@@ -1,47 +0,0 @@
-# Modal
-
-A modal window for the browser.
-
-This module provides generic modal dialog functionality
-for blocking the UI and obtaining user input.
-
-## Note:
-You need to 'require' this module in a commonJS style environment, and
-you need to be able to require the things with the .jade extension. I use
-[browserify](https://github.com/substack/browserify) to do this.
-
-
-## Usage
-
-```
-modal([options])[.on('event')]
-```
-
-### Options
-
-- title (string)
-- content (jQuery DOM element / raw string)
-- buttons (array)
-  - text (string) the button text
-  - event (string) the event name to fire when the button is clicked
-  - classname (string) the classname to apply to the button
-  - keyCode (number) the keycode of a shortcut key for the button
-  - clickOutsideToClose (boolean) whether a click event outside of the modal should close it
-  - clickOutsideEvent (string) the name of the event to be triggered on clicks outside of the modal
-
-Events will be fired on the modal according to which button is clicked.
-Defaults are confirm/cancel, but these can be overriden in your options.
-
-### Example
-
-```js
-modal(
-  { title: 'Delete object'
-  , content: 'Are you sure you want to delete this object?'
-  , buttons:
-    [ { text: 'Don\'t delete', event: 'cancel', classname: '' }
-    , { text: 'Delete', event: 'confirm', classname: 'danger' }
-    ]
-  })
-  .on('confirm', deleteItem)
-```

package/modal-template.jade

@@ -1,9 +0,0 @@
-.modal-overlay
-  .modal-content.js-modal
-    if (title)
-      h1.modal-title #{title}
-    .js-content
-    if (buttons.length)
-      .modal-controls
-        each button in buttons
-          button.btn.js-button(class=button.className) #{button.text}

package/modal-template.js

@@ -1,45 +0,0 @@
-var jade = require('jade/lib/runtime.js');module.exports = function anonymous(locals, attrs, escape, rethrow, merge) {
-attrs = attrs || jade.attrs; escape = escape || jade.escape; rethrow = rethrow || jade.rethrow; merge = merge || jade.merge;
-var buf = [];
-with (locals || {}) {
-var interp;
-buf.push('<div class="modal-overlay"><div class="modal-content js-modal">');
-if ( (title))
-{
-buf.push('<h1 class="modal-title">' + escape((interp = title) == null ? '' : interp) + '</h1>');
-}
-buf.push('<div class="js-content"></div>');
-if ( (buttons.length))
-{
-buf.push('<div class="modal-controls">');
-// iterate buttons
-;(function(){
-  if ('number' == typeof buttons.length) {
-
-    for (var $index = 0, $$l = buttons.length; $index < $$l; $index++) {
-      var button = buttons[$index];
-
-buf.push('<button');
-buf.push(attrs({ "class": ('btn') + ' ' + ('js-button') + ' ' + (button.className) }, {"class":true}));
-buf.push('>' + escape((interp = button.text) == null ? '' : interp) + '</button>');
-    }
-
-  } else {
-    var $$l = 0;
-    for (var $index in buttons) {
-      $$l++;      var button = buttons[$index];
-
-buf.push('<button');
-buf.push(attrs({ "class": ('btn') + ' ' + ('js-button') + ' ' + (button.className) }, {"class":true}));
-buf.push('>' + escape((interp = button.text) == null ? '' : interp) + '</button>');
-    }
-
-  }
-}).call(this);
-
-buf.push('</div>');
-}
-buf.push('</div></div>');
-}
-return buf.join("");
-}

package/modal.js

@@ -1,203 +0,0 @@
-module.exports = modal
-
-/*
- * This module provides generic modal dialog functionality
- * for blocking the UI and obtaining user input.
- *
- * Usage:
- *
- *   modal([options])
- *     [.on('event')]...
- *
- *   options:
- *     - title (string)
- *     - content (jQuery DOM element / raw string)
- *     - buttons (array)
- *       - text (string) the button text
- *       - event (string) the event name to fire when the button is clicked
- *       - className (string) the className to apply to the button
- *       - keyCodes ([numbers]) the keycodes of shortcuts key for the button
- *       - clickOutsideToClose (boolean) whether a click event outside of the modal should close it
- *       - clickOutsideEvent (string) the name of the event to be triggered on clicks outside of the modal
- *
- *  Events will be fired on the modal according to which button is clicked.
- *  Defaults are confirm/cancel, but these can be overriden in your options.
- *
- *  Example:
- *
- *   modal(
- *     { title: 'Delete object'
- *     , content: 'Are you sure you want to delete this object?'
- *     , buttons:
- *       [ { text: 'Don\'t delete', event: 'cancel', className: '' }
- *       , { text: 'Delete', event: 'confirm', className: 'danger' }
- *       ]
- *     })
- *     .on('confirm', deleteItem)
- */
-
-var Emitter = require('events').EventEmitter
-  , template = require('./modal-template')
-
-  , defaults =
-    { title: 'Are you sure?'
-    , content: 'Please confirm this action.'
-    , buttons:
-      [ { text: 'Cancel', event: 'cancel', className: '', keyCodes: [ 27 ] }
-      , { text: 'Confirm', event: 'confirm', className: 'btn-primary' }
-      ]
-    , clickOutsideToClose: true
-    , clickOutsideEvent: 'cancel'
-    , className: ''
-    , fx: true // used for testing
-    }
-
-function modal(options) {
-  return new Modal($.extend({}, defaults, options))
-}
-
-function Modal(settings) {
-
-  Emitter.call(this)
-
-  var el = $(template(settings))
-    , modal = el.find('.js-modal')
-    , content = el.find('.js-content')
-    , buttons = el.find('.js-button')
-    , keys = {}
-    , transitionFn = $.fn.transition ? 'transition' : 'animate'
-
-  if (typeof settings.content === 'string') {
-    content.append($('<p/>', { text: settings.content }))
-  } else {
-    content.append(settings.content)
-  }
-
-  modal.addClass(settings.className)
-
-  // Cache the button shortcut keycodes
-  $.each(settings.buttons, function (i, button) {
-    if (!button.keyCodes) return
-    $.each(button.keyCodes, function (n, keyCode) {
-      keys[keyCode + ''] = i
-    })
-  })
-
-  /*
-   * Reposition the modal in the middle of the screen
-   */
-  function centre() {
-    if (modal.outerHeight(true) < $(window).height()) {
-      var diff = $(window).height() - modal.outerHeight(true)
-      modal.css({ top: diff / 2 })
-    }
-  }
-
-  /*
-   * Remove a modal from the DOM
-   * and tear down its related events
-   */
-  var removeModal = $.proxy(function () {
-    var listenersWithCallback = 0
-
-    $.each(this.listeners('beforeClose'), function(i, fn) {
-      if (isFunctionWithArguments(fn)) {
-        listenersWithCallback++
-      }
-    })
-
-    if (listenersWithCallback > 0) {
-      var currentCallsCount = 0
-        , performClose = function() {
-          if (++currentCallsCount === listenersWithCallback) {
-            performRemoveModal()
-          }
-        }
-      this.emit('beforeClose', performClose)
-    } else {
-      this.emit('beforeClose')
-      performRemoveModal()
-    }
-  }, this)
-
-  function isFunctionWithArguments(fn) {
-    return fn.length > 0
-  }
-
-  var performRemoveModal = $.proxy(function () {
-    el[transitionFn]({ opacity: 0 }, settings.fx ? 200 : 0)
-    // Do setTimeout rather than using the transition
-    // callback as it potentially fails to get called in IE10
-    setTimeout(function () {
-      el.remove()
-    }, settings.fx ? 200 : 0)
-    modal[transitionFn]({ top: $(window).height() }, settings.fx ? 200 : 0)
-    this.emit('close')
-    this.removeAllListeners()
-    $(document).off('keyup', keyup)
-    $(window).off('resize', centre)
-  }, this)
-
-  // Expose so you can control externally
-  this.close = function() {
-    removeModal()
-  }
-
-  // Expose so you can recentre externally
-  this.centre = centre
-
-  /*
-   * Respond to a key event
-   */
-  var keyup = $.proxy(function (e) {
-    var button = keys[e.keyCode + '']
-    if (typeof button !== 'undefined') {
-      this.emit(settings.buttons[button].event)
-      removeModal()
-    }
-  }, this)
-
-  // Assign button event handlers
-  buttons.each($.proxy(function (i, el) {
-    $(el).on('click', $.proxy(function () {
-      this.emit(settings.buttons[i].event)
-      removeModal()
-    }, this))
-  }, this))
-
-  $(document).on('keyup', keyup)
-
-  // Listen for clicks outside the modal
-  el.on('click', $.proxy(function (e) {
-    if ($(e.target).is(el)) {
-      this.emit(settings.clickOutsideEvent)
-      // Clicks outside should close?
-      if (settings.clickOutsideToClose) {
-        removeModal()
-      }
-    }
-  }, this))
-
-  // Set initial styles
-  el.css({ opacity: 0 })
-  modal.css({ top: '0%' })
-
-  // Append to DOM
-  $('body').append(el)
-
-  // transition in
-  el[transitionFn]({ opacity: 1 }, settings.fx ? 100 : 0)
-
-  if (modal.outerHeight(true) < $(window).height()) {
-    var diff = $(window).height() - modal.outerHeight(true)
-    modal[transitionFn]({ top: (diff / 2) + 10 }, settings.fx ? 200 : 0, function () {
-      modal[transitionFn]({ top: diff / 2 }, settings.fx ? 150 : 0)
-    })
-  }
-
-  $(window).on('resize', centre)
-
-}
-
-// Be an emitter
-Modal.prototype = Emitter.prototype

package/pliers.js

@@ -1,18 +0,0 @@
-module.exports = tasks
-
-var jadeify = require('jadeify2')
-  , join = require('path').join
-  , fs = require('fs')
-
-function tasks(pliers) {
-
-  pliers('build', function () {
-
-    var readStream = fs.createReadStream(join(__dirname, 'modal-template.jade'))
-      , writeSteam = fs.createWriteStream(join(__dirname, 'modal-template.js'))
-
-    readStream.pipe(jadeify(join(__dirname, 'modal-template.jade'))).pipe(writeSteam)
-
-  })
-
-}