trollbox - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

example/example.js

@@ -1,20 +0,36 @@
-const config = {
-  container: '#trollbox',
-  firebase: {
-    apiKey: 'AIzaSyAW50YNzjI4LAQo4kEWb0UwhegCTG9hSf8',
-    authDomain: 'trollbox-d802b.firebaseapp.com',
-    databaseURL: 'https://trollbox-d802b.firebaseio.com',
-    projectId: 'trollbox-d802b',
-    storageBucket: 'trollbox-d802b.appspot.com',
-    messagingSenderId: '770197609793'
-  },
-  channel: null,
-  user: null
+var testing = false
+
+function init () {
+  const config = {
+    container: '#trollbox',
+    firebase: {
+      apiKey: 'AIzaSyAW50YNzjI4LAQo4kEWb0UwhegCTG9hSf8',
+      authDomain: 'trollbox-d802b.firebaseapp.com',
+      databaseURL: 'https://trollbox-d802b.firebaseio.com',
+      projectId: 'trollbox-d802b',
+      storageBucket: 'trollbox-d802b.appspot.com',
+      messagingSenderId: '770197609793'
+    },
+    channel: 'demo',
+    user: window.demo_user || 'anon'
+  }
+
+  var trollbox = new window.Trollbox(config)
+
+  if (testing) {
+    setTimeout(() => {
+      trollbox.setChannel('someroom')
+      trollbox.setUser('user')
+    }, 2000)
+
+    setTimeout(() => {
+      trollbox.destroy()
+    }, 4000)
+
+    setTimeout(() => {
+      init()
+    }, 6000)
+  }
 }
 
-const trollbox = new window.Trollbox(config)
-
-setTimeout(() => {
-  config.channel = 'foo'
-  const trollbox = new window.Trollbox(config)
-}, 2000)
+init()

package.json

 {
   "name": "trollbox",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "",
-  "main": "trollbox.js",
+  "main": "dist/bundle.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "watchify -t [babelify] trollbox.js -o dist/bundle.js",
+    "build": "browserify -t [babelify] trollbox.js -o dist/bundle.js"
   },
-  "author": "",
-  "license": "MIT",
   "devDependencies": {
-
+    "babelify": "^7.3.0",
+    "browserify": "^14.4.0",
+    "watchify": "^3.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/miguelmota/trollbox"
+  },
+  "keywords": [
+    "trollbox",
+    "troll",
+    "box",
+    "crypto",
+    "chat",
+    "room",
+    "firebase",
+    "instant",
+    "poloniex",
+    "discussion",
+    "messaging",
+    "websocket",
+    "im"
+  ],
+  "author": {
+    "name": "Miguel Mota",
+    "email": "[e-mail]",
+    "url": "http://www.miguelmota.com/"
+  },
+  "license": {
+    "type": "MIT",
+    "url": "https://github.com/miguelmota/trollbox/blob/master/LICENSE.md"
+  },
+  "bugs": {
+    "url": "https://github.com/miguelmota/trollbox/issues"
+  },
+  "homepage": "https://github.com/miguelmota/trollbox",
+  "engines": {
+    "node": ">=7"
   }
 }

README.md

 # trollbox
 
-wip
+> Instant [trollbox](http://www.urbandictionary.com/define.php?term=trollbox) using [Firebase](https://firebase.google.com/).
 
-<!--
-Database -> Rules
+# Demo
 
+[https://lab.miguelmota.com/trollbox](https://lab.miguelmota.com/trollbox)
+
+# Install
+
+```javascript
+npm install trollbox
+```
+
+# Instructions
+
+1. Create a new [Firebase](https://firebase.google.com/) project.
+
+2. Set read/write rules to be global in Firebase.
+
+Firebase dashboard console -> Database -> Rules
+
 ```json
@@ -16,6 +31,55 @@ {
 ```
--->
 
+3. Set up HTML container:
+
+```html
+<div id="trollbox"></div>
+```
+
+4. Copy Firebase project config from dashboard and initialize trollbox:
+
+```javascript
+const config = {
+  // DOM selector for trollbox
+  container: '#trollbox',
+
+  // Firebase project config found in dashboard
+  firebase: {
+    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+    authDomain: 'xxxxxxxx-xxxxx.firebaseapp.com',
+    databaseURL: 'https://xxxxxxxx-xxxxx.firebaseio.com',
+    projectId: 'xxxxxxxx-xxxxx',
+    storageBucket: 'xxxxxxxx-xxxxx.appspot.com',
+    messagingSenderId: 'xxxxxxxxxxxx'
+  },
+
+  // trollbox channel name (chat room)
+  channel: 'global',
+
+  // trollbox username
+  user: 'anon'
+}
+
+const trollbox = new window.Trollbox(config)
+```
+
+5. Copy base [trollbox.css](./trollbox.css) stylesheet into your web app.
+
+6. That's it!
+
+Later on if you need to, you can change the channel name and user:
+
+```javascript
+trollbox.setChannel('random')
+trollbox.setUser('Bob')
+```
+
+You can also completely destroy the trollbox:
+
+```javascript
+trollbox.destroy()
+```
+
 # License
 
 MIT

trollbox.js

 (function (root) {
   'use strict'
 
-  /**
-   * WARNING: ugly code ahead.
-   * this is a quick and dirty MVP.
-   */
+  class Trollbox {
+    constructor (config) {
+      this.config = config
+      this.scriptId = 'FirebaseScript'
+      if (document.querySelector(`#${this.scriptId}`)) {
+        this.onLoad()
+      } else {
+        const script = document.createElement('script')
+        script.id = this.scriptId
+        script.src = 'https://www.gstatic.com/firebasejs/4.3.1/firebase.js'
+        document.body.appendChild(script)
+        script.onload = () => {
+          this.onLoad()
+        }
+      }
 
-  var config = null
-  var ref = null
-  var db = null
+      this.onMessage = this.onMessage.bind(this)
+      this.post = this.post.bind(this)
+      this.onSubmit = this.onSubmit.bind(this)
+    }
 
-  function Trollbox (config) {
-    const scriptId = 'FirebaseScript'
-    if (document.querySelector(`#${scriptId}`)) {
-      onLoad(config)
-    } else {
-      const script = document.createElement('script')
-      script.id = scriptId
-      script.src = 'https://www.gstatic.com/firebasejs/4.3.1/firebase.js'
-      document.body.appendChild(script)
-      script.onload = function () {
-        onLoad(config)
+    onLoad () {
+      this.config.user = this.config.user || 'anon'
+      this.initFirebase()
+
+      this.renderBox()
+      this.bindForm()
+
+      this.ref.off('child_added', this.onMessage)
+      this.ref.limitToFirst(100)
+      .on('child_added', this.onMessage)
+    }
+
+    initFirebase () {
+      if (!this.db) {
+        var app = window.firebase.initializeApp(this.config.firebase)
+        this.db = app.database()
       }
+
+      this.initRef()
     }
 
-    /*
-    const style = document.createElement('link')
-    style.id = 'TrollboxStyle'
-    style.rel = 'stylesheet'
-    style.href = 'trollbox.css'
-    document.body.appendChild(style)
-    */
-  }
+    initRef () {
+      const channel = (this.config.channel || '').replace(/[^a-zA-Z\d]/gi, '_')
+      this.ref = this.db.ref(`trollbox/${channel}`)
+    }
 
-  function onLoad (_config) {
-    _config.user = _config.user || 'anon'
-    ref = initFirebase(_config)
-    config = _config
+    setChannel (channel) {
+      this.config.channel = channel
+      this.onLoad()
+    }
 
-    renderBox(config.container)
-    bindForm(post)
+    setUser (user) {
+      this.config.user = user
+      this.onLoad()
+    }
 
-    ref.off('child_added', onMessage)
-    ref.limitToFirst(100)
-    .on('child_added', onMessage)
-  }
+    post (message) {
+      this.ref.push().set({
+        user: this.config.user,
+        message: message,
+        date: (Date.now() / 1e3) | 0
+      })
+    }
 
-  function post (message) {
-    ref.push().set({
-      user: config.user,
-      message: message,
-      date: (Date.now() / 1e3) | 0
-    })
-  }
+    onMessage (snapshot) {
+      const value = snapshot.val()
 
-  function onMessage (snapshot) {
-    const value = snapshot.val()
+      if (typeof value !== 'object') {
+        return false
+      }
 
-    if (typeof value !== 'object') {
-      return false
+      this.addLog(value.user, value.message)
     }
 
-    addLog(value.user, value.message)
-  }
+    renderBox () {
+      const selector = this.config.container
+      this.container = document.querySelector(selector)
 
-  function initFirebase (config) {
-    const channel = (config.channel || '').replace(/[^a-zA-Z\d]/gi, '_')
+      // ugly, quick, and dirty
+      this.container.innerHTML = `
+        <div class="TrollboxContainer">
+          <div class="TrollboxHeader">
+            Trollbox
+          </div>
+          <div class="TrollboxMessages">
+            <ul class="TrollboxMessagesList">
+            </ul>
+          </div>
+          <div class="TrollboxMessage">
+            <form class="TrollboxForm">
+              <input class="TrollboxInput" type="text" name="message" placeholder="Message (press enter to submit)" autocomplete="off" />
+            </form>
+          </div>
+        </div>
+      `
+    }
 
-    if (!db) {
-      var app = window.firebase.initializeApp(config.firebase)
-      db = app.database()
+    bindForm (post) {
+      const form = this.container.querySelector('.TrollboxForm')
+      this.form = form
+
+      this.form.removeEventListener('submit', this.onSubmit)
+      this.form.addEventListener('submit', this.onSubmit)
     }
 
-    var ref = db.ref(`trollbox/${channel}`)
+    onSubmit (event) {
+      event.preventDefault()
+      const input = event.target.message
+      const message = input.value
+      this.post(message)
+      input.value = ''
+    }
 
-    return ref
-  }
+    addLog (user, message) {
+      if (!(user && message)) {
+        return false
+      }
 
-  function renderBox (selector) {
-    const container = document.querySelector(selector)
+      const box = this.container.querySelector('.TrollboxMessages')
+      const list = this.container.querySelector('.TrollboxMessagesList')
 
-    // quick and dirty
-    container.innerHTML = `
-      <div class="TrollboxContainer">
-        <div class="TrollboxHeader">
-          Trollbox
-        </div>
-        <div class="TrollboxMessages">
-          <ul class="TrollboxMessagesList">
-          </ul>
-        </div>
-        <div class="TrollboxMessage">
-          <form class="TrollboxForm">
-            <input class="TrollboxInput" type="text" name="message" placeholder="Message (press enter to submit)" autocomplete="off" />
-          </form>
-        </div>
-      </div>
-    `
-  }
+      list.innerHTML += `<li><strong>${this.escapeHtml(user)}:</strong> ${this.escapeHtml(message)}</li>`
 
-  function bindForm (post) {
-    const form = document.querySelector('.TrollboxForm')
+      box.scrollTop = box.scrollHeight
+    }
 
-    form.removeEventListener('submit', onSubmit)
-    form.addEventListener('submit', onSubmit)
-  }
+    destroy () {
+      if (this.ref) {
+        this.ref.off('child_added', this.onMessage)
+      }
 
-  function onSubmit (event) {
-    event.preventDefault()
-    const input = event.target.message
-    const message = input.value
-    post(message)
-    input.value = ''
-  }
+      if (this.form) {
+        this.form.removeEventListener('submit', this.onSubmit)
+      }
 
-  function addLog (user, message) {
-    if (!(user && message)) {
-      return false
-    }
+      if (this.container) {
+        this.container.innerHTML = ''
+      }
 
-    const container = document.querySelector('.TrollboxMessages')
-    const list = container.querySelector('.TrollboxMessagesList')
+      const script = document.querySelector(`#${this.scriptId}`)
 
-    list.innerHTML += `<li><strong>${escapeHtml(user)}:</strong> ${escapeHtml(message)}</li>`
+      if (script) {
+        script.remove()
+      }
+    }
 
-    container.scrollTop = container.scrollHeight
+    escapeHtml (unsafe) {
+      return unsafe
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/'/g, '&quot;')
+      .replace(/'/g, '&#039;')
+    }
   }
 
-  function escapeHtml (unsafe) {
-    return unsafe
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/'/g, '&quot;')
-    .replace(/'/g, '&#039;')
-  }
-
   if (typeof exports !== 'undefined') {
@@ -148,6 +170,8 @@ if (typeof module !== 'undefined' && module.exports) {
     })
-  } else {
-    root.Trollbox = Trollbox
   }
 
+  if (typeof window === 'object') {
+    window.Trollbox = Trollbox
+  }
+
 })(this);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16359

increased by97.86%

Number of package files

9

increased by12.5%

Lines of code

374

increased by85.15%

Number of low maintenance alerts

1

decreased by-66.67%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

85

increased by304.76%

Worsened metrics

Dev dependency count

3

increased byInfinity%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes