I would like a Drupal 7 theme function to add some bootstrap CSS to a view form.
Specifically I want to add the .form-inline CSS class to the HTML form element.
function themename_form_alter(&$form, &$form_state, $form_id) {
if ($form_id=='views_exposed_form') {
$view = $form_state['view'];
if ($view->name == 'sc_search' && $view->current_display == 'panel_pane_1' ) {
$form['#attributes']['class'][] = 'form-inline';
}
}
}
Related
I'm trying to customize the Quill editor for my needs. I managed to implement and insert custom blots, as described in https://quilljs.com/guides/cloning-medium-with-parchment/ But I need to edit data, which is attached to my blots, like the URL of a link for example. The default implementation of Quill displays a small "inline" edit box for links. I want to implement something like that myself, but just don't get it. I did not find any hints in the docs and guides. Reading the source code of Quill, I was not able to figure out where the editing dialog for links is implemented. Any starting point would be very appreciated.
I've tried something similar. Proper way of doing it should be creating a module. Unfortunately as you already know it is not as easy as it seems.
Let me point you to some useful resources that helped me a lot with understanding how to create extensions for quill.
Quills maintainer is curating Awesome quill list.
I recommend looking especially into
quill-emoji it contains code to display tooltip emoji while writing
quill-form maybe some form extension has some code that will point you in the right direction
Here is my try on to it using custom quill module.
const InlineBlot = Quill.import('blots/inline');
class NamedLinkBlot extends InlineBlot {
static create(value) {
const node = super.create(value);
node.setAttribute('href', value);
node.setAttribute('target', '_blank');
return node;
}
}
NamedLinkBlot.blotName = 'namedlink';
NamedLinkBlot.tagName = 'A';
Quill.register('formats/namedlink', NamedLinkBlot);
const Tooltip = Quill.import('ui/tooltip');
class NamedLinkTooltip extends Tooltip {
show() {
super.show();
this.root.classList.add('ql-editing');
}
}
NamedLinkTooltip.TEMPLATE = [
'<a class="ql-preview" target="_blank" href="about:blank"></a>',
'<input type="text" data-link="https://quilljs.com">',
'Url displayed',
'<input type="text" data-name="Link name">',
'<a class="ql-action"></a>',
'<a class="ql-remove"></a>',
].join('');
const QuillModule = Quill.import('core/module');
class NamedLinkModule extends QuillModule {
constructor(quill, options) {
super(quill, options);
this.tooltip = new NamedLinkTooltip(this.quill, options.bounds);
this.quill.getModule('toolbar').addHandler('namedlink', this.namedLinkHandler.bind(this));
}
namedLinkHandler(value) {
if (value) {
var range = this.quill.getSelection();
if (range == null || range.length === 0) return;
var preview = this.quill.getText(range);
this.tooltip.show();
}
}
}
Quill.register('modules/namedlink', NamedLinkModule);
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
namedlink: {},
toolbar: {
container: [
'bold',
'link',
'namedlink'
]
}
}
});
CodePen Demo
To see the tooltip:
Select any word
Click invisible button on the right of link button, your cursor will turn to hand.
Main issues that need to be addressed:
in order to customize the tooltip you will need to copy majority of the code from SnowTooltip Main pain point is that you cannot easily extend That tooltip.
you need to also adapt the code of event listeners but it should be straightforward
Here's a partial answer. Please see lines 41-64 in file "https://github.com/quilljs/quill/blob/08107187eb039eababf925c8216ee2b7d5166d41/themes/snow.js" (Please note, that the authors have since moved to TypeScript, lines 45-70?, and possibly made other changes.)
I haven't tried implementing something similar but it looks like Quill is watching a "selection-change" event and checks if the selection is on a LinkBlot with a defined link.
The SnowTooltip class includes references to the selectors, 'a.ql-preview', 'ql-editing', 'a.ql-action', and 'a.ql-remove', which we find in the link-editing tooltip.
this.quill.on(
Emitter.events.SELECTION_CHANGE,
(range, oldRange, source) => {
if (range == null) return;
if (range.length === 0 && source === Emitter.sources.USER) {
const [link, offset] = this.quill.scroll.descendant(
LinkBlot,
range.index,
);
if (link != null) {
this.linkRange = new Range(range.index - offset, link.length());
const preview = LinkBlot.formats(link.domNode);
this.preview.textContent = preview;
this.preview.setAttribute('href', preview);
this.show();
this.position(this.quill.getBounds(this.linkRange));
return;
}
} else {
delete this.linkRange;
}
this.hide();
},
);
I'm discovering .Net Core Tag Helpers and I was just curious to know if there are any tag helpers that replicate the #Html.DisplayFor. I think that the label tag helper replicates #Html.DisplayNameFor since it shows the property name on a model passed to the page, but is there an equivalent for #Html.DisplayFor for displaying a property value?
I'm assuming there isn't because in the microsoft .net core tutorials, razor pages that need to display the property value rather than the property name use the HTML helpers.
First, the tag helper is actually the "label asp-for". You can create a new tag helper that is a "label asp-text" helper.
Another option is to use another tag such as span and create a custom "span asp-for" tag helper.
Here is a simple span implementation:
[HtmlTargetElement("span", Attributes = FOR_ATTRIBUTE_NAME, TagStructure = TagStructure.NormalOrSelfClosing)]
public class CustomSpanTagHelper : InputTagHelper
{
private const string FOR_ATTRIBUTE_NAME = "asp-for";
public CustomSpanTagHelper(IHtmlGenerator generator) : base(generator)
{
}
public override void Process(TagHelperContext context, TagHelperOutput output)
{
if (context == null)
{
throw new ArgumentNullException(nameof(context));
}
if (output == null)
{
throw new ArgumentNullException(nameof(output));
}
var metadata = base.For.Metadata;
if (metadata == null)
{
throw new InvalidOperationException(string.Format("No provided metadata " + FOR_ATTRIBUTE_NAME));
}
if (!string.IsNullOrWhiteSpace(metadata.Description))
{
output.Content.Append(metadata.Description);
}
if (metadata.IsEnum)
{
var description = (this.For.Model as Enum).GetDescription();
output.Content.Append(description);
}
base.Process(context, output);
}
}
You will need to register your custom tag helper in your _ViewImports.cshtml like this: (don't forget to rebuild)
#namespace MyProject.Web.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper MyProject.Web.TagHelpers.CustomSpanTagHelper, MyProject.Web <-- custom import
Im using gettext module for angular to handle my translations. This works almost perfectn. gettext
Now i have 2 controllers. 1 is called basecontroller other controllers are per view. so the base controller is attached to the html tag and using ngRoutes i attach a diffrent controller to each view.
Now in the base controller i set language like this:
//set lang
$rootScope.selectedLang = 'NL';
//Switch language
$scope.setLang = function(type,lang) {
if (type == 'select') {
ngDialog.open({
template: 'views/popups/set-language.php',
className: 'ngdialog-theme-flat',
controller: 'BaseCtrl'
});
}
if (type == 'set') {
if (lang == 'nl') {
gettextCatalog.setCurrentLanguage('nl');
$rootScope.selectedLang = 'NL';
}
if (lang == 'en') {
gettextCatalog.setCurrentLanguage('en');
$rootScope.selectedLang = 'EN';
}
ngDialog.closeAll();
}
}
this works fine. When user clicks on NL its translates to NL and when user clicks on EN it translates texts to eng.
The problem is that per controler I also have strings. these are in javascript so in searchcontroller for example i have:
$rootScope.stepText = gettextCatalog.getString("step_1_header");
these translations are for global things like a header title, that changes per controller.
This also works fine but now the problem is the switch. When i switch to english all texts get translated but not the $rootScope.stepText = gettextCatalog.getString("step_1_header");
I think this is because i do the switch in the base controller. Does anyone have any idea to fix this ?
Anything that goes on the scope shouldn't use gettextCatalog.getString.
Use something like this:
$rootScope.stepText = gettext("My step 1 title");
And in the view:
<h1>{{stepText | translate}}</h1>
We are working on an application in which we are using Angularjs + webapi and making a Single Page App.
We have quite few Modal Pop-ups from Bootstrap used in the app, but we are facing an issue
-> on click of the modal button, the backdrop initializes and then is stuck with no modal. and we have to force refresh the browser. We are pulling the templates from other files into the modals.
initially for closing the modal, I've used $(".modal.in").hide(); and the close is fine with out the "Stuck" on grey screen.
then later for init the modal itself it started to appear then I removed the fade class and removed the animations from the css but didn't help much.
Really need a promising fix.
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla || $.browser.msie ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
The above code snippet was advised in some forums.
But in the Bootstrap.js Bootstrap v3.2.0 (http://getbootstrap.com)
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
You can create a directive that includes the templates you want and launch and then control the boostrap modals from with in that directive. the external communication can be achieved in many ways my favorite using custom events watched by the directive to know when to hide or show the modals that way you can use all the bootstrap code you already have from INSIDE your directive. this can also be done through a service, not my favorite solution, but is also accepted. for more ideas look at the angular-ui project and the modal service
http://angular-ui.github.io/bootstrap/
I've been trying to get mobile_tools for Drupal 7 to work but it appears it's not switching themes. (Or at least I can't get it to switch).
This is the code "in charge of changing to the mobile theme. If I print $custom_theme it does become the name of the mobile theme but the displayed theme is still the default. I have not been able to find any documentation on variable $custom_theme at least not for Drupal 7.
/**
* Being called in the hook_boot() implementation
* This function is in charge of changing to the mobile theme
*/
function mobile_tools_switch_theme($device) {
global $custom_theme, $conf;
// check if theme switching is forced
$current_url_type = mobile_tools_is_mobile_site();
if (($current_url_type == 'mobile' && variable_get('mobile-tools-theme-switch', '' ) == 'mobile-tools-mobile-url') ||
(variable_get('mobile-tools-theme-switch', '' ) == 'mobile-tools-mobile-device' && $device['type'] == 'mobile') ) {
$group = $device['group'];
$mobile_detection_module = variable_get('mobile-tools-device-detection', 'mobile_tools');
if (variable_get($mobile_detection_module . '_' . $group . '_enable', '') == 1) {
$custom_theme = variable_get($mobile_detection_module . '_' . $group . '_theme', $conf['theme_default']);
return TRUE;
}
else {
$custom_theme = variable_get('mobile_tools_theme_name', $conf['theme_default']);
return TRUE;
}
}
return FALSE;
}
$custom_theme is no longuer the way to switch themes in Drupal 7 as mentionned in the Upgrade modules from 6.x to 7.x page, you have to use hook_custom_theme or specify a theme callback for the path instead.
Example from the upgrade page:
<?php
/**
* Implements hook_menu_alter().
*/
function mymodule_menu_alter(&$items) {
// Set the theme callback function for all node pages. As per the
// standard behavior for hook_menu() properties, this will be
// inherited by all paths underneath node/%node as well, unless
// they define their own theme callback.
$items['node/%node']['theme callback'] = 'mymodule_default_node_theme';
// Set a different theme callback for node edit pages, and pass
// along the node object to this function so we can make decisions
// based on it.
$items['node/%node/edit']['theme callback'] = 'mymodule_edit_node_theme';
$items['node/%node/edit']['theme arguments'] = array(1);
}
/**
* Defaults to using the 'some_theme' theme for node pages.
*/
function mymodule_default_node_theme() {
return 'some_theme';
}
/**
* For editing page nodes, uses the 'some_other_theme' theme.
*/
function mymodule_edit_node_theme($node) {
return $node->type == 'page' ? 'some_other_theme' : mymodule_default_node_theme();
}
/**
* Implements hook_custom_theme().
*/
function mymodule_custom_theme() {
global $user;
// If the current user has a special role assigned to them, then display all
// pages of the site (including those listed above) using the 'special_theme'
// theme.
if (in_array(variable_get('mymodule_special_role', 0), array_keys($user->roles))) {
return 'special_theme';
}
}
?>