Browse Source

Merge pull request #164 from qor5/pb-preview-layout

fix preview page html layout
Felix Sun 1 year ago
parent
commit
b19a7ebd3c
6 changed files with 57 additions and 36 deletions
  1. 1 1
      go.mod
  2. 2 0
      go.sum
  3. 0 1
      pagebuilder/builder.go
  4. 0 1
      pagebuilder/content.go
  5. 25 2
      pagebuilder/editor.go
  6. 29 31
      pagebuilder/example/layouts/page_layout.go

+ 1 - 1
go.mod

@@ -25,7 +25,7 @@ require (
 	github.com/pquerna/otp v1.4.0
 	github.com/qor/oss v0.0.0-20230717083721-c04686f83630
 	github.com/qor5/ui v1.0.1-0.20230822092653-afb0ab3fb124
-	github.com/qor5/web v1.2.5-0.20230807024808-102831643c1f
+	github.com/qor5/web v1.2.5-0.20230905084205-145cb859a65f
 	github.com/qor5/x v1.2.1-0.20230703035938-40997f230eb2
 	github.com/sunfmin/reflectutils v1.0.3
 	github.com/theplant/bimg v1.1.1

+ 2 - 0
go.sum

@@ -292,6 +292,8 @@ github.com/qor5/ui v1.0.1-0.20230822092653-afb0ab3fb124 h1:zFsaGk50v8uI8FQxIIdnT
 github.com/qor5/ui v1.0.1-0.20230822092653-afb0ab3fb124/go.mod h1:bgBqjIytHRdfTsiZea8df/ltAcyQyuHiLbecgo8Iwgw=
 github.com/qor5/web v1.2.5-0.20230807024808-102831643c1f h1:L+ldp7TAk/0Rhc0njYxZ8+NQ/NUVUEesAvx99TR4b1Y=
 github.com/qor5/web v1.2.5-0.20230807024808-102831643c1f/go.mod h1:4VXydGmy5Uwz8rEeKjcmCetciJo8TpU0mnN7Ca5kMR0=
+github.com/qor5/web v1.2.5-0.20230905084205-145cb859a65f h1:xQwS/HKx9unrQ964UGkKiiXZPOpnLaQbRQ9DpaPJVKc=
+github.com/qor5/web v1.2.5-0.20230905084205-145cb859a65f/go.mod h1:4VXydGmy5Uwz8rEeKjcmCetciJo8TpU0mnN7Ca5kMR0=
 github.com/qor5/x v1.2.1-0.20230703035938-40997f230eb2 h1:p37xD7d1L/4oxFuwvhgF28tuyT8A+TjiHDhHd+oxXcc=
 github.com/qor5/x v1.2.1-0.20230703035938-40997f230eb2/go.mod h1:Zfy7B3X5DnQSud0HTV4h/ih5TTQgaT2NWwuSIRGLdcM=
 github.com/robfig/cron/v3 v3.0.1/go.mod h1:eQICP3HwyT7UooqI/z+Ov+PtYAWygg1TEWWzGIFLtro=

+ 0 - 1
pagebuilder/builder.go

@@ -60,7 +60,6 @@ type PageLayoutInput struct {
 	IsEditor          bool
 	EditorCss         []h.HTMLComponent
 	IsPreview         bool
-	Locale            string
 }
 
 type Builder struct {

+ 0 - 1
pagebuilder/content.go

@@ -39,7 +39,6 @@ func (b *Builder) PageContent(ctx *web.EventContext) (r web.PageResponse, err er
 			// deviceQueries.Add("locale", locale)
 		}
 	}
-
 	body, p, err = b.renderPageOrTemplate(ctx, isTpl, id, version, locale, true)
 	if err != nil {
 		return

+ 25 - 2
pagebuilder/editor.go

@@ -56,7 +56,6 @@ func (b *Builder) Preview(ctx *web.EventContext) (r web.PageResponse, err error)
 	id := ctx.R.FormValue("id")
 	version := ctx.R.FormValue("version")
 	locale := ctx.R.FormValue("locale")
-	ctx.Injector.HeadHTMLComponent("style", b.pageStyle, true)
 
 	var p *Page
 	r.Body, p, err = b.renderPageOrTemplate(ctx, isTpl, id, version, locale, false)
@@ -269,8 +268,29 @@ func (b *Builder) renderPageOrTemplate(ctx *web.EventContext, isTpl bool, pageOr
 				input.FreeStyleBottomJs = append(input.FreeStyleBottomJs, pl.FreeStyleBottomJs...)
 			}
 		}
-		r = b.pageLayoutFunc(h.Components(comps...), input, ctx)
+
 		if isEditor {
+			// use newCtx to avoid inserting page head to head outside of iframe
+			newCtx := &web.EventContext{
+				R:        ctx.R,
+				Injector: &web.PageInjector{},
+			}
+			r = b.pageLayoutFunc(h.Components(comps...), input, newCtx)
+			newCtx.Injector.HeadHTMLComponent("style", b.pageStyle, true)
+			r = h.HTMLComponents{
+				h.RawHTML("<!DOCTYPE html>\n"),
+				h.Tag("html").Children(
+					h.Head(
+						newCtx.Injector.GetHeadHTMLComponent(),
+					),
+					h.Body(
+						h.Div(
+							r,
+						).Id("app").Attr("v-cloak", true),
+						newCtx.Injector.GetTailHTMLComponent(),
+					).Class("front"),
+				).AttrIf("lang", newCtx.Injector.GetHTMLLang(), newCtx.Injector.GetHTMLLang() != ""),
+			}
 			_, width := b.getDevice(ctx)
 			iframeHeightName := "_iframeHeight"
 			iframeHeightCookie, _ := ctx.R.Cookie(iframeHeightName)
@@ -296,6 +316,9 @@ func (b *Builder) renderPageOrTemplate(ctx *web.EventContext, isTpl bool, pageOr
 				)),
 			).Class("page-builder-container mx-auto").Attr("style", width)
 
+		} else {
+			r = b.pageLayoutFunc(h.Components(comps...), input, ctx)
+			ctx.Injector.HeadHTMLComponent("style", b.pageStyle, true)
 		}
 	}
 	return

+ 29 - 31
pagebuilder/example/layouts/page_layout.go

@@ -4,8 +4,8 @@ import (
 	"fmt"
 	"strings"
 
-	"github.com/qor5/web"
 	"github.com/qor5/admin/pagebuilder"
+	"github.com/qor5/web"
 	. "github.com/theplant/htmlgo"
 )
 
@@ -34,38 +34,36 @@ func DefaultPageLayoutFunc(body HTMLComponent, input *pagebuilder.PageLayoutInpu
 	css := "https://the-plant.com/assets/app/container.4f902c4.css"
 	domain := "https://example.qor5.theplant-dev.com"
 
-	return Components(
-		RawHTML("<!DOCTYPE html>\n"),
-		Tag("html").Attr("lang", input.Locale).Children(
-			Head(
-				Meta().Attr("charset", "utf-8"),
-				seoTags,
-				canonicalLink,
-				Meta().Attr("http-equiv", "X-UA-Compatible").Content("IE=edge"),
-				Meta().Content("true").Name("HandheldFriendly"),
-				Meta().Content("yes").Name("apple-mobile-web-app-capable"),
-				Meta().Content("black").Name("apple-mobile-web-app-status-bar-style"),
-				Meta().Name("format-detection").Content("telephone=no"),
-				Meta().Name("viewport").Content("width=device-width, initial-scale=1"),
-
-				Link("").Rel("stylesheet").Type("text/css").Href(css),
-				If(len(input.EditorCss) > 0, input.EditorCss...),
-				freeStyleCss,
-				//RawHTML(dataLayer),
-				structureData,
-				scriptWithCodes(input.FreeStyleTopJs),
-			),
+	head := Components(
+		Meta().Attr("charset", "utf-8"),
+		seoTags,
+		canonicalLink,
+		Meta().Attr("http-equiv", "X-UA-Compatible").Content("IE=edge"),
+		Meta().Content("true").Name("HandheldFriendly"),
+		Meta().Content("yes").Name("apple-mobile-web-app-capable"),
+		Meta().Content("black").Name("apple-mobile-web-app-status-bar-style"),
+		Meta().Name("format-detection").Content("telephone=no"),
+		Meta().Name("viewport").Content("width=device-width, initial-scale=1"),
 
-			Body(
-				//It's required as the body first element!
-				If(input.Header != nil, input.Header),
-				body,
-				If(input.Footer != nil, input.Footer),
-				Script("").Src(js),
-				scriptWithCodes(input.FreeStyleBottomJs),
-			).Attr("data-site-domain", domain),
-		),
+		Link("").Rel("stylesheet").Type("text/css").Href(css),
+		If(len(input.EditorCss) > 0, input.EditorCss...),
+		freeStyleCss,
+		//RawHTML(dataLayer),
+		structureData,
+		scriptWithCodes(input.FreeStyleTopJs),
 	)
+	ctx.Injector.HTMLLang(input.Page.LocaleCode)
+	ctx.Injector.HeadHTML(MustString(head, nil))
+
+	return Body(
+		//It's required as the body first element!
+		If(input.Header != nil, input.Header),
+		body,
+		If(input.Footer != nil, input.Footer),
+		Script("").Src(js),
+		scriptWithCodes(input.FreeStyleBottomJs),
+	).Attr("data-site-domain", domain)
+
 }
 
 func scriptWithCodes(jscodes []string) HTMLComponent {