Skip to content
GitLab
Commit b8d6d93c authored by bbaer's avatar bbaer
Browse files

last commit before shit hits the fan.

parent b001de5f
Hide whitespace changes
Inline Side-by-side
doc/FABRIC.md
View file @ b8d6d93c
......@@ -18,9 +18,10 @@ Concept
<HTML>
...
<div id="fabric" data-images='{"images": [{"page": 1, "selector": "#qfq-fabric-image-1"}, {"page":2, "selector": "#qfq..."}]}'>
<div id="fabric" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1"}, {"page":2, "selector": "#qfq..."}]}'>
...
</HTML>
* id Selector ohne #
* Form Submit ist ein regualeres Save.
* Pro Aufgabe gibt es ein FormElemnt das die Fabric Drwaing JSON Daten enthaelt.
\ No newline at end of file
javascript/src/Plugins/qfq.fabric.js
View file @ b8d6d93c
......@@ -7,7 +7,7 @@
*
* Buttons and color switches are generated on basis of a json.
* May be expanded to make it easy to create new brushes and stuff.
*
*
* Probably will soon open up "easy" ways for you to create plugins
* that integrate into the qfq js client.
*
......@@ -51,6 +51,8 @@ $(function (n) {
this.myModes = {modes: [], currentMode: "", colors: []};
}
this.modeSettings = new ModeSettings();
ModeSettings.prototype.initialize = function(qfqFabric, uri) {
this.qFabric = qfqFabric;
this.getMyModes(uri);
......@@ -180,15 +182,65 @@ $(function (n) {
console.error("Couldn't find mode with name: " + string);
};
this.modeSettings = new ModeSettings();
this.modeSettings.initialize(this, 'mockData/fabric.modes.json');
function Emojis() {
this.qFabric = {};
this.emojis = [];
}
this.emojiHandler = new Emojis();
Emojis.prototype.initialize = function(qFabric, uri) {
this.qFabric = qFabric;
this.getFromJSON(uri);
};
Emojis.prototype.getFromJSON = function(uri) {
var that = this;
$.getJSON(uri, function(data) {
that.setData(data);
});
};
Emojis.prototype.setData = function(data) {
if (data.emojis instanceof Array) {
this.emojis = data.emojis;
this.buildList();
} else {
console.error("Couldn't load emojis: data.emojis not an array");
}
};
Emojis.prototype.buildList = function() {
var that = this;
var $container = $("#fabric-controls");
var $emojiField = $("<div>");
$container.append($emojiField);
this.emojis.forEach(function (o) {
$img = $("<img>", {
class: o.class,
id: o.selector
});
$emojiField.append($img);
$img.on("click", function() {
that.qFabric.emojiAdd(o.url);
console.log(o.name + " clicked");
});
})
};
fabric.Object.prototype.transparentCorners = false;
};
n.Fabric.prototype.setBackground = function (imagePath) {
n.Fabric.prototype.initialize = function(jsonImages, jsonButtons, jsonEmojis) {
this.modeSettings.initialize(this, jsonButtons);
this.emojiHandler.initialize(this, jsonEmojis);
this.setBackground(jsonImages);
};
n.Fabric.prototype.setBackground = function (imageSelector) {
var that = this;
/* Old code to load image From URL, stays here for reference
fabric.Image.fromURL(imagePath, function(img) {
img.set({
width: that.canvas.width,
......@@ -199,14 +251,36 @@ $(function (n) {
centeredScaling: true
});
that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
that.setBrush();
});*/
var $image = document.getElementById(imageSelector);
var img = new fabric.Image($image, {
width: this.canvas.width,
height: this.canvas.height,
originX: 'left',
originY: 'top',
lockUniScaling: true,
centeredScaling: true,
});
this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
};
n.Fabric.prototype.deactivatePanning = function () {
this.panning = false;
};
n.Fabric.prototype.emojiAdd = function(uri) {
var that = this;
fabric.Image.fromURL(uri, function(oImg) {
oImg.set({
left: 100,
top: 100,
height: 32,
width: 32
});
that.canvas.add(oImg);
});
};
n.Fabric.prototype.deactivateRectangleDrawing = function() {
//this.drawRectangleMode = false;
this.drawTextBoxMode = false;
......@@ -240,7 +314,7 @@ $(function (n) {
};
// Has to be changed for Fabric 2.0! Group selection are deprecated then, still needed
// for Fabric 1.x and current Fabric 2.0 beta has major drawing bug.
// for Fabric 1.x and current Fabric 2.0 beta has a major drawing bug.
n.Fabric.prototype.deleteActiveGroup = function() {
var that = this;
if (this.canvas.getActiveGroup()) {
......@@ -379,7 +453,7 @@ $(function (n) {
};
// Calls additional functions on button press, could eventually be integrated to
// the button/mode json
// the button/mode json. Talk about strange integration.
n.Fabric.prototype.buttonPress = function(string, $button) {
this.modeSettings.activateMode(string, $button);
switch(string) {
......@@ -430,7 +504,8 @@ $(function (n) {
// Just for mockup, init() function called from new QfqNS.Plugin class maybe.
n.fabric = new n.Fabric();
n.fabric.setBackground("../mockup/mockData/Scan2a.jpeg");
n.fabric.initialize("qfq-fabric-image-1", 'mockData/fabric.modes.json', 'mockData/qfq.emoji.json');
// Will be integrated shortly or scrapped entirely.
$("#text-bg-submit").on("click", function() {
......
less/qfq-bs.css.less
View file @ b8d6d93c
......@@ -177,6 +177,61 @@ i.@{spinner_class} {
border: none;
}
.color-picker {
margin-top: 5px;
}
.color-picker>button {
margin-right: 2px;
}
.qfq-fabric-image {
display: none;
}
// Emoji
.emoji {
display: inline-block;
border: none;
background-color: #fff;
width: 32px;
height: 32px;
margin: 5px;
}
.emoji-dice {
content: url('../Emoji/1f3b2.svg');
}
.emoji-trophy {
content: url('../Emoji/1f3c6.svg');
}
.emoji-lightbulb {
content: url('../Emoji/1f4a1.svg');
}
.emoji-bomb {
content: url('../Emoji/1f4a3.svg');
}
.emoji-onehundred {
content: url('../Emoji/1f4af.svg');
}
.emoji-forbidden {
content: url('../Emoji/1f6ab.svg');
}
.emoji-star {
content: url('../Emoji/1f31f.svg');
}
.emoji-cookie {
content: url('../Emoji/1f36a.svg');
}
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
display: block !important;
......
mockup/fabric.html
View file @ b8d6d93c
......@@ -36,23 +36,18 @@
</div>
</div>
</div>
<img src="mockData/Scan2a.jpeg" class="qfq-fabric-image" id="qfq-fabric-image-1"> </img>
<img src="mockData/MATH_165__02-07__Johnston_dmkimler_Scan.jpeg" class="qfq-fabric-image" id="qfq-fabric-image-2">
<img src="mockData/Math167_HW8_Page1.jpg" class="qfq-fabric-image" id="qfq-fabric-image-3">
<div class="row">
<div class="col-md-4">
<div id="fabric-controls">
</div>
<div class="form-group" id>
<div id="fabric" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1"}, {"page":2, "selector": "#qfq..."}]}'>
<div id="fabric-controls">
</div>
<div class="drawing-control" id="user-drawing-control">
<div class="drawing-options">
<button type="button" class="text-bg-toggle" id="draw-blue"></button>
<button type="button" class="text-bg-toggle" id="draw-light-blue"></button>
<button type="button" class="text-bg-toggle" id="draw-red"></button>
<button type="button" class="text-bg-toggle" id="draw-pink"></button>
<button type="button" class="text-bg-toggle" id="draw-green"></button>
<button type="button" class="text-bg-toggle" id="draw-yellow"></button>
</div>
</div>
<div class="text-insert" style="display:none;" id="user-text-control">
<textarea class="fabric-text" placeholder="Remember, be nice!" id="text-user-value"></textarea>
......
mockup/mockData/qfq.emoji.json 0 → 100644
View file @ b8d6d93c
{
"emojis": [
{
"name": "dice",
"code": ":dice:",
"class": "emoji emoji-dice",
"selector": "e-dice",
"url": "../Emoji/1f3b2.svg"
},
{
"name": "trophy",
"code": ":trophy:",
"class": "emoji emoji-trophy",
"selector": "e-trophy",
"url": "../extension/Resources/Public/Emoji/1f3c6.svg"
},
{
"name": "lightbulb",
"code": ":lighbulb:",
"class": "emoji emoji-lightbulb",
"selector": "e-lightbulb",
"url": "../extension/Resources/Public/Emoji/1f4a1.svg"
},
{
"name": "bomb",
"code": ":bomb:",
"class": "emoji emoji-bomb",
"selector": "e-bomb",
"url": "../extension/Resources/Public/Emoji/1f4a3.svg"
},
{
"name": "100p",
"code": ":100p:",
"class": "emoji emoji-onehundred",
"selector": "e-onehundred",
"url": "../extension/Resources/Public/Emoji/1f4af.svg"
},
{
"name": "forbidden",
"code": ":forbidden:",
"class": "emoji emoji-forbidden",
"selector": "e-forbidden",
"url": "../extension/Resources/Public/Emoji/1f6ab.svg"
},
{
"name": "star",
"code": ":star:",
"class": "emoji emoji-star",
"selector": "e-star",
"url": "../extension/Resources/Public/Emoji/1f31f.svg"
},
{
"name": "cookie",
"code": ":cookie:",
"class": "emoji emoji-cookie",
"selector": "e-cookie",
"url": "../extension/Resources/Public/Emoji/1f36a.svg"
}
]
}
\ No newline at end of file
mockup/mockData/qfq.images.json 0 → 100644
View file @ b8d6d93c
{
"images": [
{
"page": 1,
"selector": "#qfq-fabric-image-1"
},
{
"page": 2,
"selector": "#qfq-fabric-image-2"
},
{
"page": 1,
"selector": "#qfq-fabric-image-3"
}
]
}
\ No newline at end of file
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