Sliding panel for preview

Author: marshallino16

Snip.xcodeproj/project.pbxproj

@@ -51,8 +51,8 @@
 		79BC1D3524D17142008FD16E /* CodeViewer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79BC1D3424D17142008FD16E /* CodeViewer.swift */; };
 		79BC1D3724D17151008FD16E /* SearchBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79BC1D3624D17151008FD16E /* SearchBar.swift */; };
 		79C463CE24F43E17009B2DA3 /* Ink in Frameworks */ = {isa = PBXBuildFile; productRef = 79C463CD24F43E17009B2DA3 /* Ink */; };
+		79C463D024F44233009B2DA3 /* MarkdownHTMLViewer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79C463CF24F44233009B2DA3 /* MarkdownHTMLViewer.swift */; };
 		79DBD4CA24D1CBE500568364 /* CodeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79DBD4C924D1CBE500568364 /* CodeView.swift */; };
-		79DBD4CD24D1CEFD00568364 /* data.json in Resources */ = {isa = PBXBuildFile; fileRef = 79DBD4CC24D1CEFD00568364 /* data.json */; };
 		79F07A2324D2F3DC00469324 /* ModeSelectionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79F07A2224D2F3DC00469324 /* ModeSelectionView.swift */; };
 		79F07A2524D2F9C700469324 /* CodeActionsTopBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79F07A2424D2F9C700469324 /* CodeActionsTopBar.swift */; };
 		79F07A2724D3028C00469324 /* VisualEffectView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79F07A2624D3028C00469324 /* VisualEffectView.swift */; };
@@ -104,8 +104,8 @@
 		79BC1D3224D17124008FD16E /* Sidebar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Sidebar.swift; sourceTree = "<group>"; };
 		79BC1D3424D17142008FD16E /* CodeViewer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeViewer.swift; sourceTree = "<group>"; };
 		79BC1D3624D17151008FD16E /* SearchBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SearchBar.swift; sourceTree = "<group>"; };
+		79C463CF24F44233009B2DA3 /* MarkdownHTMLViewer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MarkdownHTMLViewer.swift; sourceTree = "<group>"; };
 		79DBD4C924D1CBE500568364 /* CodeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeView.swift; sourceTree = "<group>"; };
-		79DBD4CC24D1CEFD00568364 /* data.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; name = data.json; path = "../../Downloads/CodeMirror-Swift-master/example/CodeMirror-Swift-Example/CodeMirror-Swift-Example/data.json"; sourceTree = "<group>"; };
 		79F07A2224D2F3DC00469324 /* ModeSelectionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModeSelectionView.swift; sourceTree = "<group>"; };
 		79F07A2424D2F9C700469324 /* CodeActionsTopBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeActionsTopBar.swift; sourceTree = "<group>"; };
 		79F07A2624D3028C00469324 /* VisualEffectView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VisualEffectView.swift; sourceTree = "<group>"; };
@@ -245,7 +245,6 @@
 				79DBD4C824D1CBBD00568364 /* Representables */,
 				79BC1D2124D16E67008FD16E /* SnipViewApp.swift */,
 				79BC1D1F24D16E67008FD16E /* AppDelegate.swift */,
-				79DBD4CC24D1CEFD00568364 /* data.json */,
 				79BC1D2324D16E6A008FD16E /* Assets.xcassets */,
 				79BC1D2824D16E6A008FD16E /* Main.storyboard */,
 				79BC1D2B24D16E6A008FD16E /* Info.plist */,
@@ -298,6 +297,7 @@
 				79A6F64B24D20B8C0037C5FF /* CodeMirrorViewController.swift */,
 				79F07A2624D3028C00469324 /* VisualEffectView.swift */,
 				791B8D7724E2C6C200851E2A /* SharePicker.swift */,
+				79C463CF24F44233009B2DA3 /* MarkdownHTMLViewer.swift */,
 			);
 			path = Representables;
 			sourceTree = "<group>";
@@ -382,7 +382,6 @@
 				796B093124D1B8F5006904C4 /* CodeMirrorView.bundle in Resources */,
 				79BC1D2A24D16E6A008FD16E /* Main.storyboard in Resources */,
 				79BC1D2724D16E6A008FD16E /* Preview Assets.xcassets in Resources */,
-				79DBD4CD24D1CEFD00568364 /* data.json in Resources */,
 				79BC1D2424D16E6A008FD16E /* Assets.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -399,6 +398,7 @@
 				79BC1D3524D17142008FD16E /* CodeViewer.swift in Sources */,
 				796B093724D1BA1F006904C4 /* Date.swift in Sources */,
 				7936F89F24DA02DD00F09AE7 /* TextField.swift in Sources */,
+				79C463D024F44233009B2DA3 /* MarkdownHTMLViewer.swift in Sources */,
 				79956A4724E57AC700B823E1 /* Dictionary.swift in Sources */,
 				79BC1D2224D16E67008FD16E /* SnipViewApp.swift in Sources */,
 				791B8D7624E28EF800851E2A /* AppState.swift in Sources */,

Snip/Assets.xcassets/ic_preview_hide.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "eye-slash-regular-1.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "eye-slash-regular.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Snip/Assets.xcassets/ic_preview_hide.imageset/eye-slash-regular-1.png

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "eye-regular-1.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "eye-regular.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Snip/Assets.xcassets/ic_preview_hide.imageset/eye-slash-regular.png

@@ -12,9 +12,10 @@ struct CodeActionsTopBar: View {
 
   @ObservedObject var syncManager = SyncManager.shared
   @ObservedObject var viewModel: CodeActionsViewModel
-  @State var showSharingActions = false
-  @State var showInfos = false
+  @State private var showSharingActions = false
+  @State private var showInfos = false
   @State private var moveRightLeft = false
+  @State private var isPreviewEnabled = false
 
   var body: some View {
     HStack{
@@ -56,6 +57,18 @@ struct CodeActionsTopBar: View {
         }
       }
 
+      if viewModel.onPreviewToggle != nil {
+        ImageButton(imageName: isPreviewEnabled ? "ic_preview_hide" : "ic_preview_show",
+        action: {
+          self.viewModel.onPreviewToggle?()
+          
+          DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
+            self.isPreviewEnabled.toggle()
+          }
+        },
+        content: { EmptyView() })
+      }
+      
       ImageButton(imageName: viewModel.isSnipFavorite ? "ic_fav_selected" : "ic_fav",
                   action: viewModel.onToggleFavorite,
                   content: { EmptyView() })
@@ -109,6 +122,7 @@ final class CodeActionsViewModel: ObservableObject {
   var onToggleFavorite: () -> Void
   var onDelete: () -> Void
   var onUpload: () -> Void
+  var onPreviewToggle: (() -> Void)?
 
   init(name: String,
        code: String,
@@ -118,17 +132,19 @@ final class CodeActionsViewModel: ObservableObject {
        onRename: @escaping (String) -> Void,
        onToggleFavorite: @escaping () -> Void,
        onDelete: @escaping () -> Void,
-       onUpload: @escaping () -> Void) {
+       onUpload: @escaping () -> Void,
+       onPreviewToggle: (() -> Void)?) {
 
-    snipName = name
-    snipCode = code
-    isSnipFavorite = isFavorite
-    snipLastUpdate = lastUpdate
+    self.snipName = name
+    self.snipCode = code
+    self.isSnipFavorite = isFavorite
+    self.snipLastUpdate = lastUpdate
     self.syncState = syncState
     self.onRename = onRename
     self.onToggleFavorite = onToggleFavorite
     self.onDelete = onDelete
     self.onUpload = onUpload
+    self.onPreviewToggle = onPreviewToggle
   }
 
 }
@@ -143,7 +159,8 @@ struct CodeActionsTopBar_Previews: PreviewProvider {
                                                       onRename: { _ in print("action")},
                                                       onToggleFavorite: {},
                                                       onDelete: {},
-                                                      onUpload: {})
+                                                      onUpload: {},
+                                                      onPreviewToggle: {})
     )
   }
 }

Snip/Assets.xcassets/ic_preview_show.imageset/Contents.json

@@ -15,6 +15,8 @@ struct CodeViewer: View {
   @EnvironmentObject var appState: AppState
   @EnvironmentObject var snipItem: SnipItem
 
+  @State private var shouldShowPreview = false
+  
   var body: some View {
 
     VStack(alignment: .leading) {
@@ -36,7 +38,13 @@ struct CodeViewer: View {
         },
                                                           onUpload: {
                                                             self.viewModel.onTrigger(.createGist(id: self.snipItem.id))
-        }))
+        },
+                                                          onPreviewToggle: self.snipItem.mode == CodeMode.html.mode() ? {
+                                                            withAnimation(Animation.easeOut(duration: 0.6)) { () -> () in
+                                                              self.shouldShowPreview.toggle()
+                                                            }
+          } : nil
+        ))
 
         ModeSelectionView(viewModel: ModeSelectionViewModel(snippetMode: snipItem.mode,
                                                             snippetTags: snipItem.tags,
@@ -50,15 +58,27 @@ struct CodeViewer: View {
                                                                                                    tag: tag))
         }))
 
-        CodeView(code: .constant(snipItem.snippet),
-                 mode: .constant(snipItem.mode),
+        CodeView(code: .constant(self.snipItem.snippet),
+                 mode: .constant(self.snipItem.mode),
                  onContentChange: { newCode in
                   self.viewModel.onTrigger(.updateCode(id: self.snipItem.id, code: newCode))
         })
           .frame(minWidth: 100,
                  maxWidth: .infinity,
                  minHeight: 100,
                  maxHeight: .infinity)
+          .overlay(
+            HStack() {
+              Text("ok")
+            }
+            .frame(minWidth: 100,
+                   maxWidth: .infinity,
+                   minHeight: 100,
+                   maxHeight: .infinity)
+              .background(Color.YELLOW_500)
+              .offset(x: self.shouldShowPreview ? 0 : 10000, y: 0)
+              .transition(AnyTransition.move(edge: .trailing)), alignment: .topLeading)
+        
 
         Divider()
 
@@ -110,7 +130,7 @@ class CodeViewerViewModel: ObservableObject {
 struct CodeViewer_Previews: PreviewProvider {
   static var previews: some View {
     CodeViewer(viewModel: CodeViewerViewModel(onTrigger: { _ in
-                                                print("action")
+      print("action")
     },
                                               onDimiss:  { print("onDismiss")}
     ))

Snip/Assets.xcassets/ic_preview_show.imageset/eye-regular-1.png

@@ -0,0 +1,9 @@
+//
+//  MarkdownHTMLViewer.swift
+//  Snip
+//
+//  Created by Anthony Fernandez on 8/24/20.
+//  Copyright © 2020 pictarine. All rights reserved.
+//
+
+import Foundation