Skip to content

Instantly share code, notes, and snippets.

@amb26

amb26/fully renderised.txt

Created May 20, 2021 19:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save amb26/48af2106ebffab5da4e085ac0f616058 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save amb26/48af2106ebffab5da4e085ac0f616058 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fully renderised.txt
Top-level driver:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" type="text/css" href="../../node_modules/infusion/src/framework/core/css/fluid.css" />
<link rel="stylesheet" type="text/css" href="../../textfieldControl/css/TextfieldSlider.css" />
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<script type="text/javascript" src="../../node_modules/infusion/src/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidPromises.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/DataSource.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ResourceLoader.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ResourceLoader-browser.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ModelTransformation.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ModelTransformationTransforms.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidView-browser.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/NewViewSupport.js"></script>
<script type="text/javascript" src="../../textfieldControl/js/Textfield.js"></script>
<script type="text/javascript" src="../../textfieldControl/js/TextfieldSlider.js"></script>
<script type="text/javascript" src="../../textfieldControl/js/TextfieldStepper.js"></script>
<script type="text/javascript" src="../../src/js/core/fluidNewRenderer.js"></script>
<script type="text/javascript" src="../../src/js/core/htmlParser.js"></script>
<script type="text/javascript" src="../../src/js/core/ResourceRewriter.js"></script>
<script type="text/javascript" src="../../src/js/client/ClientRenderer.js"></script>
<!-- Includes for our own application - will eventually be auto-generated -->
<script type="text/javascript" src="js/DemoPage.js"></script>
<title>Textfield Controls Demo</title>
</head>
<!-- The structure of this demo was taken from %fluid-infusion/demos/textfieldControl -->
<body>
<section class="fl-demo-container">
</section>
<script>
fluid.resourceLoader.staticMountTable = [
{moduleName: "fluid-textfield-controls", prefix: "../../textfieldControl", suffix: ""},
{moduleName: "fluid-textfield-controls-demo", prefix: "./", suffix: ""},
];
fluid.demos.demoPage(".fl-demo-container");
</script>
</body>
</html>
The page's own template:
<section class="fl-demo-container">
<div>
<h2>Textfield Slider</h2>
<div class="flc-textfieldSlider">
</div>
<h2>Textfield Stepper</h2>
<div class="flc-textfieldStepper">
</div>
</div>
</section>
The page's own component tree:
fluid.defaults("fluid.demos.demoPage", {
// NOTE: Identical with the ancient "DemoPage.js" only with fluid.rootPage swapped for fluid.newRendererComponent
gradeNames: "fluid.newRendererComponent",
resources: {
template: {
path: "%fluid-textfield-controls-demo/html/DemoPage.html"
}
},
selectors: {
textfieldSlider: ".flc-textfieldSlider",
textfieldStepper: ".flc-textfieldStepper"
},
components: {
textfieldSlider: {
type: "fluid.textfieldSlider",
container: "{demoPage}.dom.textfieldSlider",
options: {
attrs: {
"aria-label": "{that}.options.strings.label"
},
strings: {
"label": "Textfield Slider"
},
model: {
value: 7,
step: 1,
range: {
min: 0,
max: 10
}
},
scale: 0
}
},
textfieldStepper: {
type: "fluid.textfieldStepper",
container: "{demoPage}.dom.textfieldStepper",
options: {
attrs: {
"aria-label": "{that}.options.strings.label"
},
strings: {
"label": "Textfield Stepper"
},
model: {
value: 2,
step: 0.1,
range: {
min: 1,
max: 2
}
},
scale: 1
}
}
}
});
Final rendered markup:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" type="text/css" href="../../node_modules/infusion/src/framework/core/css/fluid.css">
<link rel="stylesheet" type="text/css" href="../../textfieldControl/css/TextfieldSlider.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../../node_modules/infusion/src/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidPromises.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/DataSource.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ResourceLoader.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ResourceLoader-browser.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ModelTransformation.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/ModelTransformationTransforms.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/FluidView-browser.js"></script>
<script type="text/javascript" src="../../node_modules/infusion/src/framework/core/js/NewViewSupport.js"></script>
<script type="text/javascript" src="../../textfieldControl/js/Textfield.js"></script>
<script type="text/javascript" src="../../textfieldControl/js/TextfieldSlider.js"></script>
<script type="text/javascript" src="../../textfieldControl/js/TextfieldStepper.js"></script>
<script type="text/javascript" src="../../src/js/core/fluidNewRenderer.js"></script>
<script type="text/javascript" src="../../src/js/core/htmlParser.js"></script>
<script type="text/javascript" src="../../src/js/core/ResourceRewriter.js"></script>
<script type="text/javascript" src="../../src/js/client/ClientRenderer.js"></script>
<!-- Includes for our own application - will eventually be auto-generated -->
<script type="text/javascript" src="js/DemoPage.js"></script>
<title>Textfield Controls Demo</title>
</head>
<!-- The structure of this demo was taken from %fluid-infusion/demos/textfieldControl -->
<body>
<section class="fl-demo-container">
<section class="fl-demo-container">
<div>
<h2>Textfield Slider</h2>
<div class="flc-textfieldSlider fl-textfieldSlider fl-focus">
<input class="flc-textfieldSlider-slider fl-slider" type="range" min="0" max="10" step="1" value="7" aria-label="Textfield Slider">
<input class="flc-textfieldSlider-field fl-textfieldSlider-textField" type="text" aria-label="Textfield Slider">
</div>
<h2>Textfield Stepper</h2>
<div class="flc-textfieldStepper fl-textfieldStepper">
<!-- <span class="demo-smallIcon">A</span> -->
<span class="flc-textfieldStepper-focusContainer fl-textfieldStepper-focusContainer">
<button class="flc-textfieldStepper-decrease fl-textfieldStepper-button" type="button" aria-label="decrement" tabindex="-1" disabled="">-</button>
<input aria-labelledby="line-space-label" class="flc-textfieldStepper-field fl-textfieldStepper-textField" type="number" min="1" max="2" step="0.1" aria-label="Textfield Stepper">
<button class="flc-textfieldStepper-increase fl-textfieldStepper-button" type="button" aria-label="increment" tabindex="-1">+</button>
</span>
<!-- <span class="demo-largeIcon">A</span> -->
</div>
</div>
</section></section>
<script>
fluid.resourceLoader.staticMountTable = [
{moduleName: "fluid-textfield-controls", prefix: "../../textfieldControl", suffix: ""},
{moduleName: "fluid-textfield-controls-demo", prefix: "./", suffix: ""},
];
fluid.demos.demoPage(".fl-demo-container");
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment