I'm working on designing a site in WP, but I'm at a loss for the right words to google. What I'm looking for is a "text container that can be toggled". I have a syntax highlighting plugin for posting code, but I don't want the code to be visible in large blocks considering it may be a little distracting. I was wondering if anyone could link me to a plugin or give me the technical term for what I'm thinking of, where you can put the text in a group and then be able to toggle whether it is visible or not within the page.
It sounds like what you are looking for is simply applying a CSS class to the element and then using jQuery or some other JS library to toggle its visibility. Example below (code is not optimized in order to explain some of the concepts. This can, read "should", be cleaned up):
// This is HTML/CSS
<body>
...
<p>Here is some normal text.</p>
Show/hide source code for displayText method
<div class="source_code" id="source_code_for_displayText_method">
// Groovy code
...
public void displayText(String message) {
outputStream.write(message)
}
...
</div>
...
Show/hide source code for download method
<div class="source_code" id="source_code_for_download_method">
// Groovy code
...
GParsPool.withPool(threads) {
sessionDownloadedFiles = localUrlQueue.collectParallel { URL url ->
downloadFileFromURL(url)
}
}
...
</div>
...
Show/hide all source code sections
...
</body>
You can default all source code sections to hidden:
// This is CSS
.source_code {
display: hidden;
}
Then you would use JS to provide the toggle ability:
// This is JavaScript
// This toggles a specific section by using an id ("#") selector
$('#source_code_displayText_method_toggle_link').onClick(function() {
$('#source_code_for_displayText_method').toggle();
});
// This toggles all source code sections by using a class (".") selector
$('#source_code_all_toggle_link').onClick(function() {
$('.source_code').toggle();
});
Some thoughts:
If you toggle all sections, you need to determine what the current state is -- if some are currently shown and others hidden, this will invert each. If you want "hide all" and "show all", then use .hide() and .show() respectively.
If you are manually adding the source code sections and want semantic selectors, the above is fine. If you are building some kind of automation/tool to allow you to repeat this, you'll probably want to use generated ids and helper links, in which case it would look like:
.
// This is HTML/CSS
<body>
...
<p>Here is some normal text.</p>
Show/hide source code for displayText method
<div class="source_code" id="source_code_1">
// Groovy code
...
public void displayText(String message) {
outputStream.write(message)
}
...
</div>
...
Show/hide source code for download method
<div class="source_code" id="source_code_2">
// Groovy code
...
GParsPool.withPool(threads) {
sessionDownloadedFiles = localUrlQueue.collectParallel { URL url ->
downloadFileFromURL(url)
}
}
...
</div>
...
Show/hide all source code sections
...
</body>
With the JavaScript to handle id parsing:
// This is JavaScript
// This toggles a specific section by using a dynamic id ("#") selector
$('.source_code_toggle_link').onClick(function(elem) {
var id = $(elem).attr("id");
// Split on the _ and take the last element in the resulting array
var idNumber = id.split("_")[-1];
var codeBlock = $('#source_code_' + idNumber);
codeBlock.toggle();
});
Related
Upon selecting a radio button the respective div should be visible. Again each div has its own HTML elements.
Currently I am using code like this
<div *ngIf="A.checked">
show A HTML elements
</div>
<div *ngIf="B.checked">
show B elements
</div>
It is working fine as it is hiding depending on selection, however when I submit , it is validating the hidden div elements. Please suggest me how to stop validating the elements under hidden div.?
Reactive forms don't look at the hidden status of elements.
You should update your validation based on user selection by:
form.setValidators([ ... /* validators that you want to set */ ])
form.updateValueAndValidity();
You need to do something like this.
// Define a Subject and destroy in onDestroy
private destroy$: Subject<any> = new Subject();
someForm.get('controlname').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(
value ==> {
if (value) {
// Remove validators for unwanted controls
someForm.get('unwantedControl').setValidators(null);
someFrom.get('unwantedControl').updateValueAndVaildity();
}
})
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
This is the markup for Content.ThumbnailSummary.cshtml, a custom DisplayType I use to render ContentItems as clickable thumbnails with their contents absolutely positioned over them.
#using Orchard.Utility.Extensions;
#{
var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
}
<a class="content-item #contentTypeClassName thumbnail-summary">
#Display(Model.Header)
<div class="thumbnail-summary-inner">
#Display(Model.Content)
</div>
#Display(Model.Footer)
</a>
The problem is that out of the box most Parts and Fields get rendered as links or paragraphs containing links, and nested <a> tags mess up DOM rendering pretty badly in most browsers. A ThumbnailSummary should never contain any links.
I could create alternates for every field and part, or I could remove everything by default in placement and only add rules for specific cases as I need them. But that would be pretty tedious and defeats a lot of the benefits of placement, so I was hoping I could somehow strip or replace all <a> tags in code only for shapes with this DisplayType.
I've been looking in this direction but I'm not sure if it's viable:
public class Shapes : IShapeTableProvider
{
public void Discover(ShapeTableBuilder builder)
{
builder.Describe("Content")
.OnDisplaying(displaying =>
{
if (displaying.ShapeMetadata.DisplayType == "ThumbnailSummary")
{
// Do something here???
}
});
}
}
You are almost right, instead of a provider add a class that inherits from Orchard.DisplayManagement.Implementation.ShapeDisplayEvents or implement IShapeDisplayEvents yourself.
I've done this myself to remove certain functionality from admin area that cannot be disabled via feature or permission.
The code should look like this
public class MyShapeDisplayEvents : Orchard.DisplayManagement.Implementation.ShapeDisplayEvents
{
public override void Displayed(Orchard.DisplayManagement.Implementation.ShapeDisplayedContext context)
{
if (context.Shape is Orchard.DisplayManagement.Shapes.Shape)
{
Orchard.DisplayManagement.Shapes.Shape lShape = (Orchard.DisplayManagement.Shapes.Shape)context.Shape;
if (lShape.Metadata.Type == "Layout")
{
string lChildContent = context.ChildContent.ToHtmlString();
// do something with the content like removing tags
context.ChildContent = new System.Web.HtmlString(lChildContent);
}
...
In the Angular 2 Kendo grid, I need to show additional info in each cell when the user opens the detail template.
In the Kendo Grid for jQuery I could use the detailinit (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-detailInit) event to accomplish what I need, however, there is no such event in the Angular2 component.
<kendo-grid-column>
<template kendoCellTemplate let-dataItem let-rowIndex="rowIndex">
{{rowIndex}}
<div *ngIf="????">
Need to show this text when detail template is visible
and hide when it's hidden
</div>
</template>
</kendo-grid-column>
<template kendoDetailTemplate let-dataItem>
<section *ngIf="dataItem.Category">
<header>{{dataItem.Category?.CategoryName}}</header>
<article>{{dataItem.Category?.Description}}</article>
</section>
</template>
Here is an example what I need (please see the text in the cells).
At this time, the Angular 2 grid does not provide information whether the detail template is expanded or not. Feel free to suggest this as a feature request.
HACK: To hack around this limitation, you can infer the expanded state from the HTML.
See this plunkr.
private icons(): any[] {
const selector = ".k-master-row > .k-hierarchy-cell > .k-icon";
const icons = this.element.nativeElement.querySelectorAll(selector);
return Array.from(icons);
}
private saveStates(): void {
this.states = this.icons().map(
(icon) => icon.classList.contains("k-minus")
);
}
private isExpanded(index): bool {
return this.states[index] || false;
}
While this works, it is far from ideal, and goes against the Angular philosophy, and may break upon rendering changes.
I can add a script to a page via the dashboard (by editing the page Content Item as html). The script is added to the page and evaluated, but too early - none of scripts are loaded yet (for example, jQuery).
I don't want to add the script to Layout, as it makes no sense to add this script for all pages.
Is there any way to add a script to a single page's content via the dashboard, so that it can be evaluated properly?
Or should I create a separate module that contains a special content part (to include proper scripts for the view/shape) and add that part to a custom ContentType (that also contains BodyPart and others such as Page Content Items)?
Or should I separate the whole content in such a way that interactive parts are widgets and should not be edited in Page Content Item?
Can you use the Script.Foot() extension method ?
#using(Script.Foot()) {
...
}
Using jQuery from Orchard module page
You can add the script file to the top of the html content like below:
<p>
<script type="text/javascript" src="/*path of the file*/">// <![CDATA[
// ]]></script>
</p>
Steps to add: Dashboard->Content->open the particular page->Html source editor->In the top add the above script with your script file path.
I suggest adding a part for your script, something like:
public class CustomScriptPart : ContentPart<CustomScriptPartRecord>
{
public bool AtFoot
{
get { return Record.AtFoot; }
set { Record.AtFoot = value; }
}
public string Script
{
get { return Record.Script; }
set { Record.Script = value; }
}
}
Views/Parts/CustomScript.cshtml
#if(Model.AtFoot) {
using(Script.Foot()) {
<script type="text/javascript">
#Model.Script
</script>
}
} else {
<script type="text/javascript">
#Model.Script
</script>
}
But probably something similar is already done, by Vandelay Industries for example.
I'm kind of like stuck trying to implement YUI autocomplete textbox. here's the code:
<div id="myAutoComplete">
<input id="myInput" type="text" />
<div id="myContainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.BasicRemote = function() {
oDS = new YAHOO.util.XHRDataSource("../User/Home2.aspx");
// Set the responseType
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
// Define the schema of the delimited results
oDS.responseSchema = {
recordDelim: "\n",
fieldDelim: "\t"
};
// Enable caching
oDS.maxCacheEntries = 5;
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oDS.generateRequest = function(sQuery) {
return "../User/Home2.aspx?method=" + "SA&Id="+document.getElementById("lbAttributes")[document.getElementById("lbAttributes").selectedIndex].value +"&query="+sQuery;
};
oAC.queryQuestionMark =false;
oAC.allowBrowserAutoComplete=false;
return {
oDS: oDS,
oAC: oAC
};
}
</script>
I've added all the yahoo javascript references and the style sheets but it never seems to make the ajax call when I change the text in the myInput box and neither does it show anything... I guess I'm missing something imp...
#Kriss -- Could you post a link to the page where you're having trouble? It's hard to debug XHR autocomplete without seeing what's coming back from the server and seeing the whole context of the page.
#Adam -- jQuery is excellent, yes, but YUI's widgets are all uniformly well-documented and uniformly licensed. That's a compelling source of differentiation today.
To be honest, and I know this isn't the most helpful answer... you should look into using jQuery these days as it has totally blown YUI out of the water in terms of ease-of-use, syntax and community following.
Then you could toddle onto http://plugins.jquery.com and find a whole bunch of cool autocomplete plugins with example code etc.
Hope this helps.