feat: add support to change source code position

Felipe Lang · javier-godoy · commit 102479f29987 · 2023-11-23T15:38:01.000-03:00
Close #72
diff --git a/src/main/java/com/flowingcode/vaadin/addons/demo/DemoSource.java b/src/main/java/com/flowingcode/vaadin/addons/demo/DemoSource.java
@@ -62,4 +62,7 @@
    */
   String language() default DEFAULT_VALUE;
 
+  /** Source code position in the layout */
+  SourcePosition sourcePosition() default SourcePosition.SECONDARY;
+
 }
diff --git a/src/main/java/com/flowingcode/vaadin/addons/demo/MultiSourceCodeViewer.java b/src/main/java/com/flowingcode/vaadin/addons/demo/MultiSourceCodeViewer.java
@@ -11,23 +11,23 @@ public class MultiSourceCodeViewer extends Div {
 
   private static final String DATA_URL = "source-url";
   private static final String DATA_LANGUAGE = "source-language";
+  private static final String DATA_POSITION = "source-position";
 
   private SourceCodeViewer codeViewer;
+  private Tab selectedTab;
 
   public MultiSourceCodeViewer(List<SourceCodeTab> sourceCodeTabs, Map<String, String> properties) {
-
-    Tab tab;
     if (sourceCodeTabs.size() > 1) {
       Tabs tabs = new Tabs(createTabs(sourceCodeTabs));
       tabs.addSelectedChangeListener(ev -> onTabSelected(ev.getSelectedTab()));
       add(tabs);
-      tab = tabs.getSelectedTab();
+      selectedTab = tabs.getSelectedTab();
     } else {
-      tab = createTab(sourceCodeTabs.get(0));
+      selectedTab = createTab(sourceCodeTabs.get(0));
     }
 
-    String url = (String) ComponentUtil.getData(tab, DATA_URL);
-    String language = (String) ComponentUtil.getData(tab, DATA_LANGUAGE);
+    String url = (String) ComponentUtil.getData(selectedTab, DATA_URL);
+    String language = (String) ComponentUtil.getData(selectedTab, DATA_LANGUAGE);
     codeViewer = new SourceCodeViewer(url, language, properties);
 
     add(codeViewer);
@@ -74,6 +74,7 @@ private Tab createTab(SourceCodeTab sourceCodeTab) {
     Tab tab = new Tab(caption);
     ComponentUtil.setData(tab, DATA_URL, url);
     ComponentUtil.setData(tab, DATA_LANGUAGE, language);
+    ComponentUtil.setData(tab, DATA_POSITION, sourceCodeTab.getSourcePosition());
     return tab;
   }
 
@@ -88,6 +89,8 @@ private String getExtension(String filename) {
   }
 
   private void onTabSelected(Tab tab) {
+    this.selectedTab = tab;
+
     String url = (String) ComponentUtil.getData(tab, DATA_URL);
     String language = (String) ComponentUtil.getData(tab, DATA_LANGUAGE);
     fetchContents(url, language);
@@ -97,4 +100,8 @@ private void fetchContents(String url, String language) {
     codeViewer.fetchContents(url, language);
   }
 
+  public SourcePosition getSourcePosition() {
+    return (SourcePosition) ComponentUtil.getData(selectedTab, DATA_POSITION);
+  }
+
 }
diff --git a/src/main/java/com/flowingcode/vaadin/addons/demo/SourceCodeTab.java b/src/main/java/com/flowingcode/vaadin/addons/demo/SourceCodeTab.java
@@ -17,5 +17,7 @@ public class SourceCodeTab {
   private final String url;
   private String caption;
   private String language;
+  @NonNull
+  private final SourcePosition sourcePosition;
   
 }
diff --git a/src/main/java/com/flowingcode/vaadin/addons/demo/SourcePosition.java b/src/main/java/com/flowingcode/vaadin/addons/demo/SourcePosition.java
@@ -0,0 +1,17 @@
+package com.flowingcode.vaadin.addons.demo;
+
+public enum SourcePosition {
+
+  PRIMARY, SECONDARY;
+
+  public SourcePosition toggle() {
+    switch (this) {
+      case SECONDARY:
+        return PRIMARY;
+      case PRIMARY:
+      default:
+        return SECONDARY;
+    }
+  }
+
+}
diff --git a/src/main/java/com/flowingcode/vaadin/addons/demo/SplitLayoutDemo.java b/src/main/java/com/flowingcode/vaadin/addons/demo/SplitLayoutDemo.java
@@ -28,14 +28,18 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.Objects;
+import java.util.Optional;
+import org.apache.commons.lang3.StringUtils;
 
 @SuppressWarnings("serial")
 class SplitLayoutDemo extends Composite<SplitLayout> {
 
   private MultiSourceCodeViewer code;
+  private SourcePosition sourcePosition;
 
-  public SplitLayoutDemo(Component demo, String sourceUrl) {
-    this(demo, Arrays.asList(new SourceCodeTab(sourceUrl)));
+  public SplitLayoutDemo(Component demo, String sourceUrl, SourcePosition sourcePosition) {
+    this(demo, Arrays.asList(new SourceCodeTab(sourceUrl, sourcePosition)));
   }
 
   public SplitLayoutDemo(Component demo, List<SourceCodeTab> tabs) {
@@ -46,11 +50,37 @@ public SplitLayoutDemo(Component demo, List<SourceCodeTab> tabs) {
     properties.put("flow", Version.getFullVersion());
 
     code = new MultiSourceCodeViewer(tabs, properties);
-    getContent().addToPrimary(demo);
-    getContent().addToSecondary(code);
+
+    this.sourcePosition = code.getSourcePosition();
+    switch (this.sourcePosition) {
+      case PRIMARY:
+        getContent().addToPrimary(code);
+        getContent().addToSecondary(demo);
+        break;
+      case SECONDARY:
+      default:
+        getContent().addToPrimary(demo);
+        getContent().addToSecondary(code);
+    }
+
     getContent().setSizeFull();
   }
 
+  public void switchSourcePosition(SourcePosition position) {
+    if (!this.sourcePosition.equals(position)) {
+      toggleSourcePosition();
+    }
+  }
+
+  public void toggleSourcePosition() {
+    Component primary = getContent().getPrimaryComponent();
+    Component secondary = getContent().getSecondaryComponent();
+    getContent().removeAll();
+    getContent().addToPrimary(secondary);
+    getContent().addToSecondary(primary);
+    this.sourcePosition = this.sourcePosition.toggle();
+  }
+
   public void setOrientation(Orientation o) {
     getContent().setOrientation(o);
     getContent()
@@ -71,4 +101,20 @@ public void setSplitterPosition(int pos) {
   public void setSizeFull() {
     getContent().setSizeFull();
   }
+
+  public void showSourceCode() {
+    getContent().setSplitterPosition(50);
+  }
+
+  public void hideSourceCode() {
+    switch (sourcePosition) {
+      case PRIMARY:
+        getContent().setSplitterPosition(0);
+        break;
+      case SECONDARY:
+        getContent().setSplitterPosition(100);
+        break;
+    }
+  }
+
 }
diff --git a/src/main/java/com/flowingcode/vaadin/addons/demo/TabbedDemo.java b/src/main/java/com/flowingcode/vaadin/addons/demo/TabbedDemo.java
@@ -59,6 +59,7 @@ public class TabbedDemo extends VerticalLayout implements RouterLayout {
   private SplitLayoutDemo currentLayout;
   private Checkbox orientationCB;
   private Checkbox codeCB;
+  private Checkbox codePositionCB;
   private Checkbox themeCB;
   private Orientation splitOrientation;
   private Button helperButton;
@@ -83,6 +84,10 @@ public TabbedDemo() {
     codeCB.setValue(true);
     codeCB.addClassName("smallcheckbox");
     codeCB.addValueChangeListener(ev -> updateSplitterPosition());
+    codePositionCB = new Checkbox("Toggle Code Position");
+    codePositionCB.setValue(true);
+    codePositionCB.addClassName("smallcheckbox");
+    codePositionCB.addValueChangeListener(ev -> toggleSourcePosition());
     themeCB = new Checkbox("Dark Theme");
     themeCB.setValue(false);
     themeCB.addClassName("smallcheckbox");
@@ -92,7 +97,7 @@ public TabbedDemo() {
     footer = new HorizontalLayout();
     footer.setWidthFull();
     footer.setJustifyContentMode(JustifyContentMode.END);
-    footer.add(codeCB, orientationCB, themeCB);
+    footer.add(codeCB, codePositionCB, orientationCB, themeCB);
     footer.setClassName("demo-footer");
 
     Package pkg = this.getClass().getPackage();
@@ -242,6 +247,8 @@ private Optional<SourceCodeTab> createSourceCodeTab(Class<?> annotatedClass, Dem
     if (!annotation.language().equals(DemoSource.DEFAULT_VALUE)) {
       builder.language(annotation.caption());
     }
+
+    builder.sourcePosition(annotation.sourcePosition());
     
     return Optional.of(builder.build());
   }
@@ -264,13 +271,25 @@ public void removeRouterLayoutContent(HasElement oldContent) {
 
   private void updateSplitterPosition() {
     if (currentLayout != null) {
-      currentLayout.setSplitterPosition(codeCB.getValue() ? 50 : 100);
+      if (codeCB.getValue()) {
+        currentLayout.showSourceCode();
+      } else {
+        currentLayout.hideSourceCode();
+      }
       orientationCB.setEnabled(codeCB.getValue());
+      codePositionCB.setEnabled(codeCB.getValue());
     }
   }
 
   public void setSourceVisible(boolean visible) {
     codeCB.setValue(visible);
+    codePositionCB.setVisible(visible);
+  }
+
+  public void toggleSourcePosition() {
+    if (currentLayout != null) {
+      currentLayout.toggleSourcePosition();
+    }
   }
 
   private void toggleSplitterOrientation() {
@@ -307,6 +326,7 @@ private void updateFooterButtonsVisibility() {
     ComponentUtil.fireEvent(this, new TabbedDemoSourceEvent(this, hasSourceCode));
     orientationCB.setVisible(hasSourceCode);
     codeCB.setVisible(hasSourceCode);
+    codePositionCB.setVisible(hasSourceCode);
   }
 
   public void addTabbedDemoSourceListener(ComponentEventListener<TabbedDemoSourceEvent> listener) {
@@ -321,6 +341,7 @@ protected void onAttach(AttachEvent attachEvent) {
     getUI().ifPresent(ui -> ui.getPage().retrieveExtendedClientDetails(receiver -> {
       boolean mobile = receiver.getBodyClientWidth() <= MOBILE_DEVICE_BREAKPOINT_WIDTH;
       codeCB.setValue(codeCB.getValue() && !mobile);
+      codePositionCB.setValue(codeCB.getValue() && !mobile);
 
       boolean portraitOrientation = receiver.getBodyClientHeight() > receiver.getBodyClientWidth();
       adjustSplitOrientation(portraitOrientation);

Original file line number	Diff line number	Diff line change
`@@ -62,4 +62,7 @@`
`62`	`62`	`*/`
`63`	`63`	`String language() default DEFAULT_VALUE;`
`64`	`64`
	`65`	`+ /** Source code position in the layout */`
	`66`	`+ SourcePosition sourcePosition() default SourcePosition.SECONDARY;`
	`67`	`+`
`65`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,7 @@ public class SourceCodeTab {`
`17`	`17`	`private final String url;`
`18`	`18`	`private String caption;`
`19`	`19`	`private String language;`
	`20`	`+ @NonNull`
	`21`	`+ private final SourcePosition sourcePosition;`
`20`	`22`
`21`	`23`	`}`