Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use Horizontal method in storybook-root

Best JavaScript code snippet using storybook-root

themes-switcher.js

Source:themes-switcher.js

1$(function() {2	var $menu = $('#main-menu');3	// add the HTML structure4	$('div.right-column').prepend('\5  <div id="themes">\6   <h2>Switch theme (class)</h2>\7   <p>\8    <select id="themes-classes">\9\10\11	<!-- include new themes by adding a new option below -->\12\13\14     <option value="sm-blue" data-page-bg="#fbf3e8" data-codepen-url="http://codepen.io/vadikom/pen/rVMmMm?editors=010" data-init-options="{\n\15			subMenusSubOffsetX: 1,\n\16			subMenusSubOffsetY: -8\n\17		}" data-init-options-vertical="{\n\18			mainMenuSubOffsetX: 1,\n\19			mainMenuSubOffsetY: -8,\n\20			subMenusSubOffsetX: 1,\n\21			subMenusSubOffsetY: -8\n\22		}">sm-blue</option>\23     <option value="sm-clean" data-page-bg="#fcfcfc" data-codepen-url="http://codepen.io/vadikom/pen/Mwjmbb?editors=010" data-init-options="{\n\24			mainMenuSubOffsetX: -1,\n\25			mainMenuSubOffsetY: 4,\n\26			subMenusSubOffsetX: 6,\n\27			subMenusSubOffsetY: -6\n\28		}" data-init-options-vertical="{\n\29			mainMenuSubOffsetX: 6,\n\30			mainMenuSubOffsetY: -6,\n\31			subMenusSubOffsetX: 6,\n\32			subMenusSubOffsetY: -6\n\33		}">sm-clean</option>\34     <option value="sm-mint" data-page-bg="#fff" data-codepen-url="http://codepen.io/vadikom/pen/LVRybm?editors=010" data-init-options="{\n\35			subMenusSubOffsetX: 6,\n\36			subMenusSubOffsetY: -8\n\37		}" data-init-options-vertical="{\n\38			mainMenuSubOffsetX: 6,\n\39			mainMenuSubOffsetY: -8,\n\40			subMenusSubOffsetX: 6,\n\41			subMenusSubOffsetY: -8\n\42		}">sm-mint</option>\43     <option value="sm-simple" data-page-bg="#f6f6f6" data-codepen-url="http://codepen.io/vadikom/pen/OVRmbe?editors=010" data-init-options="{\n\44			mainMenuSubOffsetX: -1,\n\45			subMenusSubOffsetX: 10,\n\46			subMenusSubOffsetY: 0\n\47		}" data-init-options-vertical="{\n\48			mainMenuSubOffsetX: 10,\n\49			mainMenuSubOffsetY: 0,\n\50			subMenusSubOffsetX: 10,\n\51			subMenusSubOffsetY: 0\n\52		}">sm-simple</option>\53    </select>\54    <span style="float:right;"><a id="themes-codepen-url" href="http://codepen.io/vadikom/pen/rVMmMm?editors=010">Customize "<span id="themes-codepen-theme-name">sm-blue</span>" on Codepen</a></span><br />\55    <!--[if lt IE 9]><strong>IE8 note: Changing the following options will not produce proper preview for you due to Respond.js related issues. However, these main menu configurations will work just fine on your live website.</strong><br /><![endif]-->\56    <input id="themes-horizontal-fullwidth" name="themes-orientation" value="horizontal-fullwidth" type="radio" checked="checked" /><label for="themes-horizontal-fullwidth">Horizontal full width main menu</label><br />\57    <span id="themes-horizontal-fullwidth-align-holder" style="display:block;padding-left:1.5em;">\58     <input id="themes-horizontal-fullwidth-align-justified" type="checkbox" /><label for="themes-horizontal-fullwidth-align-justified">justified<small style="display:none;"><br />Note: Some themes may need minor changes like tweaking the main menu sub indicators\' position, etc.</small></label><br />\59    </span>\60    <input id="themes-horizontal" name="themes-orientation" value="horizontal" type="radio" /><label for="themes-horizontal">Horizontal main menu</label><br />\61    <span id="themes-horizontal-align-holder" style="display:block;padding-left:1.5em;">\62     <input id="themes-horizontal-align-left" name="themes-horizontal-align" value="left" type="radio" checked="checked" /><label for="themes-horizontal-align-left">left</label>&nbsp;&nbsp;\63     <input id="themes-horizontal-align-center" name="themes-horizontal-align" value="center" type="radio" /><label for="themes-horizontal-align-center">center</label>&nbsp;&nbsp;\64     <input id="themes-horizontal-align-right" name="themes-horizontal-align" value="right" type="radio" /><label for="themes-horizontal-align-right">right</label><br />\65    </span>\66    <input id="themes-vertical" name="themes-orientation" value="vertical" type="radio" /><label for="themes-vertical">Vertical main menu</label><br />\67    <input id="themes-rtl" type="checkbox" /><label for="themes-rtl" title="Won\'t use real RTL text, just preview the theme">Right-to-left</label><br />\68   </p>\69   <h3>Source code</h3>\70   <h4>CSS:</h4>\71   <pre class="sh_html sh_sourceCode">&lt;!-- SmartMenus core CSS (required) --&gt;\n\72&lt;link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" /&gt;\n\73\n\74&lt;!-- "<span class="themes-code-class">sm-blue</span>" menu theme (optional, you can use your own CSS, too) --&gt;\n\75&lt;link href="../css/<span class="themes-code-class">sm-blue</span>/<span class="themes-code-class">sm-blue</span>.css" rel="stylesheet" type="text/css" /&gt;\76<span class="themes-code-main-menu-css-holder" style="display:none;">\n\n\77&lt;!-- #main-menu config - instance specific stuff not covered in the theme --&gt;\n\78&lt;!-- You could put this in an external stylesheet (e.g. where the rest of your page styles are) --&gt;\n\79&lt;style type="text/css"&gt;\n<span class="themes-code-main-menu-css"></span>&lt;/style&gt;\80</span></pre>\81   <h4>HTML:</h4>\82   <pre class="sh_html sh_sourceCode">' + (window.addonHTMLBefore ? window.addonHTMLBefore : '') + '\&lt;nav id="main-nav">\n\83	&lt;ul id="main-menu" class="<span class="themes-code-main-class">' + $menu[0].className + '</span>"&gt;\n\84		...\n\85	&lt;/ul>\n\86&lt;/nav>' + (window.addonHTMLAfter ? window.addonHTMLAfter : '') + '</pre>\87   <h4>JavaScript:</h4>\88   <pre class="sh_html sh_sourceCode">&lt;!-- jQuery --&gt;\n\89&lt;script type="text/javascript" src="../libs/jquery/jquery.js"&gt;&lt;/script&gt;\n\90\n\91&lt;!-- SmartMenus jQuery plugin --&gt;\n\92&lt;script type="text/javascript" src="../jquery.smartmenus.js"&gt;&lt;/script&gt;\n' + (window.addonScriptSrc ? $.map(window.addonScriptSrc, function(arr) {93	return '\n&lt;!-- ' + arr[0] + ' --&gt;\n&lt;script type="text/javascript" src="' + arr[1] + '"&gt;&lt;/script&gt;\n';94}).join('') : '') + '\95\n\96&lt;!-- SmartMenus jQuery init --&gt;\n\97&lt;script type="text/javascript"&gt;\n\98	$(function() {\n\99		$(\'#main-menu\').smartmenus(<span class="themes-code-init-options">{\n\100			subMenusSubOffsetX: 1,\n\101			subMenusSubOffsetY: -8\n\102		}</span>);\n' + (window.addonScriptInit ? window.addonScriptInit : '') + '\103	});\n\104&lt;/script&gt;</pre>\105  </div>\106');107	// hide sub options108	$('#themes-horizontal-align-holder').hide();109	// load additional themes110	$('#themes-classes option').not(':first').each(function() {111		var className = $(this).attr('value');112		$('<link href="../css/' + className + '/' + className + '.css" rel="stylesheet" type="text/css" />').appendTo('head');113	});114	// update Respond.js to parse all themes loaded dynamically115	if (window.respond) {116		respond.update();117	}118	// define the styles for the different main menu configurations119	var mainMenuConfigs = {120		horizontalLeft: '	@media (min-width: 768px) {\n\121		#main-nav {\n\122			line-height: 0;\n\123			text-align: left;\n\124		}\n\125		#main-menu {\n\126			display: inline-block;\n\127		}\n\128	}\n',129		horizontalCenter: '	@media (min-width: 768px) {\n\130		#main-nav {\n\131			line-height: 0;\n\132			text-align: center;\n\133		}\n\134		#main-menu {\n\135			display: inline-block;\n\136		}\n\137	}\n',138		horizontalRight: '	@media (min-width: 768px) {\n\139		#main-nav {\n\140			line-height: 0;\n\141			text-align: right;\n\142		}\n\143		#main-menu {\n\144			display: inline-block;\n\145		}\n\146	}\n',147		horizontalFullwidthLeft: '',148		horizontalFullwidthJustified: '	@media (min-width: 768px) {\n\149		#main-menu > li {\n\150			float: none;\n\151			display: table-cell;\n\152			width: 1%;\n\153			text-align: center;\n\154		}\n\155	}\n',156		vertical: '	@media (min-width: 768px) {\n\157		#main-menu {\n\158			float: left;\n\159			width: 12em;\n\160		}\n\161	}\n',162		verticalRTL: '	@media (min-width: 768px) {\n\163		#main-menu {\n\164			float: right;\n\165			width: 12em;\n\166		}\n\167	}\n'168	};169	// hook theme switcher170	$('#themes-classes, #themes-horizontal, #themes-horizontal-align-left, #themes-horizontal-align-center, #themes-horizontal-align-right, #themes-horizontal-fullwidth, #themes-horizontal-fullwidth-align-justified, #themes-vertical, #themes-rtl').change(function() {171		var $select = $('#themes-classes'),172			$mainMenuCSS = $('#main-menu-css'),173			mainMenuCSS,174			className = $select.val(),175			horizontal = $('#themes-horizontal')[0].checked,176			horizontalLeft = horizontal && $('#themes-horizontal-align-left')[0].checked,177			horizontalCenter = horizontal && $('#themes-horizontal-align-center')[0].checked,178			horizontalRight = horizontal && $('#themes-horizontal-align-right')[0].checked,179			horizontalFullwidth = $('#themes-horizontal-fullwidth')[0].checked,180			horizontalFullwidthLeft = horizontalFullwidth && !$('#themes-horizontal-fullwidth-align-justified')[0].checked,181			horizontalFullwidthJustified = horizontalFullwidth && $('#themes-horizontal-fullwidth-align-justified')[0].checked,182			vertical = $('#themes-vertical')[0].checked,183			rtl = $('#themes-rtl')[0].checked,184			$optionElm = $select.children().eq($select[0].selectedIndex),185			initOptions = $optionElm.data('init-options' + (vertical ? '-vertical' : '')),186			mainMenuClass = 'sm ' + (rtl ? 'sm-rtl ' : '') + (vertical ? 'sm-vertical ' : '') + className;187		if ($mainMenuCSS.length) {188			$mainMenuCSS.remove();189			$mainMenuCSS = null;190		} else {191			// remove the inline style on init192			$('style').eq(0).remove();193		}194		mainMenuCSS = (horizontalLeft ? mainMenuConfigs['horizontalLeft'] :195			horizontalCenter ? mainMenuConfigs['horizontalCenter'] :196			horizontalRight ? mainMenuConfigs['horizontalRight'] :197			horizontalFullwidthLeft ? mainMenuConfigs['horizontalFullwidthLeft'] :198			horizontalFullwidthJustified ? mainMenuConfigs['horizontalFullwidthJustified'] :199			// vertical200			!rtl ? mainMenuConfigs['vertical'] : mainMenuConfigs['verticalRTL']);201		$('<style id="main-menu-css">' + mainMenuCSS + '</style>').appendTo('head');202		// show/hide sub options203		$('#themes-horizontal-align-holder')[horizontal ? 'slideDown' : 'slideUp'](250);204		$('#themes-horizontal-fullwidth-align-holder')[horizontalFullwidth ? 'slideDown' : 'slideUp'](250);205		// switch #main-menu theme206		$menu.smartmenus('destroy')[0].className = mainMenuClass;207		$menu.smartmenus(eval('(' + initOptions + ')'));208		$('html, body').css('background', $optionElm.data('page-bg'));209		// update code samples210		$('span.themes-code-class span, #themes-codepen-theme-name').text(className);211		$('#themes-codepen-url').attr('href', $optionElm.data('codepen-url'));212		$('span.themes-code-main-class span').text(mainMenuClass);213		$('span.themes-code-main-menu-css').text(mainMenuCSS);214		$('span.themes-code-main-menu-css-holder')[mainMenuCSS ? 'show' : 'hide']();215		$('span.themes-code-init-options').text(initOptions);216		// display horizontal justified note if needed217		if ($(this).is('#themes-horizontal-fullwidth-align-justified')) {218			$('label[for="themes-horizontal-fullwidth-align-justified"] small')[this.checked ? 'show' : 'hide']();219		}220		// call any addon init code221		if (window.addonScriptInit) {222			try { eval(window.addonScriptInit); } catch(e) {};223		}224	});225	// init SHJS syntax highlighter226	if (window.sh_highlightDocument) {227		sh_highlightDocument();228	}229});230// load SHJS syntax highlighter231document.write('<scr' + 'ipt type="text/javascript" src="http://shjs.sourceforge.net/sh_main.min.js" defer></scr' + 'ipt>');232document.write('<scr' + 'ipt type="text/javascript" src="http://shjs.sourceforge.net/lang/sh_javascript.js" defer></scr' + 'ipt>');...

horizontal-tabs.js

Source:horizontal-tabs.js

1(function ($) {23/**4 * This script transforms a set of fieldsets into a stack of horizontal5 * tabs. Another tab pane can be selected by clicking on the respective6 * tab.7 *8 * Each tab may have a summary which can be updated by another9 * script. For that to work, each fieldset has an associated10 * 'horizontalTabCallback' (with jQuery.data() attached to the fieldset),11 * which is called every time the user performs an update to a form12 * element inside the tab pane.13 */14Drupal.behaviors.horizontalTabs = {15  attach: function (context) {16    $('.horizontal-tabs-panes', context).once('horizontal-tabs', function () {17      var focusID = $(':hidden.horizontal-tabs-active-tab', this).val();18      var tab_focus;1920      // Check if there are some fieldsets that can be converted to horizontal-tabs21      var $fieldsets = $('> fieldset', this);22      if ($fieldsets.length == 0) {23        return;24      }2526      // Create the tab column.27      var tab_list = $('<ul class="horizontal-tabs-list"></ul>');28      $(this).wrap('<div class="horizontal-tabs clearfix"></div>').before(tab_list);2930      // Transform each fieldset into a tab.31      $fieldsets.each(function (i) {32        var horizontal_tab = new Drupal.horizontalTab({33          title: $('> legend', this).text(),34          fieldset: $(this)35        });36        horizontal_tab.item.addClass('horizontal-tab-button-' + i);37        tab_list.append(horizontal_tab.item);38        $(this)39          .removeClass('collapsible collapsed')40          .addClass('horizontal-tabs-pane')41          .data('horizontalTab', horizontal_tab);42        if (this.id == focusID) {43          tab_focus = $(this);44        }45      });4647      $('> li:first', tab_list).addClass('first');48      $('> li:last', tab_list).addClass('last');4950      if (!tab_focus) {51        // If the current URL has a fragment and one of the tabs contains an52        // element that matches the URL fragment, activate that tab.53        var hash = window.location.hash.replace(/[=%;,\/]/g, "");54        if (hash !== '#' && $(hash, this).length) {55          tab_focus = $(window.location.hash, this).closest('.horizontal-tabs-pane');56        }57        else {58          tab_focus = $('> .horizontal-tabs-pane:first', this);59        }60      }61      if (tab_focus.length) {62        tab_focus.data('horizontalTab').focus();63      }64    });65  }66};6768/**69 * The horizontal tab object represents a single tab within a tab group.70 *71 * @param settings72 *   An object with the following keys:73 *   - title: The name of the tab.74 *   - fieldset: The jQuery object of the fieldset that is the tab pane.75 */76Drupal.horizontalTab = function (settings) {77  var self = this;78  $.extend(this, settings, Drupal.theme('horizontalTab', settings));7980  this.link.click(function () {81    self.focus();82    return false;83  });8485  // Keyboard events added:86  // Pressing the Enter key will open the tab pane.87  this.link.keydown(function(event) {88    if (event.keyCode == 13) {89      self.focus();90      // Set focus on the first input field of the visible fieldset/tab pane.91      $("fieldset.horizontal-tabs-pane :input:visible:enabled:first").focus();92      return false;93    }94  });9596  // Only bind update summary on forms.97  if (this.fieldset.drupalGetSummary) {98    this.fieldset.bind('summaryUpdated', function() {99      self.updateSummary();100    }).trigger('summaryUpdated');101  }102103};104105Drupal.horizontalTab.prototype = {106  /**107   * Displays the tab's content pane.108   */109  focus: function () {110    this.fieldset111      .removeClass('horizontal-tab-hidden')112      .siblings('fieldset.horizontal-tabs-pane')113        .each(function () {114          var tab = $(this).data('horizontalTab');115          tab.fieldset.addClass('horizontal-tab-hidden');116          tab.item.removeClass('selected');117        })118        .end()119      .siblings(':hidden.horizontal-tabs-active-tab')120        .val(this.fieldset.attr('id'));121    this.item.addClass('selected');122    // Mark the active tab for screen readers.123    $('#active-horizontal-tab').remove();124    this.link.append('<span id="active-horizontal-tab" class="element-invisible">' + Drupal.t('(active tab)') + '</span>');125  },126127  /**128   * Updates the tab's summary.129   */130  updateSummary: function () {131    this.summary.html(this.fieldset.drupalGetSummary());132  },133134  /**135   * Shows a horizontal tab pane.136   */137  tabShow: function () {138    // Display the tab.139    this.item.removeClass('horizontal-tab-hidden');140    // Update .first marker for items. We need recurse from parent to retain the141    // actual DOM element order as jQuery implements sortOrder, but not as public142    // method.143    this.item.parent().children('.horizontal-tab-button').removeClass('first')144      .filter(':visible:first').addClass('first');145    // Display the fieldset.146    this.fieldset.removeClass('horizontal-tab-hidden');147    // Focus this tab.148    this.focus();149    return this;150  },151152  /**153   * Hides a horizontal tab pane.154   */155  tabHide: function () {156    // Hide this tab.157    this.item.addClass('horizontal-tab-hidden');158    // Update .first marker for items. We need recurse from parent to retain the159    // actual DOM element order as jQuery implements sortOrder, but not as public160    // method.161    this.item.parent().children('.horizontal-tab-button').removeClass('first')162      .filter(':visible:first').addClass('first');163    // Hide the fieldset.164    this.fieldset.addClass('horizontal-tab-hidden');165    // Focus the first visible tab (if there is one).166    var $firstTab = this.fieldset.siblings('.horizontal-tabs-pane:not(.horizontal-tab-hidden):first');167    if ($firstTab.length) {168      $firstTab.data('horizontalTab').focus();169    }170    return this;171  }172};173174/**175 * Theme function for a horizontal tab.176 *177 * @param settings178 *   An object with the following keys:179 *   - title: The name of the tab.180 * @return181 *   This function has to return an object with at least these keys:182 *   - item: The root tab jQuery element183 *   - link: The anchor tag that acts as the clickable area of the tab184 *       (jQuery version)185 *   - summary: The jQuery element that contains the tab summary186 */187Drupal.theme.prototype.horizontalTab = function (settings) {188  var tab = {};189  var idAttr = settings.fieldset.attr('id');190191  tab.item = $('<li class="horizontal-tab-button" tabindex="-1"></li>')192    .append(tab.link = $('<a href="#' + idAttr + '"></a>')193    .append(tab.title = $('<strong></strong>').text(settings.title))194    );195196  // No need to add summary on frontend.197  if (settings.fieldset.drupalGetSummary) {198    tab.link.append(tab.summary = $('<span class="summary"></span>'))199    }200201  return tab;202};203
...

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withKnobs } from '@storybook/addon-knobs';3import { withInfo } from '@storybook/addon-info';4import { withA11y } from '@storybook/addon-a11y';5import { withOptions } from '@storybook/addon-options';6import { withBackgrounds } from '@storybook/addon-backgrounds';7import { withViewport } from '@storybook/addon-viewport';8addDecorator(withKnobs);9addDecorator(withInfo);10addDecorator(withA11y);11addDecorator(12  withOptions({

Using AI Code Generation

1import { withHorizontal } from 'storybook-addon-root';2import { withVertical } from 'storybook-addon-root';3import { withGrid } from 'storybook-addon-root';4import { withFlex } from 'storybook-addon-root';5import { withInline } from 'storybook-addon-root';6import { withInlineFlex } from 'storybook-addon-root';7import { withInlineBlock } from 'storybook-addon-root';8import { withBlock } from 'storybook-addon-root';9import { withNone } from 'storybook-addon-root';10import { withHidden } from 'storybook-addon-root';11import { withInherit } from 'storybook-addon-root';12import { withInitial } from 'storybook-addon-root';13import { withUnset } from 'storybook-addon-root';14import { withRevert } from 'storybook-addon-root';15import { withCurrentColor } from 'storybook-addon-root';16import { withCaption } from 'storybook-addon-root';17import { withIcon } from 'storybook-addon-root';18import { withMenu } from 'storybook-addon-root';19import { withMessageBox } from 'storybook-addon-root';20import { withSmallCaption } from 'storybook-addon-root';21import { withStatusBar } from 'storybook-addon-root';

Using AI Code Generation

1import { Horizontal } from 'storybook-root';2const Test = () => {3  return (4  );5};6export default Test;7import React from 'react';8import Test from './test';9export default {10};11export const test = () => <Test />;

Using AI Code Generation

1import { addParameters, configure } from '@storybook/react';2addParameters({3  options: {4  },5});6import { addParameters, configure } from '@storybook/react';7addParameters({8  options: {9  },10});11import { addParameters, configure } from '@storybook/react';12addParameters({13  options: {14  },15});16import { addParameters, configure } from '@storybook/react';17addParameters({18  options: {19  },20});21import { addParameters, configure } from '@storybook/react';22addParameters({23  options: {24  },25});26import { addParameters, configure } from '@storybook/react';27addParameters({28  options: {29  },30});31import { addParameters, configure } from '@storybook/react';32addParameters({33  options: {34  },35});36import { addParameters, configure } from '@storybook/react';37addParameters({38  options: {39  },40});41import { addParameters, configure } from '@storybook/react';42addParameters({43  options: {44  },45});46import { addParameters, configure } from '@storybook/react';47addParameters({48  options: {49  },50});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.