Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
typo3
qfq
Commits
be4b7ff2
Commit
be4b7ff2
authored
Aug 31, 2017
by
bbaer
Browse files
mockup for fabric, safety checkin.
parent
737a1ff6
Changes
1
Hide whitespace changes
Inline
Side-by-side
mockup/fabric.html
0 → 100644
View file @
be4b7ff2
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<link
rel=
"stylesheet"
href=
"../css/bootstrap.min.css"
>
<link
rel=
"stylesheet"
href=
"../css/bootstrap-theme.min.css"
>
<link
rel=
"stylesheet"
href=
"../css/jqx.base.css"
>
<link
rel=
"stylesheet"
href=
"../css/jqx.bootstrap.css"
>
<link
rel=
"stylesheet"
href=
"../css/qfq-bs.css"
>
<title>
Input Mode Switcher
</title>
</head>
<body>
<div
class=
"container-fluid"
>
<div
class=
"row"
>
<div
class=
"col-md-10 "
>
<div
class=
"btn-toolbar pull-right"
role=
"toolbar"
>
<div
class=
"btn-group"
role=
"group"
>
<button
id=
"save-button"
type=
"button"
class=
"btn btn-default navbar-btn"
><span
class=
"glyphicon glyphicon-ok"
></span></button>
<button
id=
"close-button"
type=
"button"
class=
"btn btn-default navbar-btn"
><span
class=
"glyphicon glyphicon-remove"
></span></button>
</div>
<div
class=
"btn-group"
role=
"group"
>
<button
id=
"delete-button"
type=
"button"
class=
"btn btn-default navbar-btn"
><span
class=
"glyphicon glyphicon-trash"
></span></button>
</div>
<div
class=
"btn-group"
role=
"group"
>
<a
id=
"form-new-button"
href=
"personmock.html?s=badcaffe1"
class=
"btn btn-default navbar-btn"
><span
class=
"glyphicon glyphicon-plus"
></span></a>
</div>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-4"
>
<canvas
id=
"c"
class=
"qfq-canvas"
width=
"600"
height=
"800"
style=
"border: 1px solid;"
></canvas>
</div>
<div
class=
"col-md-1"
>
<div
class=
"form-group"
>
<button
class=
"btn btn-primary"
id=
"drawing-mode"
><span
class=
"glyphicon glyphicon-pencil"
></span></button>
<button
class=
"btn btn-danger"
id=
"clear-canvas"
><span
class=
"glyphicon glyphicon-trash"
></span></button>
<button
class=
"btn btn-default"
id=
"add-text"
><span
class=
"glyphicon glyphicon-text-height"
></span></button>
</div>
<div
class=
"form-group"
>
<button
class=
"btn btn-default"
id=
"save1"
>
1
</button>
<button
class=
"btn btn-default"
id=
"save2"
>
2
</button>
<button
class=
"btn btn-default"
id=
"save3"
>
3
</button>
</div>
<div
class=
"form-group"
>
<button
class=
"btn btn-default"
id=
"export-svg"
><span
class=
"glyphicon glyphicon-camera"
></span></button>
</div>
</div>
<div
class=
"col-md-7"
>
<svg
id=
"target-svg"
width=
"600"
height=
"800"
></svg>
</div>
</div>
</div>
<script
src=
"../js/jquery.min.js"
></script>
<script
src=
"../js/bootstrap.min.js"
></script>
<script
src=
"../js/fabric.min.js"
></script>
<script
src=
"../js/validator.min.js"
></script>
<script
src=
"../js/jqx-all.js"
></script>
<script
src=
"../js/EventEmitter.min.js"
></script>
<script
src=
"../js/qfq.debug.js"
></script>
<script
src=
"../js/qfq.fabric.js"
></script>
<script
type=
"text/javascript"
>
/**
* Created by bbaer on 5/5/17.
*/
$
(
function
()
{
var
canvas
=
this
.
__canvas
=
new
fabric
.
Canvas
(
'
c
'
,
{
isDrawingMode
:
true
});
var
imageURL
=
"
../mockup/mockData/Scan2a.jpeg
"
;
var
saveOne
=
false
;
var
saveTwo
=
false
;
var
saveThree
=
false
;
fabric
.
Object
.
prototype
.
transparentCorners
=
false
;
function
setBackground
(
imagePath
)
{
fabric
.
Image
.
fromURL
(
imageURL
,
function
(
img
)
{
img
.
set
({
width
:
canvas
.
width
,
height
:
canvas
.
height
,
originX
:
'
left
'
,
originY
:
'
top
'
});
canvas
.
setBackgroundImage
(
img
,
canvas
.
renderAll
.
bind
(
canvas
));
});
}
function
deactivateDrawing
()
{
canvas
.
isDrawingMode
=
false
;
$
(
"
#drawing-mode
"
).
removeClass
(
"
btn-primary
"
);
$
(
"
#drawing-mode
"
).
addClass
(
"
btn-default
"
);
}
setBackground
(
imageURL
);
$
(
"
#clear-canvas
"
).
on
(
"
click
"
,
function
()
{
canvas
.
clear
();
setBackground
(
imageURL
);
});
$
(
"
#drawing-mode
"
).
on
(
"
click
"
,
function
()
{
canvas
.
isDrawingMode
=
!
canvas
.
isDrawingMode
;
console
.
log
(
"
Button pressed
"
);
if
(
canvas
.
isDrawingMode
)
{
$
(
this
).
removeClass
(
"
btn-default
"
);
$
(
this
).
addClass
(
"
btn-primary
"
);
}
else
{
$
(
this
).
removeClass
(
"
btn-primary
"
);
$
(
this
).
addClass
(
"
btn-default
"
);
}
});
$
(
"
#add-text
"
).
on
(
"
click
"
,
function
()
{
var
text
=
new
fabric
.
IText
(
'
type your text here
'
,
{
left
:
100
,
top
:
100
,
editable
:
true
});
canvas
.
add
(
text
);
deactivateDrawing
();
});
$
(
"
#save1
"
).
on
(
"
click
"
,
function
()
{
if
(
!
saveOne
)
{
saveOne
=
canvas
.
toJSON
();
}
else
{
canvas
.
loadFromJSON
(
saveOne
);
}
});
$
(
"
#save2
"
).
on
(
"
click
"
,
function
()
{
if
(
!
saveTwo
)
{
saveTwo
=
canvas
.
toJSON
();
}
else
{
canvas
.
loadFromJSON
(
saveTwo
);
}
});
$
(
"
#save3
"
).
on
(
"
click
"
,
function
()
{
if
(
!
saveThree
)
{
saveThree
=
canvas
.
toJSON
();
}
else
{
canvas
.
loadFromJSON
(
saveThree
);
}
});
$
(
"
#export-svg
"
).
on
(
"
click
"
,
function
()
{
var
svg
=
canvas
.
toSVG
();
console
.
log
(
svg
);
$
(
"
#target-svg
"
).
html
(
svg
);
});
$
(
'
html
'
).
keyup
(
function
(
e
)
{
if
(
e
.
keyCode
==
46
)
{
if
(
canvas
.
getActiveGroup
())
{
canvas
.
getActiveGroup
().
forEachObject
(
function
(
o
)
{
canvas
.
remove
(
o
)
});
canvas
.
discardActiveGroup
().
renderAll
();
}
else
{
canvas
.
remove
(
canvas
.
getActiveObject
());
}
}
});
});
</script>
<script
type=
"text/javascript"
>
$
(
function
()
{
var
qfqPage
=
new
QfqNS
.
QfqPage
({
tabsId
:
'
myTabs
'
,
formId
:
'
myForm
'
,
submitTo
:
'
api/
'
+
$
(
"
#submitTo
"
).
val
(),
deleteUrl
:
'
api/
'
+
$
(
"
#deleteUrl
"
).
val
(),
fileUploadTo
:
'
api/
'
+
$
(
"
#uploadTo
"
).
val
(),
fileDeleteUrl
:
'
api/
'
+
$
(
"
#fileDeleteUrl
"
).
val
(),
});
QfqNS
.
Log
.
level
=
0
;
});
</script>
</body>
</html>
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment