craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Add feedback widget

Browse Source
This commit is contained in:
Andrew Miner
2015-01-12 12:35:36 -08:00
parent 1b328a8542
commit c510c5a1da
11 changed files with 294 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.scss
+10
View File
@@ -48,6 +48,10 @@ $font-size-large: 1.6em;
$font-size-x-large: 2.0em;
$font-size-xx-large: 3.0em;
$layer-normal: 0;
$layer-screen: 5;
$layer-dialog: 10;
// Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
body {
@@ -193,6 +197,12 @@ label {
}
}
.view__screen {
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
display: none;
z-index: $layer-screen;
}
// Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
@import 'templates/index';
src/css/mixins.scss
+1 -1
View File
@@ -23,4 +23,4 @@ All rights reserved.
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
}
src/css/templates/feedback.scss
+84
View File
@@ -0,0 +1,84 @@
/*
Crafting Guide - feedback.scss
Copyright (c) 2014 by Redwood Labs
All rights reserved.
*/
.view__feedback {
position: fixed; top: 50%; left: -30em; width: 25em;
@include transform(translateY(-50%));
background: white;
border: 0.2em solid $color-gray-dark;
border-left: 0;
border-right: 0.1em solid $color-gray-faint;
box-size: border-box;
box-shadow: 0.3em 0.3em 0.6em 0 $color-gray-shadow;
padding: 2em;
z-index: $layer-dialog;
.error {
background: white;
clear: both;
display: none;
margin-top: 4em;
text-align: center;
p {
color: $color-error-new;
font-family: $font-family-normal;
font-size: $font-size-small;
}
}
.label {
position: absolute; top: -0.2em; right: -4.5em; bottom:-0.2em; width: 4.5em;
background: $color-gray-faint;
border: 0.2em solid $color-gray-dark;
border-bottom-right-radius: 1.0em;
border-left: 0;
border-top-right-radius: 1.0em;
box-shadow: 0.3em 0.3em 0.6em 0 $color-gray-shadow;
cursor: pointer;
text-align: center;
z-index: $layer-dialog - 1;
img {
position: absolute; top: 0.5em; left: 50%; height: 3.6em; width: 3.6em;
@include transform(translateX(-50%));
}
p {
position: absolute; top: 50%; left: 50%;
@include transform(translateX(-50%) rotate(-90deg));
font-family: PressStart;
font-size: $font-size-large;
}
}
button[name="send"] {
float: right;
margin-top: 0.5em;
}
input {
position: relative; width: 100%;
border: 1px solid $color-gray-light;
box-sizing: border-box;
margin-bottom: 1em;
padding: 0.2em;
}
textarea {
border: 1px solid $color-gray-light;
position: relative; height: 11.5em; width: 100%;
font-family: $font-family-input;
font-size: $font-size-normal;
resize: vertical;
}
}
src/css/templates/index.scss
+1
View File
@@ -7,6 +7,7 @@ All rights reserved.
@import 'crafting_grid';
@import 'crafting_table';
@import 'feedback';
@import 'inventory';
@import 'item_page';
@import 'mod_pack';
src/images/paper.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/pages/index.jade
+3
View File
@@ -10,6 +10,9 @@ extends ./layouts/basic
append styles
link(rel="stylesheet", type="text/css", href="/css/jquery-ui.css")
prepend body
.view__feedback
block content
.page
src/pages/layouts/basic.jade
+12 -10
View File
@@ -18,16 +18,18 @@ html
link(rel="stylesheet", type="text/css", href="/css/main.css")
body
.content
include ../includes/_header.jade
block body
.view__screen
.content
include ../includes/_header.jade
block content
block content
include ../includes/_footer.jade
include ../includes/_footer.jade
block scripts
script(src="/js/underscore.js")
script(src="/js/jquery.js")
script(src="/js/backbone.js")
script(src="/js/jade.js")
script(src="/js/when.js")
block scripts
script(src="/js/underscore.js")
script(src="/js/jquery.js")
script(src="/js/backbone.js")
script(src="/js/jade.js")
script(src="/js/when.js")
src/scripts/controllers/feedback_controller.coffee
+103
View File
@@ -0,0 +1,103 @@
###
Crafting Guide - feedback_controller.coffee
Copyright (c) 2015 by Redwood Labs
All rights reserved.
###
BaseController = require './base_controller'
{Duration} = require '../constants'
EmailClient = require '../models/email_client'
{Key} = require '../constants'
########################################################################################################################
module.exports = class FeedbackController extends BaseController
constructor: (options={})->
options.model ?= new EmailClient
options.templateName = 'feedback'
super options
Object.defineProperty this, 'isOpen', get:-> @$el.offset().left is 0
# Event Methods ################################################################################
onSendClicked: ->
return unless @$commentField.val().length > 0
@$sendButton.attr 'disabled', 'disabled'
message =
subject:'Crafting Guide Feedback'
body:
"""
url: #{window.location.href}
name: #{@$nameField.val()}
email: #{@$emailField.val()}
comment:
#{@$commentField.val()}
"""
@model.send(message)
.then =>
@onToggle()
@$error.slideUp duration:Duration.fast
.catch (error)=>
@$error.slideDown duration:Duration.normal
.finally =>
@$sendButton.removeAttr 'disabled'
onTextChanged: (event)->
if @$commentField.val().length > 0
@$sendButton.removeAttr 'disabled'
else
@$sendButton.attr 'disabled', 'disabled'
if event?.which is Key.Return and @$commentField.val().length > 0
@onSendClicked()
onToggle: ->
@$screen.off 'click'
if @isOpen
@$screen.css display:'none'
@$el.animate {left:-@$el.outerWidth()}, duration:Duration.normal, complete:=>
@$commentField.val ''
@$('input, textarea').blur()
else
@$screen.on 'click', => @onToggle()
@$screen.css display:'block'
@$el.animate {left:0}, duration:Duration.normal, complete:=>
if @$nameField.val().length is 0
@$nameField.focus()
else if @$emailField.val().length is 0
@$emailField.focus()
else
@$commentField.focus()
# BaseController Overrides #####################################################################
onDidRender: ->
@$screen = $('.view__screen')
@$commentField = @$('textarea[name="comment"]')
@$emailField = @$('input[name="email"]')
@$error = @$('.error')
@$nameField = @$('input[name="name"]')
@$sendButton = @$('button[name="send"]')
windowHeight = window.innerHeight
@$el.delay(Duration.slow).animate {left:-@$el.outerWidth()}, Duration.slow
@onTextChanged()
super
# Backbone.View Methods ########################################################################
events:
'click .label': 'onToggle'
'click button': 'onSendClicked'
'input textarea': 'onTextChanged'
'keyup textarea': 'onTextChanged'
src/scripts/main.coffee
+4
View File
@@ -8,6 +8,7 @@ All rights reserved.
require './underscore_mixins'
views = require './views'
FeedbackController = require './controllers/feedback_controller'
Logger = require './logger'
CraftingGuideRouter = require './crafting_guide_router'
@@ -22,5 +23,8 @@ global.views = views
if window.location.hostname is 'localhost'
logger.level = Logger.TRACE
feedbackController = new FeedbackController el:'.view__feedback'
feedbackController.render()
logger.info "CraftingGuide is ready"
Backbone.history.start pushState:true
src/scripts/models/email_client.coffee
+57
View File
@@ -0,0 +1,57 @@
###
Crafting Guide - email_client.coffee
Copyright (c) 2015 by Redwood Labs
All rights reserved.
###
########################################################################################################################
module.exports = class EmailClient
constructor: ->
@baseUrl = 'https://mandrillapp.com:443/api/1.0'
@key = 'zaERWIuTVJaq0seCjjgVqw'
# Public Methods ###############################################################################
send: (options={})->
options.body ?= "(no body)"
options.fromAddress ?= "[email protected]"
options.fromName ?= "Crafting Guide Website"
options.subject ?= "(no subject)"
options.toAddress ?= "[email protected]"
options.toName ?= "Crafting Guide"
body =
key: @key
message:
from_email: options.fromAddress
from_name: options.fromName
subject: options.subject
text: options.body
to: [ email:options.toAddress, name:options.toName, type:'to' ]
logger.info "sending email: #{util.inspect(body)}"
w.promise (resolve, reject)=>
onSuccess = (data, status, request)->
logger.info "sending email result: #{util.inspect(data)}, status:#{status}"
data = if _.isArray data then data[0] else data
if data.status isnt "sent"
reject status:data.status, message:data.reject_reason
else
resolve status:data.status
onError = (request, status, error)->
logger.error "sending email failed: #{status}, error:#{error}"
reject status:status, message:error
$.ajax "#{@baseUrl}/messages/send.json",
cache: false
data: body
dataType: 'json'
error: onError
success: onSuccess
type: 'POST'
src/templates/feedback.jade
+19
View File
@@ -0,0 +1,19 @@
//-
//- Crafting Guide - feedback.jade
//-
//- Copyright (c) 2015 by Redwood Labs
//- All rights reserved.
//-
.view__feedback
input(name="name", placeholder="name (optional)")
input(name="email", placeholder="email (optional)")
label(name="comment") Comment:
textarea(name="comment")
button(name="send") send
.error: p Sending failed. Please try again later.
.label
img(src="/images/paper.png")
p Feedback