orchard CMS using bootstrap datetimepicker - orchardcms-1.10

I try to using bootstrap DateTimepicker in Orchard CMS v 1.10
I Add the files
bootstrap-datetimepicker.js ,
bootstrap-datetimepicker.min.js ,
bootstrap-datetimepicker.css ,
bootstrap-datetimepicker.min.css ,
I Set The File in correct place where the *.js set in Script Folder and *.css set in Styles folder
and Build the ResourceManifest Class
public class ResourceManifest : IResourceManifestProvider
{
public void BuildManifests(ResourceManifestBuilder builder)
{
var manifest = builder.Add();
manifest.DefineScript("bootstrap_datetimepicker").SetUrl("bootstrap-datetimepicker.min.js", "bootstrap-datetimepicker.js");
manifest.DefineStyle("bootstrap_datetimepicker").SetUrl("bootstrap-datetimepicker.min.css", "bootstrap-datetimepicker.css");
}
}
in the View i add this code to test but it is not working
#{
Script.Require("Bootstrap").AtFoot();
Script.Require("bootstrap_datetimepicker").AtFoot();
Style.Require("Bootstrap").AtHead();
Style.Require("bootstrap_datetimepicker").AtHead();
}
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
#using (Script.Foot())
{
<script type="text/javascript">
//<![CDATA[
$(function () {
$('#datetimepicker1').datetimepicker();
});
//]]>
</script>
}

must add moment.js to Scripts Folder and update the ResourceManifest by Add
manifest.DefineScript("moment").SetUrl("moment.min.js", "moment.js");
and in View just Call it by
Script.Require("moment").AtFoot();
and it is working

Related

With IdentityServer3 I'm unable to display the loaded user details as per their sample

I'm following the IdentityServer3 jsGettingStarted sample github sample
But I'm trying to do so using MVC.
(The IdentityServer itself is in a separate project and solution as per the sample documentation.)
Providing the index.html page is via a Controller-Action, which is fine.
The login popup "popup.html" which is actually "popup.cshtml" is also via a Controller action and it also displays, but it won't close and display the user credentials in the index page as shown in the Sample.
But putting a few alerts in, .. the user is definitely logged in.
I also tried moving the popup.html into the root of the project (as .html and not as .cshtml and changing the server's Client.cs' RedirectUris to reflect that change) but without success.
Is it because of the cshtml pages being served from my controller actions ?
The documentation says that this should display by calling the display function, but the "manager.events.addUserLoaded" function is not firing, which calls the display function.
I am using VS2017 MVC5 with Framework 4.8.
Thanks
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/oidc-client.js"></script>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS Application</a>
</div>
</div>
</nav>
<div class="container main-container">
<div class="row">
<div class="col-xs-12">
<ul class="list-inline list-unstyled requests">
<li>Home</li>
<li><button type="button" class="btn btn-default js-login">Login</button></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">User data</div>
<div class="panel-body">
<pre class="js-user"></pre>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
// helper function to show data to the user
function display(selector, data)
{
if (data && typeof data === 'string')
{
data = JSON.parse(data);
}
if (data)
{
data = JSON.stringify(data, null, 2);
}
alert("selector=" + data);
$(selector).text(data);
}
var settings = {
authority: 'https://localhost:44302', // The url of the IdentityServer
client_id: 'js',
popup_redirect_uri: 'http://localhost:44888/Account/Popup',
response_type: 'id_token token',
scope: 'openid profile email',
filterProtocolClaims: true
};
var manager = new Oidc.UserManager(settings);
var user;
manager.events.addUserLoaded(function (loadedUser)
{
alert("userManager");
user = loadedUser;
display('.js-user', user);
});
$('.js-login').on('click', function ()
{
manager
.signinPopup()
.catch(function (error)
{
console.error('error while logging in through the current window or popup', error);
});
});
</script>
By creating a standalone project rather than trying to do it in already established project, I managed to get it to work. There were clashes in the scripts and css we were already using.

i have Imported installed quill but the issue with user interface

Well I followed the example
https://www.youtube.com/watch?v=Sh3_k_QPGzw
I don't get the Quill tool bar as shown in the any of the examples
<div style="text-align:center">
<div class="container-fluid">
<div class="row pt-5">
<div class="col-md-8">
<form [formGroup]="editorForm" (ngsubmit)="onSubmit()">
<div class="form-group">
<label for="editor"><h3>editor</h3></label>
<quill-editor></quill-editor>
</div>
</form>
</div>
I just tried your example:
<div class="form-group">
<label for="editor"><h3>editor</h3></label>
<quill-editor></quill-editor>
</div>
Result:
It works fine showing all the standard toolbar-items, so make sure you also imported quill.snow.css and quill.bubble.css
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
in your html and
#import "./app/quill/quill-emoji.css";
#import "./app/quill/quill-mention.css";
in your styles.css.
If you are using your own custom toolbar container you also need to create the buttons inside it.
From the official docs:
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar', // Selector for toolbar container
handlers: {
'bold': customBoldHandler
}
}
}
});
Because the container option is so common, a top level shorthand is also allowed.
var quill = new Quill('#editor', {
modules: {
// Equivalent to { toolbar: { container: '#toolbar' }}
toolbar: '#toolbar'
}
});
The official documentation and some good examples:
Doc on toolbar
Example
Example on Stackblitz
Example on CodePen with custom toolbar-container

Where to save ReactJS file?

I'm Learning ReactJS Components and here my code is... I'm not getting where to save this file or in which folder I should keep this file?
<body>
<div id="anmol"></div> <script
src="https://unpkg.com/react#15/dist/react.min.js"></script> <script
src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel"> var NavBar = React.createClass({
render: function() {
return (
<div className='navbar navbar-deafult'>
<div className='navbar-header'>
<a className='navbar-brand'>React</a>
</div>
<div className="collapse navbar-collapse">
<ul className="navbar-nav nav navbar-right">
<li> Home Page </li>
<li> About Us </li>
</ul>
</div>
</div>
); } }); var HelloWorld = React.createClass({
render:function() {
return(
<div> <h1>{this.props.children} </h1></div>
); } }); var destination = document.querySelector("anmol"); ReactDOM.render( <div> <NavBar/> <HelloWorld>
HelloWorld</HelloWorld</div>,destination); </script>
</body>
it look's like you are learning react, I strongly advice you to use https://github.com/facebook/create-react-app which will set-up whole environment with babel webpack and everything for you, so you can start to play with React. Greeting and have fun with React.
You can use codesandbox.io as well!
I created the example you were working on in there with updated syntax.
https://codesandbox.io/s/n9227v5xkp

Processing dynamically added elements Material Design Lite

First, the code:
$(document).ready(function() {
$('#member_pattern').hide();
$('.add-member').click(function() {
var clone = $('#member_pattern').clone(), cont = $('.members-cont');
$(cont).append(clone);
$(cont).find('#member_pattern').show(200, function() {
$(this).attr('id', '');
componentHandler.upgradeAllRegistered();
});
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<div class="members-cont">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/>
<label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">Имя</label>
</div>
</div>
<button class="add-member add-member-top mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
<div id="member_pattern" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="[name]_[id]" value=""/>
<label class="mdl-textfield__label" for="[name]_[id]">Имя</label>
</div>
Objective:
By pressing a button on the page dynamically insert another field [.mdl-textfield], you want to apply the "material design" on Google
All is good, but the methods
componentHandler.upgradeAllRegistered ();
or
componentHandler.upgradeDom ();
in any does not want to renew, re-emerged, the elements on the page.
I also was having problems cloning an element and getting it to work correctly. What I did was to remove the MDL specific classes from the div and change it to a generic class name that I could select on.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
became
<div class="upgradeTextField">
Then in javascript, after cloning the element, I selected for those divs within the cloned element and added the MDL specific classes to them. After that, running componentHandler.upgradeDom() seemed to work.
var textFieldUpgrades = cloned.querySelectorAll('.upgradeTextField');
if(textFieldUpgrades) {
for(var i=0;i<textFieldUpgrades.length;++i) {
textFieldUpgrades[i].className = 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label';
}
}
componentHandler.upgradeDom();
I haven't verified this, but it seems that when you clone an existing element within the dom that has been upgraded by MDL previously, it won't upgrade it when you add the cloned object to the DOM. So that's why I simply removed the MDL classes so it wouldn't be upgraded beforehand.
Alternatively, if you need it upgraded beforehand and still want to clone it. Then what you can do is to remove the attribute 'data-upgraded' and class 'is-upgraded' from your element after you clone it. Then when you run the componentHandler.upgradeDom() it should upgrade it. So, instead of just setting the class name as in the above snippet, you'd simply remove the upgrade info:
textFieldUpgrades[i].setAttribute('data-upgraded','');
textFieldUpgrades[i].className = textFieldUpgrades[i].className.replace(/is-upgraded/g,'');
This seemed to work for me.
Thanks for the answer, but it turned out to solve it more concise way
var index = $('.member-section').length;
var clone = $('.member-section-pattern').clone();
$(clone)
.removeClass('member-section-pattern')
.find(':not([data-upgraded=""])').attr('data-upgraded', '');
$('.members-cont').append(clone);
$(clone).show(200, function() {
componentHandler.upgradeAllRegistered();
});

How to use/add existing Media Library widget into a custom widget in Orchard CMS?

I'm writing a custom widget, I want to create a form that contains an image picker that selects the image from the existing media library. I've noticed that I could use the existing Media Library widget, but I have no idea how to include it in my widget. Can I import it from the EditPart view somehow ?
[Update]
Here is part of a sample code. Assuming you have this Edit Part template:
#using MediaLibrary.FilePicker //Is there a way to add it doing something like this??
#model Maps.Models.MapPart
<fieldset>
<legend>Map Fields</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Latitude)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Latitude)
#Html.ValidationMessageFor(model => model.Latitude)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Longitude)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Longitude)
#Html.ValidationMessageFor(model => model.Longitude)
</div>
</fieldset>
Just add a media library picker field.
I figured out how to do it.
I was trying to use the image picker from my custom widget. Here are the steps that I followed to accomplish this.
1.Add a reference to the MediaPicker libary into my Widget project.
2.Add the following code:
#using Orchard.ContentManagement
#using Orchard.Utility.Extensions
#using Orchard.MediaPicker
#model MyWidget.Models.PickerForm
<div class="editor-label">
<label for="ImageUrl">Image Url</label>
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.ImagePath, new { #class = "text single-line", #id = "ImageUrl" })<br />
#Html.ValidationMessageFor(m => m.ImagePath)<br />
<input type="button" class="button" id="PickImageUrl" value="Pick Image" />
</div>
#using (Script.Foot())
{
<script type="text/javascript">
//<![CDATA[
jQuery(function ($) {
var baseUrl = "#HttpContext.Current.Request.ToRootUrlString().TrimEnd('/')";
$("#PickImageUrl").click(function () {
$("form").trigger("orchard-admin-pickimage-open",
{
img: $("#ImageUrl").val(),
uploadMediaPath: "About",
callback: function (data) {
$("#ImageUrl").val(baseUrl + data.img.src);
}
});
});
});
//]]>
</script>
}
And voila.

Resources