Worked away our NotifyJS dependency - horrible lib

app/application.coffee

@@ -5,7 +5,6 @@ locale = require 'locale/locale'
 {me} = require 'lib/auth'
 Tracker = require 'lib/Tracker'
 CocoView = require 'views/kinds/CocoView'
-AchievementNotify = require '../../templates/achievement_notify'
 
 marked.setOptions {gfm: true, sanitize: true, smartLists: true, breaks: false}
 
@@ -40,11 +39,6 @@ Application = initialize: ->
   @facebookHandler = new FacebookHandler()
   @gplusHandler = new GPlusHandler()
   $(document).bind 'keydown', preventBackspace
-  $.notify.addStyle 'achievement-wood', html: $(AchievementNotify popup:true)
-  $.notify.addStyle 'achievement-stone', html: $(AchievementNotify popup:true)
-  $.notify.addStyle 'achievement-silver', html: $(AchievementNotify popup:true)
-  $.notify.addStyle 'achievement-gold', html: $(AchievementNotify popup:true)
-  $.notify.addStyle 'achievement-diamond', html: $(AchievementNotify popup:true)
   @linkedinHandler = new LinkedInHandler()
   preload(COMMON_FILES)
   $.i18n.init {

app/models/Achievement.coffee

@@ -22,7 +22,7 @@ module.exports = class Achievement extends CocoModel
     4: 'achievement-gold'
     5: 'achievement-diamond'
 
-  getNotifyStyle: -> Achievement.styleMapping[@get 'difficulty']
+  getStyle: -> Achievement.styleMapping[@get 'difficulty']
 
   @defaultImageURL: '/images/achievements/default.png'
 

app/styles/achievements.sass

@@ -1,12 +1,10 @@
 @import 'bootstrap/variables'
 
-.locked
-  // This used to be a grayscale filter but they're mad intensive to paint
-
 .achievement-body
+  position: relative
+
   .achievement-icon
     position: absolute
-    top: 0px
 
     .achievement-image
       width: 100%
@@ -88,8 +86,7 @@
         line-height: 1.3em
         max-height: 2.6em
 
-.notifyjs-achievement-wood-base, .notifyjs-achievement-stone-base, .notifyjs-achievement-silver-base,
-.notifyjs-achievement-gold-base, .notifyjs-achievement-diamond-base
+.achievement-popup
   padding: 20px 0px
   cursor: default
 
@@ -99,7 +96,7 @@
       width: 200px
       height: 200px
       left: -140px
-      top: 0px
+      top: -20px
 
       .achievement-image
         img
@@ -165,7 +162,7 @@
 .achievement-icon
   background-size: 100% 100% !important
 
-.notifyjs-achievement-wood-base, .achievement-wood
+.achievement-wood
   &.locked
     .achievement-icon
       background: url("/images/achievements/border_wood_locked.png") no-repeat
@@ -173,7 +170,7 @@
     .achievement-icon
       background: url("/images/achievements/border_wood.png") no-repeat
 
-.notifyjs-achievement-stone-base, .achievement-stone
+.achievement-stone
   &.locked
     .achievement-icon
       background: url("/images/achievements/border_stone_locked.png") no-repeat
@@ -181,7 +178,7 @@
     .achievement-icon
       background: url("/images/achievements/border_stone.png") no-repeat
 
-.notifyjs-achievement-silver-base, .achievement-silver
+.achievement-silver
   &.locked
     .achievement-icon
       background: url("/images/achievements/border_silver_locked.png") no-repeat
@@ -189,7 +186,7 @@
     .achievement-icon
       background: url("/images/achievements/border_silver.png") no-repeat
 
-.notifyjs-achievement-gold-base, .achievement-gold
+.achievement-gold
   &.locked
     .achievement-icon
       background: url("/images/achievements/border_gold_locked.png") no-repeat
@@ -197,7 +194,7 @@
     .achievement-icon
       background: url("/images/achievements/border_gold.png") no-repeat
 
-.notifyjs-achievement-diamond-base, .achievement-diamond
+.achievement-diamond
   &.locked
     .achievement-icon
       background: url("/images/achievements/border_diamond_locked.png") no-repeat
@@ -205,13 +202,13 @@
     .achievement-icon
       background: url("/images/achievements/border_diamond.png") no-repeat
 
-.exp-bar-accumulated
+.xp-bar-old
   background-color: #680080
 
-.exp-bar-new
+.xp-bar-new
   background-color: #0096ff
 
-.exp-bar-left
+.xp-bar-left
   background-color: #fffbfd
 
 .user-level
@@ -232,3 +229,9 @@
 
 .achievement-icon-small
   height: 18px
+
+// Achievement Popup
+.achievement-popup-container
+  position: fixed
+  right: 0px
+  bottom: 0px

app/styles/editor/achievement/edit.sass

@@ -15,6 +15,6 @@
 
   #achievement-view
     min-height: 200px
+    position: relative
+    padding-left: 200px
 
-  .notifyjs-container
-    clear: both

app/templates/achievement_notify.jade

@@ -1,16 +0,0 @@
-div
-  - var addedClass = notifyClass + (locked === true ? ' locked' : '')
-  .clearfix.achievement-body(class=addedClass)
-    .achievement-icon
-      .achievement-image(data-notify-html="image")
-        if imgURL
-          img(src=imgURL)
-    .achievement-content
-      .achievement-title(data-notify-html="title") #{title}
-      p.achievement-description(data-notify-html="description") #{description}
-
-      if popup
-        .progress-wrapper
-          span.user-level.badge(data-notify-html="level")
-          .progress-bar-wrapper(data-notify-html="progressBar")
-          .progress-bar-border

app/templates/achievements/achievement-popup.jade

@@ -0,0 +1,18 @@
+- var addedClass = style + (locked === true ? ' locked' : '')
+.clearfix.achievement-body(class=addedClass)
+  .achievement-icon
+    .achievement-image
+      img(src=imgURL)
+  .achievement-content
+    .achievement-title= title
+    p.achievement-description= description
+
+    if popup
+      .progress-wrapper
+        span.user-level.badge= level
+        .progress-bar-wrapper
+          .progress
+            .progress-bar.xp-bar-old(style="width:#{oldXPWidth}%" data-toggle="tooltip" data-placement="top" title="#{currentXP} XP in total")
+            .progress-bar.xp-bar-new(style="width:#{newXPWidth}%" data-toggle="tooltip" title="#{newXP} XP earned")
+            .progress-bar.xp-bar-left(style="width:#{leftXPWidth}%" data-toggle="tooltip" title="#{leftXP} XP until level #{nextLevel}")
+        .progress-bar-border

app/templates/editor/achievement/edit.jade

@@ -20,7 +20,7 @@ block content
 
     #achievement-treema
 
-    #achievement-view
+    #achievement-view.clearfix
       #achievement-view-inner
 
     hr

app/templates/user/achievements.jade

@@ -14,14 +14,14 @@ block append content
               - var title = achievement.get('name');
               - var description = achievement.get('description');
               - var locked = ! achievement.get('unlocked');
-              - var notifyClass = achievement.getNotifyStyle()
+              - var style = achievement.getStyle()
               - var imgURL = achievement.getImageURL();
               if locked
                 - var imgURL = achievement.getLockedImageURL();
               else
                 - var imgURL = achievement.getImageURL();
               .col-lg-4.col-xs-12
-                include ../achievement_notify
+                include ../achievements/achievement-popup
     else if activeLayout === 'table'
       .table-layout
         if earnedAchievements.length

app/views/achievements/AchievementPopup.coffee

@@ -0,0 +1,89 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/achievements/achievement-popup'
+User = require '../../models/User'
+Achievement = require '../../models/Achievement'
+
+module.exports = class AchievementPopup extends CocoView
+  className: 'achievement-popup'
+  template: template
+
+  constructor: (options) ->
+    @achievement = options.achievement
+    @earnedAchievement = options.earnedAchievement
+    @container = options.container or @getContainer()
+    @popup = options.container
+    @popup ?= true
+    super options
+    console.debug 'Created an AchievementPopup', @$el
+
+    @render()
+
+  calculateData: ->
+    currentLevel = me.level()
+    nextLevel = currentLevel + 1
+    currentLevelExp = User.expForLevel(currentLevel)
+    nextLevelXP = User.expForLevel(nextLevel)
+    totalExpNeeded = nextLevelXP - currentLevelExp
+    expFunction = @achievement.getExpFunction()
+    currentXP = me.get 'points'
+    if @achievement.isRepeatable()
+      achievedXP = expFunction(@earnedAchievement.get('previouslyAchievedAmount')) * @achievement.get('worth') if @achievement.isRepeatable()
+    else
+      achievedXP = @achievement.get 'worth'
+    previousXP = currentXP - achievedXP
+    leveledUp = currentXP - achievedXP < currentLevelExp
+    #console.debug 'Leveled up' if leveledUp
+    alreadyAchievedPercentage = 100 * (previousXP - currentLevelExp) / totalExpNeeded
+    alreadyAchievedPercentage = 0 if alreadyAchievedPercentage < 0 # In case of level up
+    newlyAchievedPercentage = if leveledUp then 100 * (currentXP - currentLevelExp) / totalExpNeeded else  100 * achievedXP / totalExpNeeded
+
+    #console.debug "Current level is #{currentLevel} (#{currentLevelExp} xp), next level is #{nextLevel} (#{nextLevelXP} xp)."
+    #console.debug "Need a total of #{nextLevelXP - currentLevelExp}, already had #{previousXP} and just now earned #{achievedXP} totalling on #{currentXP}"
+
+    alreadyAchievedBar = $("<div class='progress-bar xp-bar-old' style='width:#{alreadyAchievedPercentage}%'></div>")
+    newlyAchievedBar = $("<div data-toggle='tooltip' class='progress-bar exp-bar-new' style='width:#{newlyAchievedPercentage}%'></div>")
+    emptyBar = $("<div data-toggle='tooltip' class='progress-bar exp-bar-left' style='width:#{100 - newlyAchievedPercentage - alreadyAchievedPercentage}%'></div>")
+    progressBar = $('<div class="progress" data-toggle="tooltip"></div>').append(alreadyAchievedBar).append(newlyAchievedBar).append(emptyBar)
+
+    alreadyAchievedBar.tooltip(title: "#{currentXP} XP in total")
+    newlyAchievedBar.tooltip(title: "#{achievedXP} XP earned")
+    emptyBar.tooltip(title: "#{nextLevelXP - currentXP} XP until level #{nextLevel}")
+
+    data =
+      title: @achievement.get('name')
+      imgURL: @achievement.getImageURL()
+      description: @achievement.get('description')
+      level: currentLevel
+      currentXP: currentXP
+      newXP: achievedXP
+      leftXP: nextLevelXP - currentXP
+      oldXPWidth: alreadyAchievedPercentage
+      newXPWidth: newlyAchievedPercentage
+      leftXPWidth: 100 - newlyAchievedPercentage - alreadyAchievedPercentage
+
+  getRenderData: ->
+    c = super()
+    _.extend c, @calculateData()
+    c.style = @achievement.getStyle()
+    c.popup = true
+    c
+
+  render: ->
+    console.debug 'render achievement popup'
+    super()
+    @container.append @$el
+
+  getContainer: ->
+    unless @container
+      @container = $('.achievement-popup-container')
+      unless @container.length
+        $('body').append('<div class="achievement-popup-container"></div>')
+        @container = $('.achievement-popup-container')
+    @container
+
+  afterRender: ->
+    super()
+    _.delay @initializeTooltips, 1000 # TODO this could be smoother
+
+  initializeTooltips: ->
+    $('.progress-bar').tooltip()

app/views/editor/achievement/AchievementEditView.coffee

@@ -1,6 +1,7 @@
 RootView = require 'views/kinds/RootView'
 template = require 'templates/editor/achievement/edit'
 Achievement = require 'models/Achievement'
+AchievementPopup = require 'views/achievements/AchievementPopup'
 ConfirmModal = require 'views/modal/ConfirmModal'
 errors = require 'lib/errors'
 app = require 'application'
@@ -60,7 +61,6 @@ module.exports = class AchievementEditView extends RootView
     @pushChangesToPreview()
 
   pushChangesToPreview: =>
-    $('.notifyjs-wrapper').trigger 'notify-hide'
 
     if @treema?
       for key, value of @treema.data
@@ -69,17 +69,8 @@ module.exports = class AchievementEditView extends RootView
     earned =
       earnedPoints: @achievement.get 'worth'
 
-    data = @createNotifyData @achievement, earned
-    options =
-      style: @achievement.getNotifyStyle()
-      autoHide: false
-      clickToHide: false
-      arrowShow: false
-      elementPosition: 'bottom center'
-      hideDuration: 0
-      showDuration: 0
+    popup = new AchievementPopup achievement: @achievement, earnedAchievement:earned, popup: false, container: $('#achievement-view')
 
-    $('#achievement-view-inner').notify data, options
 
   openSaveModal: ->
     'Maybe later' # TODO patch patch patch

app/views/kinds/RootView.coffee

@@ -6,8 +6,7 @@ CocoView = require './CocoView'
 {logoutUser, me} = require('lib/auth')
 locale = require 'locale/locale'
 
-Achievement = require '../../models/Achievement'
-User = require '../../models/User'
+AchievementPopup = require 'views/achievements/AchievementPopup'
 utils = require 'lib/utils'
 
 # TODO remove
@@ -33,69 +32,8 @@ module.exports = class RootView extends CocoView
   subscriptions:
     'achievements:new': 'handleNewAchievements'
 
-  createNotifyData: (achievement, earnedAchievement) ->
-    currentLevel = me.level()
-    nextLevel = currentLevel + 1
-    currentLevelExp = User.expForLevel(currentLevel)
-    nextLevelExp = User.expForLevel(nextLevel)
-    totalExpNeeded = nextLevelExp - currentLevelExp
-    expFunction = achievement.getExpFunction()
-    currentExp = me.get('points')
-    if achievement.isRepeatable()
-      achievedExp = expFunction(earnedAchievement.get('previouslyAchievedAmount')) * achievement.get('worth') if achievement.isRepeatable()
-    else
-      achievedExp = achievement.get 'worth'
-    previousExp = currentExp - achievedExp
-    leveledUp = currentExp - achievedExp < currentLevelExp
-    #console.debug 'Leveled up' if leveledUp
-    alreadyAchievedPercentage = 100 * (previousExp - currentLevelExp) / totalExpNeeded
-    alreadyAchievedPercentage = 0 if alreadyAchievedPercentage < 0 # In case of level up
-    newlyAchievedPercentage = if leveledUp then 100 * (currentExp - currentLevelExp) / totalExpNeeded else  100 * achievedExp / totalExpNeeded
-
-    #console.debug "Current level is #{currentLevel} (#{currentLevelExp} xp), next level is #{nextLevel} (#{nextLevelExp} xp)."
-    #console.debug "Need a total of #{nextLevelExp - currentLevelExp}, already had #{previousExp} and just now earned #{achievedExp} totalling on #{currentExp}"
-
-    alreadyAchievedBar = $("<div class='progress-bar exp-bar-accumulated' style='width:#{alreadyAchievedPercentage}%'></div>")
-    newlyAchievedBar = $("<div data-toggle='tooltip' class='progress-bar exp-bar-new' style='width:#{newlyAchievedPercentage}%'></div>")
-    emptyBar = $("<div data-toggle='tooltip' class='progress-bar exp-bar-left' style='width:#{100 - newlyAchievedPercentage - alreadyAchievedPercentage}%'></div>")
-    progressBar = $('<div class="progress" data-toggle="tooltip"></div>').append(alreadyAchievedBar).append(newlyAchievedBar).append(emptyBar)
-
-    alreadyAchievedBar.tooltip(title: "#{currentExp} XP in total")
-    newlyAchievedBar.tooltip(title: "#{achievedExp} XP earned")
-    emptyBar.tooltip(title: "#{nextLevelExp - currentExp} XP until level #{nextLevel}")
-
-    barBorder = $('<img src="/images/achievements/bar_border.png" />')
-
-    data =
-      title: achievement.get('name')
-      image: $("<img src='#{achievement.getImageURL()}' />")
-      description: achievement.get('description')
-      progressBar: progressBar
-      earnedExp: "+ #{achievedExp} XP"
-      level: currentLevel
-      barBorder: barBorder
-
-    data
-
   showNewAchievement: (achievement, earnedAchievement) ->
-    data = @createNotifyData achievement, earnedAchievement
-    options =
-      autoHideDelay: 5000
-      elementPosition: 'top left'
-      globalPosition: 'bottom right'
-      showDuration: 0
-      style: achievement.getNotifyStyle()
-      autoHide: false
-      clickToHide: true
-
-    unless @timeout?
-      $.notify data, options
-      @timeout = 2000
-    else
-      setTimeout ->
-        $.notify data, options
-        @timeout += 2000
-      , @timeout
+    popup = new AchievementPopup achievement: achievement, earnedAchievement: earnedAchievement
 
   handleNewAchievements: (earnedAchievements) ->
     _.each earnedAchievements.models, (earnedAchievement) =>

test/demo/views/achievement/AchievementGet.demo.coffee

@@ -17,17 +17,8 @@ module.exports = ->
   unlockable = new Achievement unlockableObj
   earnedUnlockable = new EarnedAchievement earnedUnlockableObj
 
-  console.log currentView
-  data = currentView.createNotifyData unlockable, earnedUnlockable
-  options =
-    autoHideDelay: 10000
-    globalPosition: 'bottom right'
-    showDuration: 400
-    style: 'achievement-silver'
-    autoHide: false
-    clickToHide: false
-
-  $.notify data, options
-
   view = new RootView
   view.render()
+
+  view.showNewAchievement unlockable, earnedUnlockable
+  view