Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple Right Cards #150

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+418 −103
Open

Multiple Right Cards #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4252a03
Multiple Right Cards
BartEvers Jul 12, 2024
f4a2882
Bug: onclick workflow block is deleted
BartEvers Jul 12, 2024
f46f721
blocks in menu from json file
BartEvers Jul 13, 2024
396c41d
made right card dynamiccaly loaded
BartEvers Jul 13, 2024
b2ce554
fix
BartEvers Jul 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added demo/.DS_Store
View file
Open in desktop
Binary file not shown.
49 changes: 49 additions & 0 deletions demo/blocks.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
[
{
"blockelemtype": "1",
"blocktitle": "New visitor",
"blockdesc": "Triggers when somebody visits a specified page",
"blockimg": "assets/eye.svg",
"blockimgblue": "assets/eyeblue.svg",
"blockinfo": "When a new visitor goes to Site 1",
"fieldtypes": [
{
"name": "Page URL",
"type": "text"
},
{
"name": "Visitor ID",
"type": "text"
},
{
"name": "Action Type",
"type": "select",
"options": ["Type 1", "Type 2", "Type 3"]
},
{
"name": "Action Type",
"type": "checkbox",
"options": ["Type 1", "Type 2", "Type 3"]
}
]
},
{
"blockelemtype": "2",
"blocktitle": "Action is performed",
"blockdesc": "Triggers when somebody performs a specified action",
"blockimg": "assets/action.svg",
"blockimgblue": "assets/actionblue.svg",
"blockinfo": "When Action 1 is performed",
"fieldtypes": [
{
"name": "Action Type",
"type": "select",
"options": ["Type 1", "Type 2", "Type 3"]
},
{
"name": "Action Time",
"type": "datetime"
}
]
}
]
2 changes: 1 addition & 1 deletion demo/flowy.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

73 changes: 72 additions & 1 deletion demo/flowy.min.js
View file
Open in desktop

Large diffs are not rendered by default.

41 changes: 11 additions & 30 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
<meta property="twitter:image" content="https://alyssax.com/x/assets/meta.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
<link href='styles.css' rel='stylesheet' type='text/css'>
<link href='flowy.min.css' rel='stylesheet' type='text/css'>
<link href='../engine/flowy.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="flowy.min.js"></script>
<script src="main.js"></script>
<script src="../engine/flowy.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="navigation">
Expand All @@ -36,14 +36,14 @@
<p id="title">Your automation pipeline</p>
<p id="subtitle">Marketing automation</p>
</div>
</div>
</div>
</div>
<div id="centerswitch">
<div id="leftswitch">Diagram view</div>
<div id="rightswitch">Code editor</div>
</div>
<div id="buttonsright">
<div id="discard">Discard</div>
<div id="saveButton">Discard</div>
<div id="publish">Publish to site</div>
</div>
</div>
Expand Down Expand Up @@ -128,35 +128,16 @@
</div>
</div>
<div id="footer">
<a href="https://github.com/alyssaxuu/flowy/" target="_blank">GitHub</a>
<span>·</span>
<a href="https://twitter.com/alyssaxuu/status/1199724989353730048" target="_blank">Twitter</a>
<span>·</span>
<a href="https://alyssax.com" target="_blank"><p>Made with</p><img src="assets/heart.svg"><p>by</p> Alyssa X</a>
<a href="https://github.com/alyssaxuu/flowy/" target="_blank">Bart Evers</a>
</div>
</div>
<div id="propwrap">
<div id="properties">
<div id="close">
<img src="assets/close.svg">
</div>
<p id="header2">Properties</p>
<div id="propswitch">
<div id="dataprop">Data</div>
<div id="alertprop">Alerts</div>
<div id="logsprop">Logs</div>
</div>
<div id="proplist">
<p class="inputlabel">Select database</p>
<div class="dropme">Database 1 <img src="assets/dropdown.svg"></div>
<p class="inputlabel">Check properties</p>
<div class="dropme">All<img src="assets/dropdown.svg"></div>
<div class="checkus"><img src="assets/checkon.svg"><p>Log on successful performance</p></div>
<div class="checkus"><img src="assets/checkoff.svg"><p>Give priority to this block</p></div>
</div>
<div id="divisionthing"></div>
<div id="removeblock">Delete blocks</div>
<div id="properties-container"></div>
<div id="close">
<img src="assets/close.svg">
</div>
<div id="divisionthing"></div>
<div id="removeblock">Delete blocks</div>
</div>
<div id="canvas">
</div>
Expand Down
184 changes: 137 additions & 47 deletions demo/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,50 @@ document.addEventListener("DOMContentLoaded", function(){
nodes[i].addEventListener(type, listener, capture);
}
}


var xhr = new XMLHttpRequest();
xhr.open('GET', 'blocks.json', false);
xhr.send();
var blocks = JSON.parse(xhr.responseText);

var blocklist = document.getElementById("blocklist");
blocklist.innerHTML = '';
blocks.forEach(function(block) {
var blockElem = document.createElement("div");
blockElem.className = "blockelem create-flowy noselect";
blockElem.innerHTML = "<input type='hidden' name='blockelemtype' class='blockelemtype' value='" + block.blockelemtype + "'>" +
"<div class='grabme'><img src='assets/grabme.svg'></div>" +
"<div class='blockin'>" +
"<div class='blockico'><span></span><img src='" + block.blockimg + "'></div>" +
"<div class='blocktext'>" +
"<p class='blocktitle'>" + block.blocktitle + "</p>" +
"<p class='blockdesc'>" + block.blockdesc + "</p>" +
"</div>" +
"</div>";

blocklist.appendChild(blockElem);
});


function snapping(drag, first) {
var grab = drag.querySelector(".grabme");
grab.parentNode.removeChild(grab);
var blockin = drag.querySelector(".blockin");
blockin.parentNode.removeChild(blockin);
if (drag.querySelector(".blockelemtype").value == "1") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/eyeblue.svg'><p class='blockyname'>New visitor</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>When a <span>new visitor</span> goes to <span>Site 1</span></div>";
} else if (drag.querySelector(".blockelemtype").value == "2") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/actionblue.svg'><p class='blockyname'>Action is performed</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>When <span>Action 1</span> is performed</div>";
} else if (drag.querySelector(".blockelemtype").value == "3") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/timeblue.svg'><p class='blockyname'>Time has passed</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>When <span>10 seconds</span> have passed</div>";
} else if (drag.querySelector(".blockelemtype").value == "4") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/errorblue.svg'><p class='blockyname'>Error prompt</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>When <span>Error 1</span> is triggered</div>";
} else if (drag.querySelector(".blockelemtype").value == "5") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/databaseorange.svg'><p class='blockyname'>New database entry</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>Add <span>Data object</span> to <span>Database 1</span></div>";
} else if (drag.querySelector(".blockelemtype").value == "6") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/databaseorange.svg'><p class='blockyname'>Update database</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>Update <span>Database 1</span></div>";
} else if (drag.querySelector(".blockelemtype").value == "7") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/actionorange.svg'><p class='blockyname'>Perform an action</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>Perform <span>Action 1</span></div>";
} else if (drag.querySelector(".blockelemtype").value == "8") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/twitterorange.svg'><p class='blockyname'>Make a tweet</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>Tweet <span>Query 1</span> with the account <span>@alyssaxuu</span></div>";
} else if (drag.querySelector(".blockelemtype").value == "9") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/logred.svg'><p class='blockyname'>Add new log entry</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>Add new <span>success</span> log entry</div>";
} else if (drag.querySelector(".blockelemtype").value == "10") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/logred.svg'><p class='blockyname'>Update logs</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>Edit <span>Log Entry 1</span></div>";
} else if (drag.querySelector(".blockelemtype").value == "11") {
drag.innerHTML += "<div class='blockyleft'><img src='assets/errorred.svg'><p class='blockyname'>Prompt an error</p></div><div class='blockyright'><img src='assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'>Trigger <span>Error 1</span></div>";
}
return true;
var blockType = drag.querySelector(".blockelemtype").value;
var block = blocks.find(function(b) {
return b.blockelemtype === blockType;
});

drag.innerHTML += "<div class='blockyleft'><img src='" + block.blockimgblue + "'><p class='blockyname'>" + block.blocktitle + "</p></div>" +
"<div class='blockyright'><img src='assets/more.svg'></div>" +
"<div class='blockydiv'></div>" +
"<div class='blockyinfo'>" + block.blockinfo + "</div>";

drag.querySelector(".block .grabme").style.display='none';
drag.querySelector(".block .blockin").style.display='none';

return true;
}


function drag(block) {
block.classList.add("blockdisabled");
tempblock2 = block;
Expand All @@ -63,17 +77,8 @@ document.addEventListener("DOMContentLoaded", function(){
}
}
addEventListenerMulti("click", disabledClick, false, ".side");
document.getElementById("close").addEventListener("click", function(){
if (rightcard) {
rightcard = false;
document.getElementById("properties").classList.remove("expanded");
setTimeout(function(){
document.getElementById("propwrap").classList.remove("itson");
}, 300);
tempblock.classList.remove("selectedblock");
}
});



document.getElementById("removeblock").addEventListener("click", function(){
flowy.deleteBlocks();
});
Expand All @@ -89,17 +94,102 @@ var beginTouch = function (event) {
var checkTouch = function (event) {
aclick = false;
}
var doneTouch = function (event) {
var doneTouch = function(event) {
if (event.type === "mouseup" && aclick && !noinfo) {
if (!rightcard && event.target.closest(".block") && !event.target.closest(".block").classList.contains("dragging")) {
tempblock = event.target.closest(".block");
rightcard = true;
document.getElementById("properties").classList.add("expanded");
document.getElementById("propwrap").classList.add("itson");
tempblock.classList.add("selectedblock");
}
if (event.target.closest(".block") && !event.target.closest(".block").classList.contains("dragging")) {
var blockType = event.target.closest(".block").querySelector(".blockid").value;
var propId = 'properties-' + blockType;
if (!document.getElementById(propId)) {
createPropertiesDiv(blockType);
}
showPropertiesDiv(propId);
var selectedblock = document.querySelectorAll(".selectedblock");
for (var i = 0; i < selectedblock.length; i++) {
var str = selectedblock[i].classList.remove("selectedblock");
}
event.target.closest(".block").classList.add("selectedblock"); }
}
}

function createPropertiesDiv(blockType) {
var div = document.createElement("div");
div.id = 'properties-' + blockType;
div.className = 'properties';
div.innerHTML = '<div id="close"><img src="assets/close.svg"></div><p id="header2">Properties for Block ' + blockType + '</p>';

// Get the block from the blocks.json file based on the blockType
var block = blocks.find(function(b) {
return b.blockelemtype === blockType;
});

//first block
var block = blocks.find(function(b) { return b.blockelemtype === blockType; }) || { fieldtypes: [] };
if (block.fieldtypes.length === 0) {
block.fieldtypes = [{name: "Name", type: "text"}];
}

// Check if the block and fieldtypes property exist
if (block && block.fieldtypes) {
// Generate the properties based on the field types defined in the block
block.fieldtypes.forEach(function(field) {
var inputElement;
if (field.type === 'text') {
inputElement = '<input type="text" name="' + field.name + '" placeholder="' + field.name + '">';
} else if (field.type === 'select') {
var options = field.options ? field.options.map(function(option) {
return '<option value="' + option + '">' + option + '</option>';
}).join('') : '';
inputElement = '<select name="' + field.name + '">' + options + '</select>';
}
div.innerHTML += '<div class="inputlabel">' + field.name + '</div><div class="inputfield">' + inputElement + '</div>';
});
}

div.innerHTML += '<div id=propswitch><div id=dataprop>Data</div><div id=alertprop>Alerts</div><div id=logsprop>Logs</div></div><div id=proplist><p class=inputlabel>Select database<div class=dropme>Database 1 <img src=assets/dropdown.svg></div><p class=inputlabel>Check properties<div class=dropme>All<img src=assets/dropdown.svg></div><div class=checkus><img src=assets/checkon.svg><p>Log on successful performance</div><div class=checkus><img src=assets/checkoff.svg><p>Give priority to this block</div></div><div id="divisionthing"></div><div id="removeblock">Delete blocks</div>';

document.getElementById("properties-container").appendChild(div);
}

function showPropertiesDiv(propId) {
var props = document.querySelectorAll(".properties");
props.forEach(function(prop) {
prop.style.display = 'none'; // Verberg alle properties divs
});
var activeProp = document.getElementById(propId);
activeProp.style.display = 'block'; // Toon de relevante properties div
activeProp.classList.add("expanded");
document.getElementById("propwrap").classList.add("itson");
}

function closePropertiesDiv() {
var expandedProps = document.querySelector(".properties.expanded");
if (expandedProps) {
expandedProps.classList.remove("expanded");
expandedProps.style.display = 'none'; // Verberg de div
document.getElementById("propwrap").classList.remove("itson");
}
var selectedBlock = document.querySelector(".block.selectedblock");
if (selectedBlock) {
selectedBlock.classList.remove("selectedblock");
}
}

document.addEventListener("click", function(event) {
if (event.target.closest("#close")) {
closePropertiesDiv();
}
});

var saveButton = document.getElementById("saveButton");
saveButton.addEventListener("click", function(event) {

var json = JSON.stringify(flowy.output()); // test -> localStorage
var file = new File([json], "test.json", {type: "application/octet-stream"});
var blobUrl = (URL || webkitURL).createObjectURL(file);
window.location = blobUrl;

});

addEventListener("mousedown", beginTouch, false);
addEventListener("mousemove", checkTouch, false);
addEventListener("mouseup", doneTouch, false);
Expand Down
14 changes: 7 additions & 7 deletions demo/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ body, html {
text-align: center;
margin-left: -5px;
}
#discard {
#saveButton {
font-family: Roboto;
font-weight: 500;
font-size: 14px;
Expand Down Expand Up @@ -167,7 +167,7 @@ body, html {
color: #C9C9D5;
}
#search img {
position: absolute;
position: absolute;
margin-top: 10px;
width: 18px;
margin-left: 12px;
Expand Down Expand Up @@ -370,7 +370,7 @@ body, html {
border-top: 1px solid #E8E8EF;
width: 53px;
height: 53px;
text-align: center;
text-align: center;
z-index: 10;
}
#closecard img {
Expand All @@ -395,7 +395,7 @@ body, html {
overflow: hidden;
z-index: -2;
}
#properties {
.properties {
position: absolute;
height: 100%;
width: 311px;
Expand Down Expand Up @@ -581,7 +581,7 @@ body, html {
width: 28px;
height: 28px;
border-radius: 5px;
text-align: center;
text-align: center;
background-color: #FFF;
transition: all .3s cubic-bezier(.05,.03,.35,1);
z-index: 10;
Expand Down Expand Up @@ -624,7 +624,7 @@ body, html {
box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.05);
}
.selectedblock {
border: 2px solid #217CE8;
outline: 2px solid #217CE8;
box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.08);
}

Expand All @@ -636,5 +636,5 @@ body, html {
@media only screen and (max-width: 560px) {
#names {
display: none;
}
}
}
Loading