/// <summary>
/// This is the method that builds all of the compnents in the text effects package
/// </summary>
public override IPackage Build(IFluentBuilder builder)
{
builder.BuildUpComponent(new VerticalTextComponent(Dependencies.ComponentDependenciesFactory))
.Name("verticalText")
.BindTo <VerticalText>()
.Build();
return(this);
}
IPackage IPackage.Build(IFluentBuilder fluentBuilder)
{
var resource = _resourceManager.GetResource(Assembly.GetExecutingAssembly(), "restModule.js");
if (resource.Content == null)
{
return(this);
}
var javaScript = Encoding.UTF8.GetString(resource.Content);
fluentBuilder.BuildUpComponent(null)
.Name("ajax")
.AssetDeployment(AssetDeployment.PerWebsite)
.DeployScript(javaScript)
.Build();
return(this);
}
IPackage IPackage.Build(IFluentBuilder fluentBuilder)
{
fluentBuilder.BuildUpService(null, typeof(TemplateService))
.Name("templates")
.Route(_servicePath, new[] { Method.Get }, 0)
.Build();
var templateLibraryJs = _resourceManager.GetResource(Assembly.GetExecutingAssembly(), "templateLibrary.js");
if (templateLibraryJs.Content == null)
{
return(this);
}
var javaScript = Encoding.UTF8.GetString(templateLibraryJs.Content);
fluentBuilder.BuildUpComponent(_templateLibraryComponent)
.Name("library")
.AssetDeployment(AssetDeployment.PerWebsite)
.DeployScript(javaScript)
.Build();
return(this);
}
public override IPackage Build(IFluentBuilder builder)
{
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory, new[] {
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
}))
.Name("jQuery1")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory, new[] {
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"
}))
.Name("jQuery2")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory, new[] {
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
}))
.Name("jQuery3")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory, new[] {
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
}))
.Name("jQuery")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory, new[] {
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"
}))
.Name("AngularJS")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory,
_frameworkConfiguration.DebugLibraries
? new[]
{
"https://unpkg.com/react@16/umd/react.development.js",
"https://unpkg.com/react-dom@16/umd/react-dom.development.js"
}
: new[]
{
"https://unpkg.com/react@16/umd/react.production.min.js",
"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
}))
.Name("React")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory, new[] {
"https://unpkg.com/[email protected]/dist/redux.js"
}))
.Name("Redux")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory, new[] {
_frameworkConfiguration.DebugLibraries
? "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
: "https://cdn.jsdelivr.net/npm/vue"
}))
.Name("Vue")
.Build();
builder.BuildUpComponent(
new LibraryComponent(
Dependencies.ComponentDependenciesFactory,
new[] { "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js" },
new[]
{
"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css",
"https://fonts.googleapis.com/icon?family=Material+Icons"
}))
.Name("Material")
.Build();
return(this);
}
IPackage IPackage.Build(IFluentBuilder fluentBuilder)
{
// All CMS manager assets will be contained in a single module
var module = fluentBuilder.BuildUpModule()
.Name("cms_manager")
.AssetDeployment(AssetDeployment.PerModule)
.Build();
// Build the API services
fluentBuilder.BuildUpService(null, typeof(LiveUpdateService))
.Name("liveUpdate")
.Route(_configuration.ServiceBasePath + "live-update/", new [] { Method.Get, Method.Post, Method.Delete }, 0)
.RequiredPermission(Permissions.View, false)
.CreateComponent("liveUpdateClient")
.DeployIn(module)
.Build();
fluentBuilder.BuildUpService(null, typeof(CrudService))
.Name("crud")
.Route(_configuration.ServiceBasePath + "crud/", new [] { Method.Get, Method.Post, Method.Put, Method.Delete }, 0)
.CreateComponent("crudClient")
.DeployIn(module)
.Build();
fluentBuilder.BuildUpService(null, typeof(ListService))
.Name("list")
.Route(_configuration.ServiceBasePath + "list/", new [] { Method.Get, Method.Post }, 0)
.CreateComponent("listClient")
.DeployIn(module)
.Build();
fluentBuilder.BuildUpService(null, typeof(VersionsService))
.Name("versions")
.Route(_configuration.ServiceBasePath + "versions/", new [] { Method.Get, Method.Post, Method.Put, Method.Delete }, 0)
.CreateComponent("versionsClient")
.DeployIn(module)
.Build();
fluentBuilder.BuildUpService(null, typeof(HistoryService))
.Name("history")
.Route(_configuration.ServiceBasePath + "history/", new [] { Method.Get }, 0)
.CreateComponent("historyClient")
.DeployIn(module)
.Build();
fluentBuilder.BuildUpService(null, typeof(SegmentTestingService))
.Name("segmentTesting")
.Route(_configuration.ServiceBasePath + "segment-testing/", new [] { Method.Get, Method.Post, Method.Put, Method.Delete }, 0)
.CreateComponent("segmentTestingClient")
.DeployIn(module)
.Build();
// Load templates and accumulate all of the CSS and JS assets
var scriptModules = new List <string>();
LoadScriptModule("updateNotifierModule", scriptModules);
LoadScriptModule("dataModule", scriptModules);
LoadScriptModule("validationModule", scriptModules);
LoadScriptModule("viewsModule", scriptModules);
LoadScriptModule("filtersModule", scriptModules);
LoadScriptModule("genericComponentsModule", scriptModules);
LoadScriptModule("displayOnlyComponentsModule", scriptModules);
LoadScriptModule("fieldEditorComponentsModule", scriptModules);
LoadScriptModule("elementEditorComponentsModule", scriptModules);
// Load templates that are directly loaded into regions
var less = new StringBuilder();
var cmsManagerTemplatePath = AddTemplate("CmsManager", less, scriptModules);
var debugToolsTemplatePath = AddTemplate("DebugTools", less, scriptModules);
// Load Vue temlates that are dynamically constructed in JavaScript
AddTemplate("EnvironmentSelector", less, scriptModules);
AddTemplate("WebsiteVersionSelector", less, scriptModules);
AddTemplate("UserSegmentSelector", less, scriptModules);
AddTemplate("SegmentationScenarioSelector", less, scriptModules);
AddTemplate("SegmentationTestSelector", less, scriptModules);
AddTemplate("PageSelector", less, scriptModules);
AddTemplate("LayoutSelector", less, scriptModules);
AddTemplate("RegionSelector", less, scriptModules);
AddTemplate("ComponentSelector", less, scriptModules);
AddTemplate("UserSegmentDisplay", less, scriptModules);
AddTemplate("ContextDisplay", less, scriptModules);
AddTemplate("EnvironmentEditor", less, scriptModules);
AddTemplate("WebsiteVersionEditor", less, scriptModules);
AddTemplate("SegmentationScenarioEditor", less, scriptModules);
AddTemplate("PageEditor", less, scriptModules);
AddTemplate("LayoutEditor", less, scriptModules);
AddTemplate("RegionEditor", less, scriptModules);
AddTemplate("ComponentEditor", less, scriptModules);
AddTemplate("UpdateNotifierLog", less, scriptModules);
// Output JavaScript and CSS assets in a module
var assetsComponentBuilder = fluentBuilder.BuildUpComponent(null)
.Name("assets")
.DeployIn(module)
.RenderInitialization("cms-manager-init", "<script>ns." + NamespaceName + ".init();</script>")
.DeployLess(less.ToString());
foreach (var scriptModule in scriptModules)
{
assetsComponentBuilder.DeployScript(scriptModule);
}
var assetsComponent = assetsComponentBuilder.Build();
// This region of the CMS manager is for editing pages of the website
var editorRegion = Build(module, assetsComponent, fluentBuilder.BuildUpRegion()
.Name("editor")
.NeedsComponent("crudClient")
.NeedsComponent("listClient")
.NeedsComponent("versionsClient")
.NeedsComponent("historyClient")
.NeedsComponent("segmentTestingClient")
.AddTemplate(cmsManagerTemplatePath));
// This region of the CMS manager is for debug tools
var toolsRegion = Build(module, assetsComponent, fluentBuilder.BuildUpRegion()
.Name("tools")
.AddTemplate(debugToolsTemplatePath));
// To have the CMS manager fill the whole page make this the page layout
var managerLayout = fluentBuilder.BuildUpLayout()
.Name("manager")
.ZoneNesting("editor,tools")
.Region("editor", editorRegion)
.Region("tools", toolsRegion)
.Build();
// To have the CMS manager occupy a region of the page put this region
// into a zone of the page layout
var managerRegion = fluentBuilder.BuildUpRegion()
.Name("manager")
.Layout(managerLayout)
.Build();
// If the ManagerPath is configured then add a page to the website that
// contains the CMS manager
if (!string.IsNullOrEmpty(_configuration.ManagerPath))
{
fluentBuilder.BuildUpPage()
.Name("cmsManager")
.Route(_configuration.ManagerPath, 0, Method.Get)
.Layout(managerLayout)
.Build();
}
return(this);
}
/// <summary>
/// This is the method that builds all of the compnents, layouts and regions
/// that make up the menu package
/// </summary>
public override IPackage Build(IFluentBuilder builder)
{
/******************************************************************
*
* These things are shared between the desktop and mobile menus
*
******************************************************************/
// This component outputs CSS that makes the menu work as a menu
builder.BuildUpComponent(new MenuStyles())
.Name("menuStyles")
.Build();
// This component outputs CSS that defines the menu appearence
builder.BuildUpComponent(new MenuStyle1())
.Name("menuStyle1")
.NeedsComponent("menuStyles")
.Build();
// This component displays a main menu item
var mainMenuItemComponent = builder.BuildUpComponent(
new MenuItemComponent(Dependencies.ComponentDependenciesFactory))
.BindTo <MenuItem>()
.Build();
// This component displays a submenu item
var subMenuItemComponent = builder.BuildUpComponent(
new MenuItemComponent(Dependencies.ComponentDependenciesFactory))
.BindTo <MenuItem>("submenu")
.Build();
// This data provider extracts sub-menu items from the current menu item
// using fluent syntax.
var subMenuDataProvider = builder.BuildUpDataProvider()
.BindTo <MenuItem>()
.Provides <IList <MenuItem> >((rc, dc, d) =>
{
var menuItem = dc.Get <MenuItem>();
dc.Set <IList <MenuItem> >(menuItem.SubMenu, "submenu");
},
"submenu")
.Build();
/******************************************************************
*
* These things are for the desktop menu only
*
******************************************************************/
// This region is a container for the options on the desktop menu
var desktopMenuItemRegion = builder.BuildUpRegion()
.BindTo <MenuItem>()
.Tag("div")
.Component(mainMenuItemComponent)
.Build();
// This region is a container for the desktop drop down menu items. It
// renders one menu item component for each menu item in the sub-menu
var desktopDropDownMenuRegion = builder.BuildUpRegion()
.Tag("div")
.ClassNames("{ns}_dt_dropdown")
.ForEach <MenuItem>("submenu", null, null, "submenu")
.Component(subMenuItemComponent)
.Build();
// This layout defines the desktop menu option and the sub-menu that
// drops down when the main menu option is tapped or hovered
var desktopOptionLayout = builder.BuildUpLayout()
.Tag("li")
.ClassNames("{ns}_dt_option")
.ZoneNesting("head,submenu")
.Region("head", desktopMenuItemRegion)
.Region("submenu", desktopDropDownMenuRegion)
.DataProvider(subMenuDataProvider)
.Build();
// This region is the whole desktop menu structure with top level menu
// options and sub-menus beneath each option. This is the region you
// need to add to a layout in your page to display a desktop menu.
builder.BuildUpRegion()
.Name("desktop_menu")
.Tag("ul")
.NeedsComponent("menuStyles")
.ClassNames("{ns}_dt_menu")
.ForEach <MenuItem>("", "", "", "desktop")
.Layout(desktopOptionLayout)
.Build();
/******************************************************************
*
* These things are for the mobile menu only
*
******************************************************************/
// This component displays the hamburger button
var mobileHamburgerButtonComponent = builder.BuildUpComponent(
new HamburgerButtonComponent(Dependencies.ComponentDependenciesFactory))
.Build();
// This component displays a main menu item
var mobileHeaderComponent = builder.BuildUpComponent(
new MobileHeaderComponent(Dependencies.ComponentDependenciesFactory))
.BindTo <MenuItem>()
.Build();
// This region contains a top-level option on the mobile menu
var mobileMenuHead = builder.BuildUpRegion()
.Tag("")
.Component(mobileHeaderComponent)
.Build();
// This region repeats for each sub-menu option on a mobile menu
var mobileSubMenu = builder.BuildUpRegion()
.Tag("")
.Component(subMenuItemComponent)
.ForEach <MenuItem>("submenu", "li", null, "submenu", "{ns}_mb_option")
.Build();
// This layout defines mobile menus as having a head followed by a list
// of the sub-menu options
var mobileMenuOptionLayout = builder.BuildUpLayout()
.Tag("")
.ZoneNesting("head,subMenu")
.Region("head", mobileMenuHead)
.Region("subMenu", mobileSubMenu)
.DataProvider(subMenuDataProvider)
.Build();
// This region contains the hamburger button
var mobileHamburgerRegion = builder.BuildUpRegion()
.Tag("")
.Component(mobileHamburgerButtonComponent)
.Build();
// This region contains the panel that slides out from the edge of the page
var mobileSlideoutRegion = builder.BuildUpRegion()
.Tag("ul")
.ClassNames("{ns}_mb_slideout")
.ForEach <MenuItem>("", "", "", "mobile")
.Layout(mobileMenuOptionLayout)
.Build();
// This layout is the top-level container for the mobile menu. It defines
// the mobile menu consisting of a hamburger button and a slide-out panel
var mobileMenuLayout = builder.BuildUpLayout()
.ZoneNesting("hamburger,slideout")
.Region("hamburger", mobileHamburgerRegion)
.Region("slideout", mobileSlideoutRegion)
.Build();
// This region is the whole mobile menu structure with a hamburger
// button that opens and closes a slide-out sidebar menu. This is
// the region you would add to your website to include a mobile menu
builder.BuildUpRegion()
.Name("mobile_menu")
.NeedsComponent("menuStyles")
.ClassNames("{ns}_mb_menu")
.Layout(mobileMenuLayout)
.Build();
return(this);
}