Commit 7c00d403 authored by bbaer's avatar bbaer
Browse files

creating container for checkboxes at trigger location

parent bd074162
Pipeline #735 passed with stage
in 1 minute and 45 seconds
......@@ -16,13 +16,35 @@ var QfqNS = QfqNS || {};
(function (n) {
n.Droplet = function ($trigger) {
n.Droplet = function () {
this._$trigger = {};
this.position = {};
this._$container = {};
this.visible = false;
};
n.Droplet.prototype.setTrigger = function($trigger) {
this._$trigger = $trigger;
var that = this;
this._$trigger.click(function() {that.toggleDroplet();});
};
n.Droplet.prototype.setContainer = function($container) {
this._$container = $container;
};
n.Droplet.prototype.setPosition = function(left, top) {
this.position = {
left: $trigger.offset().left,
bottom: $trigger.offset().top + $trigger.outerHeight()
left: left,
top: top
};
console.log(this.position.left + ", Bottom: " + this.position.bottom);
console.log($trigger.offset());
};
n.Droplet.prototype.createContainerBellowTrigger = function () {
this.setPosition(
this._$trigger.offset().left,
this._$trigger.offset().top + this._$trigger.outerHeight()
);
var $container = $("<div />", {
height: "300px",
width: "400px",
......@@ -31,11 +53,28 @@ var QfqNS = QfqNS || {};
$container.css({
position: 'absolute',
zIndex: '100',
top: this.position.bottom + "px",
top: this.position.top + 10 + "px",
left: this.position.left + "px",
backgroundColor: "yellow"
backgroundColor: "#fff"
});
$(document.body).append($container);
$container.addClass("qfq-droplet-container");
$container.hide();
return $container;
};
n.Droplet.prototype.getContainer = function() {
if (this._$container) {
console.error("No container has been created");
} else {
return this._$container;
}
};
n.Droplet.prototype.toggleDroplet = function () {
this._$container.toggle();
this.visible = !this.visible;
};
})(QfqNS);
\ No newline at end of file
......@@ -493,4 +493,31 @@ select.qfq-locked:invalid {
.qfqTargetDisplay {
border: 1px dashed #25adf1;
}
// Droplets
.qfq-droplet-container {
position: absolute;
border: 2px solid #666;
border-radius: 8px;
padding: 15px;
}
.qfq-droplet-container:before {
content: ' ';
position: absolute;
left: 10px;
top: -10px;
border: 5px solid;
border-color: transparent #666 #666 transparent;
}
.qfq-droplet-container:after {
content: ' ';
position: absolute;
left: 19px;
top: -10px;
border: 5px solid;
border-color: transparent transparent #666 #666;
}
\ No newline at end of file
......@@ -43,15 +43,13 @@
<button
id="i343"
class="btn btn-primary"
onClick="new QfqNS.Droplet($(this));"
class="btn btn-primary qfq-droplet"
>
Test
</button>
<button
id="i344"
class="btn btn-primary"
onClick="new QfqNS.Droplet($(this));"
class="btn btn-primary qfq-droplet"
style="position: relative; left: 30px; top: 90px;"
>
Test
......@@ -84,7 +82,11 @@
QfqNS.Log.level = 0;
// Just for mockup, init() function called from new QfqNS.Plugin class maybe.
$(".qfq-droplet").each(function() {
var droplet = new QfqNS.Droplet();
droplet.setTrigger($(this));
droplet.setContainer(droplet.createContainerBellowTrigger());
});
});
</script>
</body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment