Update jBox.js

StephanWagner · Nov 28, 2016 · aed03f4 · aed03f4
1 parent 5766b57
commit aed03f4
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 3 deletions.
diff --git a/Source/jBox.js b/Source/jBox.js
@@ -396,7 +396,7 @@ function jBox(type, options) {
     if (this.options.draggable) {
 
       // Get the handle where jBox will be dragged with
-      var handle = (this.options.draggable == 'title') && this.titleContainer ? this.titleContainer : (this.options.draggable.length ? this.options.draggable : this.wrapper);
+      var handle = (this.options.draggable == 'title') && this.titleContainer ? this.titleContainer : ($(this.options.draggable).length ? $(this.options.draggable) : this.wrapper);
 
       // Add mouse events
       handle.addClass('jBox-draggable').on('mousedown', function (ev)

diff --git a/Source/jBox.min.js b/Source/jBox.min.js
diff --git a/Source/themes/TooltipSmall.css b/Source/themes/TooltipSmall.css
@@ -0,0 +1,52 @@
+
+/* jBox theme: TooltipSmall */
+
+.jBox-TooltipSmall {
+  pointer-events: none;
+}
+
+.jBox-TooltipSmall .jBox-content {
+  padding: 0 10px;
+  line-height: 28px;
+}
+
+.jBox-TooltipSmall .jBox-container {
+  border-radius: 2px;
+}
+
+.jBox-TooltipSmall .jBox-pointer-top,
+.jBox-TooltipSmall .jBox-pointer-bottom {
+  width: 22px;
+  height: 8px;
+}
+
+.jBox-TooltipSmall .jBox-pointer-right,
+.jBox-TooltipSmall .jBox-pointer-left {
+  width: 8px;
+  height: 22px;
+}
+
+.jBox-TooltipSmall .jBox-pointer:after {
+  width: 20px;
+  height: 20px;
+}
+
+.jBox-TooltipSmall .jBox-pointer-top:after {
+  left: 1px;
+  top: 6px;
+}
+
+.jBox-TooltipSmall .jBox-pointer-bottom:after {
+  left: 1px;
+  bottom: 6px;
+}
+
+.jBox-TooltipSmall .jBox-pointer-right:after {
+  top: 1px;
+  right: 6px;
+}
+
+.jBox-TooltipSmall .jBox-pointer-left:after {
+  top: 1px;
+  left: 6px;
+}
diff --git a/Source/themes/TooltipSmallGray.css b/Source/themes/TooltipSmallGray.css
@@ -0,0 +1,56 @@
+
+/* jBox theme: TooltipSmall */
+
+.jBox-TooltipSmallGray {
+  pointer-events: none;
+}
+
+.jBox-TooltipSmallGray .jBox-content {
+  padding: 0 10px;
+}
+
+.jBox-TooltipSmallGray .jBox-container {
+  font-size: 13px;
+  line-height: 24px;
+  border-radius: 12px;
+  background-image: linear-gradient(to bottom, #fafafa, #f2f2f2);
+}
+
+.jBox-TooltipSmallGray .jBox-pointer-top,
+.jBox-TooltipSmallGray .jBox-pointer-bottom {
+  width: 22px;
+  height: 8px;
+}
+
+.jBox-TooltipSmallGray .jBox-pointer-right,
+.jBox-TooltipSmallGray .jBox-pointer-left {
+  width: 8px;
+  height: 22px;
+}
+
+.jBox-TooltipSmallGray .jBox-pointer:after {
+  width: 20px;
+  height: 20px;
+}
+
+.jBox-TooltipSmallGray .jBox-pointer-top:after {
+  background: #fafafa;
+  left: 1px;
+  top: 6px;
+}
+
+.jBox-TooltipSmallGray .jBox-pointer-bottom:after {
+  background: #f2f2f2;
+  left: 1px;
+  bottom: 6px;
+}
+
+.jBox-TooltipSmallGray .jBox-pointer-right:after {
+  top: 1px;
+  right: 6px;
+}
+
+.jBox-TooltipSmallGray .jBox-pointer-left:after {
+  top: 1px;
+  left: 6px;
+}