FEAT: v2 with many new features !

.github/workflows/publish.yml

@@ -0,0 +1,38 @@
+# git tag reminder :
+# version tag look like : v1.0.0-rc0
+# add a tag locally : git tag tagName
+# push it : git push origin tagName
+# remove a tag locally : git tag -d tagName
+# remove it on remote : git push --delete origin tagName
+
+name: Deploy
+on:
+  push:
+    tags:
+      - v*
+
+jobs:
+  deploy_job:
+    name: Deploy Job
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v1
+      - name: build
+        run: |
+          mkdir .public
+          mv * .public/
+          mv .public public
+          rm public/LICENSE.txt public/README.md
+      - name: SSH setup
+        env:
+          DEPLOY_KEY: ${{ secrets.deploy_key }}
+          #KNOWN_HOSTS: ${{ secrets.known_hosts }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "${DEPLOY_KEY}" > ~/.ssh/my_rsync_key
+          echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
+          echo "IdentityFile ~/.ssh/my_rsync_key" >> ~/.ssh/config
+          chmod -R 700 ~/.ssh
+      - name: Rsync deployment
+        run: |
+          rsync -az -e ssh --delete public/ gammanu@1000i100.fr:~/lo0p.it

.gitignore

@@ -0,0 +1,3 @@
+.idea
+.generated*
+generated*

.gitlab-ci.yml

@@ -0,0 +1,43 @@
+stages:
+  - build
+  - preview
+  - prod
+
+build:
+  stage: build
+  image: node:current-alpine
+  script:
+    - mkdir .public
+    - mv * .public/
+    - mv .public public
+    - rm public/LICENSE.txt public/README.md
+  artifacts:
+    paths:
+      - public
+    expire_in: 1 week
+
+pages:
+  stage: preview
+  script:
+    - ls public
+  artifacts:
+    name: loopy
+    paths:
+      - public
+
+OK_publish:
+  #when: manual
+  stage: prod
+  image: liaohuqiu/rsync
+  before_script:
+    - eval $(ssh-agent -s)
+    - ssh-add <(echo "$SSH_PRIVATE_KEY")
+    - mkdir -p ~/.ssh
+    - >-
+      [[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" >
+      ~/.ssh/config
+  script:
+    - rsync -az -e ssh ./public/ gammanu@1000i100.fr:~/lo0p.it
+  only:
+    - tags
+

v1.1/css/balloon.css → 2/css/balloon.css

@@ -1,3 +1,4 @@
+/* from https://kazzkiq.github.io/balloon.css/ */
 button[data-balloon] {
   overflow: visible;
 }

v1/css/loopy.css → 2/css/loopy.css

@@ -15,8 +15,7 @@ canvas{
 
 #canvasses{
 	position:absolute;
-	top:0; left:0;
-	width: calc(100% - 300px);
+	top:0; left:0; right: 300px;
 	height: 100%;
 }
 #canvasses[fullscreen=yes]{
@@ -137,8 +136,25 @@ div[big=yes] .play_button_label{
  SIDEBAR 
 **********/
 
+#sidebarSwitch{
+	position: absolute;
+	top:0; right: 300px;
+	padding: 10px;
+	padding-top: 8px;
+	padding-bottom: 12px;
+	line-height: 30px;
+	width: 30px;
+	text-align: center;
+	vertical-align: middle;
+	background-color: #eaeaea;
+	cursor: pointer;
+}
+#sidebarSwitch:hover{
+	background-color: #ccc;
+}
 #sidebar{
 	position: absolute;
+	overflow: auto;
 	top:0; right:0;
 	width: 300px;
 	height: 100%;
@@ -152,8 +168,11 @@ div[big=yes] .play_button_label{
 	-ms-user-select: none;
 	user-select: none;
 }
+.globalLoopyFirstItem{margin-top: -20px;}
 #sidebar > div{
 	margin: 25px;
+	margin-right: 15px;
+	padding-top: 20px;
 }
 #sidebar > div > div{
 	margin-bottom: 20px;
@@ -181,16 +200,25 @@ div[big=yes] .play_button_label{
 #sidebar[mode=play] .mini_button:hover{
 	background: #666;
 }
+#sidebar[mode=play] .not_in_play_mode{
+	display: none;
+}
 #sidebar a{ color: #777; }
 #sidebar a:hover{ color: #999; }
 #sidebar hr{
 	border: none;
 	border-bottom: 2px solid rgba(150,150,150,0.5);
-	width: 300px;
-	position: relative;
-	left:-25px;
-	margin: 10px 0;
+	margin: 30px -25px;
+	margin-right: -15px;
+}
+#sidebar .combineWithNext{
+	margin: 0;
 }
+#sidebar .combineWithNext+div .component_label,
+#sidebar .combineWithNext+div .docLink{
+display: none
+}
+
 .component_input{
 	border: none;
 
@@ -222,18 +250,50 @@ div[big=yes] .play_button_label{
 	width: 250px;
 	height: 52px;
 }
-.component_slider_graphic{
+.component_slider_graphic,
+.component_slider_clickCatcher,
+.component_slider_graphic_activeAtLeft,
+.component_slider_graphic_activeAtRight,
+.component_slider_graphic_activeOption
+{
 	position: absolute;
+	background-size: cover;
+	background-repeat: no-repeat;
 	width: 250px;
 	height: 40px;
 	cursor: pointer;
 }
+.component_slider_graphic_activeAtLeft{ left: 0; background-position: left center;}
+.component_slider_graphic_activeAtRight{ right: 0; background-position: right center;}
 .component_slider_pointer{
 	position: absolute;
 	top: 42px;
 	width: 15px;
 	height: 10px;
-}
+	background-image: url("sliders/slider_pointer_up.png");
+	background-size: cover;
+}
+.combineWithNext .component_slider_graphic,
+.combineWithNext .component_slider_graphic_activeOption,
+.combineWithNext .component_slider_graphic_activeAtLeft,
+.combineWithNext .component_slider_graphic_activeAtRight {top: 12px;}
+.combineWithNext .component_slider_pointer{top: 0px; background-image: url("sliders/slider_pointer_down.png");}
+.component_slider_clickCatcher{height: 52px}
+
+#sidebar > .compact{padding-top: 5px;}
+#sidebar .compact hr{margin: 5px -25px;}
+#sidebar > .compact > div{margin-bottom: 0;}
+.compact .component_slider{height: 40px;}
+.compact .component_slider_pointer{top: 30px;background-image: url("sliders/slider_high_contrast_pointer_up.png");}
+.compact .combineWithNext .component_slider_graphic,
+.compact .combineWithNext .component_slider_graphic_activeOption,
+.compact .combineWithNext .component_slider_graphic_activeAtLeft,
+.compact .combineWithNext .component_slider_graphic_activeAtRight {top: 0;}
+.compact .combineWithNext .component_slider_pointer{top: 0; background-image: url("sliders/slider_high_contrast_pointer_down.png");}
+.compact .component_slider_clickCatcher{height: 40px}
+.compact .component_label{margin-bottom: 0;}
+.compact .component_button{font-size: 20px;padding: 2px 10px;}
+
 .component_label{
 	margin-bottom: 5px;
 }
@@ -255,28 +315,73 @@ div[big=yes] .play_button_label{
 }
 .component_button[header=yes]{
 	position: absolute;
-	top:0; left:0;
-	width: 280px;
+	top:0; left:0; right: 0;
 	background: #222;
-    border-radius: 0px;
+    border-radius: 0;
     color: #888;
 }
 .component_button[header=yes]:hover{
 	background: #333;
 }
-
-
+.advanced .simpleOnly,
+.simpleOnly.inactive
+{
+	display: none;
+}
+.adv, .colorLogic,
+.advanced .adv.colorLogic
+{
+	display: none;
+}
+.advanced .adv,
+.advanced.colorLogicMode .adv.colorLogic
+{
+	display: block;
+}
+.adv_disclaimer, .colorLogic_disclaimer {
+	display: none;
+	color: #b84;
+	font-size: 80%;
+}
+.simple .adv.active,
+.colorAestheticMode .adv.colorLogic.active
+{
+	display: block;
+	border: 1px dashed #b84;
+	background-image: linear-gradient(to bottom,#fed 0,#fed 20px,#ddd 20px);
+	margin: -9px;
+	padding: 8px;
+	padding-top: 2px;
+}
+.colorAestheticMode .adv.colorLogic.active {
+	border: 1px dashed #b44;
+	background: #fdd; /*linear-gradient(to bottom,#fdd 0,#fdd 20px,#ddd 20px);*/
+}
+.colorLogic_disclaimer {color: #b44;}
+.simple .adv.active>.adv_disclaimer,
+.colorAestheticMode .adv.colorLogic.active>.colorLogic_disclaimer
+{display: block;}
 
 /**********
 
 MODAL
 
 **********/
+.docLink{
+	float:right;
+	font-size: 70%;
+	text-decoration: none;
+	cursor: pointer;
+	padding: 10px 5px;
+	margin: -10px 0;
+}
+.docLink:hover{transform: scale(2);}
 
 #modal_container{
 	display: none;
 	position: absolute;
 	width: 100%; height: 100%;
+	z-index: 1;
 
 	-webkit-user-select: none;
 	-moz-user-select: none;