Added support for using different growl locations simultaneously

ksylvest · Dec 12, 2017 · 37a461d · 37a461d
1 parent f7a8663
commit 37a461d
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 80 deletions.
diff --git a/javascripts/jquery.growl.coffee b/javascripts/jquery.growl.coffee
@@ -31,20 +31,20 @@ class Growl
     delayOnHover: true
 
   @growl: (settings = {}) ->
-    @initialize()
     new Growl(settings)
 
-  @initialize: ->
-    $("body:not(:has(#growls))").append '<div id="growls" />'
-
   constructor: (settings = {}) ->
     @settings = $.extend {}, Growl.settings, settings
-    @$growls().attr 'class', @settings.location
+    @initialize(@settings.location)
     @render()
 
+  initialize: (location) ->
+    id = 'growls-' + location;
+    $('body:not(:has(#' + id + '))').append '<div id="' + id + '" />'
+
   render: =>
     $growl = @$growl()
-    @$growls().append $growl
+    @$growls(@settings.location).append $growl
     if @settings.fixed then @present() else @cycle()
     return
 
@@ -121,8 +121,9 @@ class Growl
     if transition? then $element.one(transition, callback) else callback()
     return
 
-  $growls: =>
-    @$_growls ?= $('#growls')
+  $growls: (location) =>
+    @$_growls ?= []
+    @$_growls[location] ?= $('#growls-' + location)
 
   $growl: =>
     @$_growl ?= $(@html())

diff --git a/javascripts/jquery.growl.js b/javascripts/jquery.growl.js
diff --git a/stylesheets/jquery.growl.css b/stylesheets/jquery.growl.css
@@ -1,36 +1,58 @@
-/* jQuery Growl
+/*
+ * jQuery Growl
  * Copyright 2015 Kevin Sylvestre
  * 1.3.2
  */
-#growls {
+.ontop, #growls-default, #growls-tl, #growls-tr, #growls-bl, #growls-br, #growls-tc, #growls-bc, #growls-cc, #growls-cl, #growls-cr {
   z-index: 50000;
   position: fixed; }
-  #growls.default {
-    top: 10px;
-    right: 10px; }
-  #growls.tl {
-    top: 10px;
-    left: 10px; }
-  #growls.tr {
-    top: 10px;
-    right: 10px; }
-  #growls.bl {
-    bottom: 10px;
-    left: 10px; }
-  #growls.br {
-    bottom: 10px;
-    right: 10px; }
-  #growls.tc {
-    top: 10px;
-    right: 10px;
-    left: 10px; }
-  #growls.bc {
-    bottom: 10px;
-    right: 10px;
-    left: 10px; }
-  #growls.tc .growl, #growls.bc .growl {
-    margin-left: auto;
-    margin-right: auto; }
+
+#growls-default {
+  top: 10px;
+  right: 10px; }
+
+#growls-tl {
+  top: 10px;
+  left: 10px; }
+
+#growls-tr {
+  top: 10px;
+  right: 10px; }
+
+#growls-bl {
+  bottom: 10px;
+  left: 10px; }
+
+#growls-br {
+  bottom: 10px;
+  right: 10px; }
+
+#growls-tc {
+  top: 10px;
+  right: 10px;
+  left: 10px; }
+
+#growls-bc {
+  bottom: 10px;
+  right: 10px;
+  left: 10px; }
+
+#growls-cc {
+  top: 50%;
+  left: 50%;
+  margin-left: -125px; }
+
+#growls-cl {
+  top: 50%;
+  left: 10px; }
+
+#growls-cr {
+  top: 50%;
+  right: 10px; }
+
+#growls-tc .growl, #growls-bc .growl {
+  margin-left: auto;
+  margin-right: auto; }
 
 .growl {
   opacity: 0.8;

diff --git a/stylesheets/jquery.growl.sass b/stylesheets/jquery.growl.sass
@@ -14,37 +14,62 @@ $namespace: "growl"
 
 $black: #000
 $white: #FFF
+$small: 200px
+$medium: 250px
+$large: 300px
+$spacing: 10px
 
 $duration: 0.4s
 
-#growls
+.ontop
   z-index: 50000
   position: fixed
 
-  &.default
-    top: 10px
-    right: 10px
-  &.tl
-    top: 10px
-    left: 10px
-  &.tr
-    top: 10px
-    right: 10px
-  &.bl
-    bottom: 10px
-    left: 10px
-  &.br
-    bottom: 10px
-    right: 10px
-  &.tc
-    top: 10px
-    right: 10px
-    left: 10px
-  &.bc
-    bottom: 10px
-    right: 10px
-    left: 10px
-  &.tc,&.bc
+#growls
+  &-default
+    @extend .ontop
+    top: $spacing
+    right: $spacing
+  &-tl
+    @extend .ontop
+    top: $spacing
+    left: $spacing
+  &-tr
+    @extend .ontop
+    top: $spacing
+    right: $spacing
+  &-bl
+    @extend .ontop
+    bottom: $spacing
+    left: $spacing
+  &-br
+    @extend .ontop
+    bottom: $spacing
+    right: $spacing
+  &-tc
+    @extend .ontop
+    top: $spacing
+    right: $spacing
+    left: $spacing
+  &-bc
+    @extend .ontop
+    bottom: $spacing
+    right: $spacing
+    left: $spacing
+  &-cc
+    @extend .ontop
+    top: 50%
+    left: 50%
+    margin-left: $medium / -2;
+  &-cl
+    @extend .ontop
+    top: 50%
+    left: $spacing
+  &-cr
+    @extend .ontop
+    top: 50%
+    right: $spacing
+  &-tc,&-bc
     .#{$namespace}
       margin:
         left:  auto
@@ -63,17 +88,17 @@ $duration: 0.4s
     +opacity(0.0)
 
   &.#{$namespace}-small
-    width: 200px
-    padding: 5px
-    margin: 5px
+    width: $small
+    padding: $spacing * 0.5
+    margin: $spacing * 0.5
   &.#{$namespace}-medium
-    width: 250px
-    padding: 10px
-    margin: 10px
+    width: $medium
+    padding: $spacing
+    margin: $spacing
   &.#{$namespace}-large
-    width: 300px
-    padding: 15px
-    margin: 15px
+    width: $large
+    padding: $spacing * 1.5
+    margin: $spacing * 1.5
 
   &.#{$namespace}-default
     color: #FFF