I'm very new at orchard and I'm having troubles finding a solution for what I think is a basic problem.
I want to render my own custom shape 'Content-Button' for my custom content type 'Button'. This works wonderful!
The Button content is made out of:
Display name
Content picker
My custom shape looks like this:
#using Orchard.Utility.Extensions;
#{
if (Model.Title != null) {
Layout.Title = Model.Title;
}
Model.Classes.Add("content-item");
var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
Model.Classes.Add(contentTypeClassName);
var tag = Tag(Model, "div");
tag.AddCssClass("row");
}
#tag.StartElement
<div id="" class="col-md-8 col-sm-10 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-2 btn btn-secondary center-block">
#Display(Model.Content)
</div>
#tag.EndElement
What I'm however trying to do is instead of calling '#Display(Model.Content)' I would like to call a specific shape to be rendered there. Like #Display(Model.Content.DisplayName).
I would like to do the same for the content picker so i can make a link in the div (through ID)
I've also tried to exlude certain (extra) fields using my theme's placement.info) but it seems I'm doing something wrong there as well.
<Match ContentType="Button">
<Place Parts_Contents_Publish="-"></Place>
<Place Fields_Common_Text="-"/>
</Match>
Note: The 'Fields_Common_Text' was purely a test but it stills renders that shape on my button.
If somebody could point me in the right direction, explain it or send me some very good documentation to read through I would be a very happy man.
You can access fields directly as following:
#Model.ContentItem.ButtonPart.DisplayName.Value
and same thing for content picker field, then you don't need to use placement.info file any more.
Related
I am using ion-range with pin and steps. I get the current value in the range pin, but I want to add/append some text next to it.
So far in ionic API and docs I did not find a way to modify the content from the range pin, so I am thinking on maybe appending a span via the code, but so far I know to use .append() function from jQuery.
The html of the range pin is:
<div class="range-pin" role="presentation">1</div>
So I want to show it like:
<div class="range-pin" role="presentation">1 item</div>
I know it is a bit late but if anyone comes across this question, I have found the following solution:
HTML
<ion-range id="euroRange" debounce="250" pin="true" min="0" max="50" (ionChange)="formDidUpdate()" [(ngModel)]="price" color="secondary"></ion-range>
See how I added an id called euroRange to my ion-range element.
CSS
#euroRange {
.range-pin:after {
content: " €";
}
}
Inside of the euroRage id I added .range-pin:after which means that whatever I specify should be done directly after the normal content of the pin.
With content I added a space and the € symbol.
Here is the
result.
This was my solution.
Note: I put this inside ionViewDidEnter.
this._elementRef.nativeElement
.querySelector('.range-knob-handle')
.addEventListener('pointermove', function () {
const value = this.getAttribute('aria-valuenow');
this.querySelector('.range-pin').textContent = `${value} hours`;
});
So the main thing here is that the const value is the value selected on the range. After that you can do whatever you want with it and just set the textContent of the range-pin to fix the text.
I have decided to 'enhance' a textarea in a form with TinyMCE... however, doing so has interrupted the styling and jQuery functionality of the original element, as TinyMCE wraps that element in an iframe and a few divs. What I'd love to be able to do is to get the TinyMCE functionality (preserving text formatting, etc.) but not lose the styling and functions that I had associated with the original textarea. I looked through the TinyMCE documentation, but couldn't seem to find anything about this. Does anyone have any thoughts on how to accomplish this?
My form features the textarea like so:
<head>
<script>tinymce.init( { selector: 'textarea' } );</script>
</head>
<div class="form-element">
<div class="label-container">
<label for="body">Post</label><span class="warning">Please fill out this field</span>
</div>
<textarea id="body" class="input-field" name="body"></textarea>
</div>
but adding TinyMCE breaks the label/textarea relationship.
Also, jQuery functionality is broken, such as this validation script:
$("form").submit(function(e){
tinyMCE.triggerSave();
var inputFields = $(".input-field");
var proceed = true;
for(var i = 0; i < inputFields.length; i++){
if($(inputFields[i]).val() == ""){
$(inputFields[i]).css("border", "solid 3px #E86F3A");
$(inputFields[i]).prev().find(".warning").show();
var proceed = false;
e.preventDefault();
}
else{
$(inputFields[i]).css("border", "none");
$(inputFields[i]).prev().find(".warning").hide();
};
};
//OTHER STUFF...
});
since the textarea.input-field is no longer picked up in the inputFields variable.
So, in a nutshell, I'm looking for the TinyMCE wrapper to 'inherit' the styling and functionality of the element that it is attached to. Possible?
As you have correctly surmised when you invoke TinyMCE on a <textarea> the original <textarea> is no longer visible on the page and its replaced by an <iframe> and series of <div> elements.
If you want to keep the underlying <textarea> in sync you can use the tinymce.triggerSave() method. This will update all of the underlying <textarea> elements with the current value of the appropriate instance of TinyMCE.
You can do this when someone tries to save/submit the content or you can try to perform this when certain editor events happen (https://www.tinymce.com/docs/advanced/events/#editorevents). Unless you need real time accuracy of the contents of the <textarea> its far easier to call the triggerSave() method right before you perform you jQuery validation.
Note: Putting a border on the <textarea> won't have any impact on TinyMCE as you no longer see the underlying <textarea>. You can certainly try to add CSS to the editor's HTML in real time. The outer border of TinyMCE 4.4 has these classes attached:
class="mce-tinymce mce-container mce-panel"
...but do note that these classes could change over time so if you upgrade TinyMCE check to make sure your CSS still works before upgrading.
I have issue with auto generated code for web components.
Here is piece of HTML:
<div id="hidden-ui">
<div id="auth-form" class="...">
...
<to-button></to-button>
</div>
...
</div>
As you can see, there is custom web component called to-button:
<element name="to-button" constructor="TOSimpleButton" extends="div">
...
</element>
On startup I want to move #auth-form outside from parent node to document root:
Element af = document.query('#auth-form');
Element db = document.query('BODY');
db.children.add(af);
It's OK if there is no custom web-components inside movable node, but while to-button is inside I get run-time RangeError.
Here is piece of auto generated code:
__e1 = __root.nodes[9].nodes[1].nodes[7];
__t.component(new TOSimpleButton()..host = __e1);
As you can see, there is strict old path to component, thus RangeError exception raise.
How can I handle with this?
Sounds like you want to display popup forms every now and then. Here's what I do.
I specify this constructor for the dialog/popup:
var lifecycleCaller;
DialogFooComponent() {
host = new Element.html('<x-dialog-foo></x-dialog-foo>');
lifecycleCaller = new ComponentItem(this)
..create();
document.body.children.add(host);
lifecycleCaller.insert();
}
And as you can see, I add it to the document body. However, this only happens when creating a new instance.
Whenever I need to show that popup, I have code like this:
import '../dialog/foo/foo.dart';
...
// Later at some point I do:
new DialogFooComponent();
And what happens is that you have popup forms appearing in the body whenever you wish them to.
When you want to close the dialog, you can just call this inside the dialog component:
lifecycleCaller.remove();
As mentioned here, this will not be fixed in WebUI package, but will in Polymer.
this won't be fixed in web_ui pkg. It should work in polymer pkg.
I'm trying to create a custom Velocity Template for a banner which includes a breadcrumb but have no idea how to go about it. I've noticed the line which says #breadcrumb() in portal_normal.vm looks like a Velocity macro, but I cannot find the macro to try and replicate this.
Any ideas?
You can find it in source code of portal, in file portal-impl\src\VM_liferay.vm.
It is defined as:
#macro (breadcrumbs $control_panel)
#set ($breadcrumb_tag = $theme.getBreadcrumbTag())
#if ($control_panel == "control_panel")
$breadcrumb_tag.setShowGuestGroup(false)
$breadcrumb_tag.setShowParentGroups(false)
#end
$breadcrumb_tag.runTag()
#end
The highlevel layout of the whole portal is in the portal_normal.vm, which atleast in 6.1. calssic theme consists of div tags for heading, content and footer. The banner is between the
<div id="heading">
...
</div>
block. So you probably only need to move the
<nav class="site-breadcrumbs" id="breadcrumbs">
#breadcrumbs()
</nav>
to the right place inside that block.
You could also divide the velocity macros to multiple files with
#parse("$full_template_path/name_of_custom_velocity_file.vm")
commands, which I just did :) Eg. I made own file for header, content and footer.
I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!