color stuff, building settings form

10 files changed, 316 insertions, 22 deletions

diff --git a/public/assets/js/index.js b/public/assets/js/index.js
index 4576fd4..bbb7fd9 100644
--- a/public/assets/js/index.js
+++ b/public/assets/js/index.js
@@ -8,6 +8,8 @@ var app = (function(){
     $(window).on("focus", app.focus)
     $(window).on("blur", app.blur)
     
+    set_background_color_from_time()
+    
     auth.init(app.ready)
   }
   
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index 5862503..f9850e8 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -3,21 +3,23 @@ var SiteRouter = Router.extend({
 	el: "body",
 	
 	routes: {
-		"/":                  'login',
-		"/index/:keyword":    'index',
-		"/index":             'index',
-		"/login":             'login',
-		"/details/:id":       'details',
-		"/post":              'post',
-		"/post/:keyword":     'post',
-		"/search":            'search',
-		"/mail":              'mailbox',
-		"/mail/:mailbox":     'mailbox',
-		"/mail/compose":      'compose',
-		"/message/:id":       'message',
-		"/comment/:id/edit":  'editComment',
-		"/profile":           'profile',
-		"/profile/:username": 'profile',
+		"/":                     'login',
+		"/index/:keyword":       'index',
+		"/index":                'index',
+		"/login":                'login',
+		"/signup":               'signup',
+		"/details/:id":          'details',
+		"/details/:id/settings": 'threadSettings',
+		"/post":                 'post',
+		"/post/:keyword":        'post',
+		"/search":               'search',
+		"/mail":                 'mailbox',
+		"/mail/:mailbox":        'mailbox',
+		"/mail/compose":         'compose',
+		"/message/:id":          'message',
+		"/comment/:id/edit":     'editComment',
+		"/profile":              'profile',
+		"/profile/:username":    'profile',
 	},
 	
 	initialize: function(){
@@ -32,10 +34,19 @@ var SiteRouter = Router.extend({
     app.view = new LoginView ()
   },
   
+  signup: function(){
+    app.view = new SignupView ()
+  },
+  
   details: function(id){
     app.view = new DetailsView ()
     app.view.load(id)
   },
+
+  threadSettings: function(id){
+    app.view = new DetailsView ({ settings: true })
+    app.view.load(id)
+  },
   
   editComment: function(id){
     app.view = new EditCommentForm ()
diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js
index c679d22..473fb22 100644
--- a/public/assets/js/lib/views/details/comments.js
+++ b/public/assets/js/lib/views/details/comments.js
@@ -19,7 +19,7 @@ var CommentsView = FormView.extend({
   },
   
   parse: function(comment){
-    if (! comment.comment.length) return $('<div></div>')
+    if (! comment.comment.length) return $('')
     var datetime = verbose_date(comment.date, true)
     var t = this.template.replace(/{{username}}/g, comment.username)
                          .replace(/{{id}}/g, comment.id)
diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index ad2df85..e8832a7 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -50,16 +50,17 @@ var FilesView = FormView.extend({
                          .replace(/{{time}}/g, datetime[1])
                          .replace(/{{size_class}}/g, size[0])
                          .replace(/{{size}}/g, size[1])
+    var $t = $(t)
     return t
   },
   
   prependFile: function(file){
-    var $el = $( this.parse(file) )
+    var $el = this.parse(file)
     this.$el.prepend($el)
   },
 
   appendFile: function(file){
-    var $el = $( this.parse(file) )
+    var $el = this.parse(file)
     this.$el.append($el)
   },
   
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
index 8dc92f6..5550173 100644
--- a/public/assets/js/lib/views/details/index.js
+++ b/public/assets/js/lib/views/details/index.js
@@ -12,6 +12,8 @@ var DetailsView = View.extend({
     this.gallery = new GalleryView ({ parent: this })
     this.form = new CommentForm ({ parent: this })
     this.threadbox = new ThreadBox ({ parent: this })
+    this.settings = new ThreadSettingsForm ({ parent: this })
+    $(".settings_link").click(this.openSettings.bind(this))
   },
   
   load: function(id){
@@ -20,11 +22,15 @@ var DetailsView = View.extend({
   },
   
   populate: function(data){
+    this.data = data
+    console.log(data)
+    set_background_color(data.thread.color || data.keyword.color)
     $("body").removeClass('loading')
     var thread = data.thread
     $("h1").html(sanitize(thread.title))
     $("title").html(sanitize(thread.title))
-    $(".subtitle").show().html("<a href='/'>&lt; Home</a> | " + metadata(thread))
+    $(".metadata").html(metadata(thread))
+    $(".settings_link").attr("href", "/details/" + thread.id + "/settings")
     this.form.load(data.thread)
     this.comments.load(data.comments)
     this.files.load(data.files)
@@ -32,14 +38,18 @@ var DetailsView = View.extend({
     if (data.thread.keyword) {
       $.get(this.keywordAction + data.thread.keyword, this.populateKeyword.bind(this))
     }
+    if (this.options.settings) {
+      this.openSettings()
+    }
   },
   
   populateKeyword: function(data){
     this.threadbox.load(data)
   },
   
-  success: function(){
-    window.location.href = "/index"
+  openSettings: function(e){
+    e && e.preventDefault()
+    this.settings.show()
   },
 
 })
diff --git a/public/assets/js/lib/views/details/settings.js b/public/assets/js/lib/views/details/settings.js
new file mode 100644
index 0000000..6e6b0b2
--- /dev/null
+++ b/public/assets/js/lib/views/details/settings.js
@@ -0,0 +1,95 @@
+var ThreadSettingsForm = FormView.extend({
+  
+  el: "#thread_settings",
+  
+  events: {
+    "click": "hide",
+    "click .inner": "stopPropagation",
+    "click .close_link": "hide"
+  },
+  
+  action: "",
+  method: 'put',
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+  },
+  
+  populate: function(){
+    // this.action = "/api/thread/" + data.id
+    $("body").removeClass("loading")
+    
+    var data = this.options.parent.data
+    var keywords = data.keywords
+    var keyword = data.keyword
+    var thread = data.thread
+    var comments = data.comments
+    var files = data.files
+    var settings = thread.settings
+    var display = thread.display
+
+    this.$(".close_link").attr("href", "/details/" + thread.id)
+    this.$(".metadata").html(metadata(thread))
+    this.$("[name=title]").val(sanitize(thread.title))
+
+    var $color = this.$('[name=color]')
+    Object.keys(COLORS).forEach((color) => {
+      var option = document.createElement('option')
+      option.value = color
+      option.innerHTML = color
+      $color.append(option)
+    })
+    $color.val(thread.color || keyword.color)
+    
+    $.get('/api/keywords', function(data){
+      var $keyword = this.$('[name=keyword]')
+      data.keywords
+      .map( (a) => a.keyword)
+      .sort( (a,b) => a < b ? -1 : a === b ? 0 : 1 )
+      .forEach((keyword) => {
+        var option = document.createElement('option')
+        option.value = keyword
+        option.innerHTML = keyword
+        $keyword.append(option)
+      })
+      $keyword.val(thread.keyword)
+    }.bind(this))
+    console.log(thread)
+  },
+  
+  validate: function(){
+    var errors = []
+    var comment = $("[name=comment]").val()
+    if (! comment || ! comment.length) {
+      errors.push("Please enter a comment.")
+    }
+    return errors.length ? errors : null
+  },
+
+  success: function(data){
+    window.location.href = "/details/" + data.comment.thread
+  },
+
+  visible: false,
+  
+  show: function(){
+    this.visible = true
+    this.populate()
+    this.$el.addClass('visible')
+    app.router.pushState("/details/" + this.options.parent.data.thread.id + "/settings")
+  },
+
+  hide: function(e){
+    e && e.preventDefault()
+    this.visible = false
+    this.$el.removeClass('visible')
+    app.router.pushState("/details/" + this.options.parent.data.thread.id)
+  },
+
+  toggle: function(){
+    if (this.visible) this.hide()
+    else this.show()
+  },
+
+})
\ No newline at end of file
diff --git a/public/assets/js/lib/views/login/signup.js b/public/assets/js/lib/views/login/signup.js
new file mode 100644
index 0000000..d3d407d
--- /dev/null
+++ b/public/assets/js/lib/views/login/signup.js
@@ -0,0 +1,49 @@
+var SignupView = FormView.extend({
+  
+  el: "#signup",
+  action: "/api/signup",
+  method: "put",
+  
+  initialize: function(opt){
+    this.__super__.initialize.call(this)
+    $("body").removeClass("loading")
+    this.$("[name=username]").focus()
+  },
+  
+  validate: function(){
+    var errors = []
+    if (! this.$("[name=username]").val().length) {
+      errors.push("Please enter a username")
+    }
+    if (! this.$("[name=password]").val().length) {
+      errors.push("Please enter a password")
+    }
+    if (this.$("[name=password]").val() !== this.$("[name=password2]").val()) {
+      errors.push("Passwords don't match")
+    }
+    return errors.length ? errors : null
+  },
+  
+  showErrors: function(errors){
+    $(".errors").show().css({ opacity: 1 }).html(errors.join("<br>"))
+  },
+  
+  success: function(data){
+    console.log("LOGGED IN?", data)
+    if (data.user) {
+      auth.set_user(data.user)
+    }
+    else {
+      this.showErrors()
+      return
+    }
+    if (data.returnTo) {
+      console.log(data.returnTo)
+      window.location.href = data.returnTo
+    }
+    else {
+      window.location.href = "/index"
+    }
+  },
+
+})
diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js
new file mode 100644
index 0000000..bcdfe77
--- /dev/null
+++ b/public/assets/js/util/color.js
@@ -0,0 +1,121 @@
+function Color (r,g,b,a) {
+  this.r = r
+  this.g = g
+  this.b = b
+  this.a = a || 1.0
+}
+Color.prototype.toString = function(){
+  return "rgba(" + Math.round(this.r) + "," + Math.round(this.g) + "," + Math.round(this.b) + "," + this.a + ")";
+}
+Color.prototype.rgb = function(){
+  return [ this.r, this.g, this.b ];
+}
+Color.prototype.rgba = function(){
+  return [ this.r, this.g, this.b, this.a ];
+}
+Color.prototype.clone = function(){
+  return new Color(this.r, this.g, this.b, this.a);
+}
+Color.prototype.alpha = function(a){
+  var c = this.copy()
+  c.a = a;
+  return c;
+}
+Color.prototype.add = function(n){
+  if (! n) return
+  this.r = clamp(Math.round(this.r + n), 0, 255)
+  this.g = clamp(Math.round(this.g + n), 0, 255)
+  this.b = clamp(Math.round(this.b + n), 0, 255)
+  return this
+}
+Color.prototype.mottle = function(n){
+  n = n || 30
+  this.r = clamp(this.r + randrange(-n, n), 0, 255)
+  this.g = clamp(this.g + randrange(-n, n), 0, 255)
+  this.b = clamp(this.b + randrange(-n, n), 0, 255)
+  return this
+}
+Color.prototype.mottleRGB = function(r,g,b){
+  r = r || 0 ; g = g || 0 ; b = b || 0
+  this.r = clamp(this.r + randrange(-r, r), 0, 255)
+  this.g = clamp(this.g + randrange(-g, g), 0, 255)
+  this.b = clamp(this.b + randrange(-b, b), 0, 255)
+  return this
+}
+Color.prototype.swatch = function(){
+  var el = document.createElement("div");
+  el.style.className = "swatch";
+  el.style.width = 16 + "px";
+  el.style.height = 16 + "px";
+  el.style.backgroundColor = this.toString();
+  $(el).data("color", this);
+  return el;
+}
+
+var COLORS = {
+  plain: new Color(230,240,240),
+  ivory: new Color(240,240,235),
+  pink: new Color(240,223,235),
+  red: new Color(240,224,223),
+  orange: new Color(240,232,223),
+  yellow: new Color(240,240,231),
+  green: new Color(233,240,231),
+  blue: new Color(224,226,240),
+  purple: new Color(235,231,240),
+  black: new Color(32,32,37),
+}
+
+function nighttime_quotient() {
+  var q = -10;
+  var date = new Date()
+  var x;
+  var h = date.getHours()
+  var m = date.getMinutes()
+  if (h < 5 || h > 23)
+    { return q; }
+  if (h >= 5 && h <= 7)
+    { x = 60*60*3 - 60 * (h - 5) + m; }
+  if (h >= 21 && h <= 23)
+    { x = 60 * (h - 21) + m; }
+  x /= 60*60*3;
+  return q * x;
+}
+function get_color_from_time(){
+  var date = new Date()
+  var h = date.getHours()
+  var m = date.getMinutes()
+  var c;
+  if ((h == 4 || h == 16) && m == 20)
+    { c = "green"; }
+  else if (h < 5)
+    { c = "blue"; }
+  else if (h >= 5 && h < 6)
+    { c = "red"; }
+  else if (h >= 6 && h < 9)
+    { c = "orange"; }
+  else if (h >= 9 && h < 12)
+    { c = "yellow"; }
+  else if (h >= 12 && h < 18)
+    { c = "plain"; }
+  else if (h >= 18 && h < 21)
+    { c = "blue"; }
+  else if (h >= 21)
+    { c = "blue"; }
+  else
+    { c = "plain"; }
+  return c;
+}
+function set_background_color_from_time(){
+  var color_name = get_color_from_time()
+  set_background_color(color_name)
+}
+function set_background_color(color_name){
+  console.log(color_name)
+  color_name = color_name || "plain"
+  var color = COLORS[color_name]
+    .clone()
+    .mottleRGB(4,4,8)
+//     .add(nighttime_quotient())
+console.log(color.toString())
+  document.body.style.backgroundColor = color.toString()
+}
diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js
index be7e3c0..4630fc9 100644
--- a/public/assets/js/util/format.js
+++ b/public/assets/js/util/format.js
@@ -58,7 +58,8 @@ function verbose_date (date, no_pad_hours) {
 	if (m < 10) m = "0" + m
 	if (! no_pad_hours && h < 10) h = "0" + h
   
-  var date = d + '&#8209;' + short_months[date.getMonth()] + '&#8209;' + date.getFullYear()
+  // non-breaking hyphen: &#8209;
+  var date = d + '&nbsp;' + short_months[date.getMonth()] + '&nbsp;' + date.getFullYear()
   var time = h + ':' + m + meridian
   
   return [date, time]
diff --git a/public/assets/js/vendor/view/router.js b/public/assets/js/vendor/view/router.js
index 5371f80..b0e2f84 100644
--- a/public/assets/js/vendor/view/router.js
+++ b/public/assets/js/vendor/view/router.js
@@ -9,6 +9,10 @@ var Router = View.extend({
 		this.parseRoute(window.location.pathname)
 	},
 	
+	pushState: function(pathname){
+    window.history.pushState({}, "", pathname)
+	},
+	
 	parseRoute: function(pathname){
 
 		var routes = is_mobile && this.mobileRoutes ? this.mobileRoutes : this.routes,