Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
I
iTasks-SDK
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
73
Issues
73
List
Boards
Labels
Service Desk
Milestones
Merge Requests
6
Merge Requests
6
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
clean-and-itasks
iTasks-SDK
Commits
8f9a454c
Commit
8f9a454c
authored
Jun 21, 2019
by
Bas Lijnse
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added an extension to create scaled editors
parent
41d2eb6d
Pipeline
#25787
passed with stage
in 5 minutes and 27 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
96 additions
and
0 deletions
+96
-0
Libraries/iTasks/Extensions/ScaledEditor.dcl
Libraries/iTasks/Extensions/ScaledEditor.dcl
+9
-0
Libraries/iTasks/Extensions/ScaledEditor.icl
Libraries/iTasks/Extensions/ScaledEditor.icl
+71
-0
Tests/Interactive/CustomEditors/TestScaledEditor.icl
Tests/Interactive/CustomEditors/TestScaledEditor.icl
+16
-0
No files found.
Libraries/iTasks/Extensions/ScaledEditor.dcl
0 → 100644
View file @
8f9a454c
definition
module
iTasks
.
Extensions
.
ScaledEditor
from
iTasks
.
UI
.
Editor
import
::
Editor
/**
* This module wraps any editor in a container.
* The editor gets a fixed size, but is scaled down or up with css transforms to always fit
* the container. This is useful for presentations and other applications where you need a
* predictable fixed UI size, but don't know the resolution of the display.
*/
scaledEditor
::
Int
Int
(
Editor
a
)
->
Editor
a
Libraries/iTasks/Extensions/ScaledEditor.icl
0 → 100644
View file @
8f9a454c
implementation
module
iTasks
.
Extensions
.
ScaledEditor
import
StdFunctions
,
StdString
,
StdList
,
StdBool
,
StdArray
import
Text
.
HTML
,
Text
.
GenJSON
,
Data
.
Error
,
Data
.
Func
import
iTasks
.
UI
.
Definition
import
iTasks
.
UI
.
Editor
import
iTasks
.
UI
.
Editor
.
Modifiers
import
iTasks
.
UI
.
JavaScript
import
iTasks
.
Internal
.
Serialization
import
qualified
Data
.
Map
as
DM
//Basic idea:
//- Give the inner editor an exact size in pixels
//- Wrap the editor in a container
//- Add an onResize handler on the container that measures both the outer
// and inner element and sets a CSS transform on the inner element.
scaledEditor
::
Int
Int
(
Editor
a
)
->
Editor
a
scaledEditor
width
height
editor
=
{
Editor
|
genUI
=
genUI
,
onEdit
=
onEdit
,
onRefresh
=
onRefresh
,
valueFromState
=
valueFromState
}
where
fixedEditor
=
(
sizeAttr
(
ExactSize
width
)
(
ExactSize
height
))
@>>
editor
genUI
attr
datapath
mode
vst
=
case
fixedEditor
.
Editor
.
genUI
attr
datapath
(
mapEditMode
id
mode
)
vst
of
(
Ok
(
editorUI
,
editorState
),
vst
)
#
(
initUIString
,
vst
)
=
serializeForClient
(
wrapInitUIFunction
initUI
)
vst
=
(
Ok
(
wrapUI
initUIString
editorUI
,
editorState
),
vst
)
(
Error
e
,
vst
)
=
(
Error
e
,
vst
)
onEdit
datapath
event
state
vst
=
case
fixedEditor
.
Editor
.
onEdit
datapath
event
state
vst
of
(
Ok
(
change
,
state
),
vst
)
#
(
initUIString
,
vst
)
=
serializeForClient
(
wrapInitUIFunction
initUI
)
vst
=
(
Ok
(
wrapChange
initUIString
change
,
state
),
vst
)
(
Error
e
,
vst
)
=
(
Error
e
,
vst
)
onRefresh
datapath
value
state
vst
=
case
fixedEditor
.
Editor
.
onRefresh
datapath
value
state
vst
of
(
Ok
(
change
,
state
),
vst
)
#
(
initUIString
,
vst
)
=
serializeForClient
(
wrapInitUIFunction
initUI
)
vst
=
(
Ok
(
wrapChange
initUIString
change
,
state
),
vst
)
(
Error
e
,
vst
)
=
(
Error
e
,
vst
)
valueFromState
=
fixedEditor
.
Editor
.
valueFromState
wrapUI
initUI
ui
=
uiac
UIContainer
('
DM
'.
fromList
[(
"initUI"
,
JSONString
initUI
)])
[
ui
]
wrapChange
initUI
NoChange
=
NoChange
wrapChange
initUI
(
ReplaceUI
ui
)
=
ReplaceUI
(
wrapUI
initUI
ui
)
wrapChange
initUI
change
=
ChangeUI
[]
[(
0
,
ChangeChild
change
)]
//Add the onResize event handler on the wrapping container to scale the inner element
initUI
me
world
#
(
jsOnResize
,
world
)
=
jsWrapFun
(
onResize
me
)
me
world
#
world
=
(
me
.#
"onResize"
.=
jsOnResize
)
world
=
world
onResize
me
args
world
//Select the inner editor's dom element
#
(
children
,
world
)
=
(
me
.#
"domEl.children"
)
.?
world
#
(
innerEl
,
world
)
=
(
children
.#
0
)
.?
world
//Measure the inner size of the container element
#
(
domElClientHeight
,
world
)
=
(
me
.#
"domEl.clientHeight"
)
.?
world
#
(
domElClientWidth
,
world
)
=
(
me
.#
"domEl.clientWidth"
)
.?
world
//Measure the outer size of the editor's element
#
(
innerElOffsetHeight
,
world
)
=
(
innerEl
.#
"offsetHeight"
)
.?
world
#
(
innerElOffsetWidth
,
world
)
=
(
innerEl
.#
"offsetWidth"
)
.?
world
//Determine the scale factor
#
scaleHeight
=
toReal
(
fromMaybe
1
(
jsValToInt
domElClientHeight
))
/
toReal
(
fromMaybe
1
(
jsValToInt
innerElOffsetHeight
))
#
scaleWidth
=
toReal
(
fromMaybe
1
(
jsValToInt
domElClientWidth
))
/
toReal
(
fromMaybe
1
(
jsValToInt
innerElOffsetWidth
))
#
scale
=
min
scaleHeight
scaleWidth
#
world
=
(
innerEl
.#
"style.transformOrigin"
.=
"top left"
)
world
#
world
=
(
innerEl
.#
"style.transform"
.=
(
"scale("
+++
toString
scale
+++
")"
))
world
=
world
Tests/Interactive/CustomEditors/TestScaledEditor.icl
0 → 100644
View file @
8f9a454c
module
TestScaledEditor
import
iTasks
import
iTasks
.
Extensions
.
ScaledEditor
import
StdFunctions
import
Text
.
HTML
test
::
Task
HtmlTag
test
=
viewInformation
()
[
ViewUsing
id
(
scaledEditor
600
400
(
htmlView
<<@
styleAttr
"padding: 0"
))]
html
<<@
ApplyLayout
(
layoutSubUIs
(
SelectByPath
[
1
])
(
setUIAttributes
(
sizeAttr
FlexSize
FlexSize
)))
where
html
=
DivTag
[
StyleAttr
"width: 100%; height: 100%; background: blue; color: white; margin: 0"
]
[
SpanTag
[
StyleAttr
"font-size: 20px"
]
[
Text
"This text is automatically scaled"
]
]
Start
world
=
doTasks
test
world
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a 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