In the JSON output, there is a field "maneuver" within a "step". In this "turn-left", "turn-right", "turn-slight-left", etc. Example is here
Where could I find the definition of the "maneuver" field, and the list of possible values? There is no relevant description here
Thanks in advance
Here is a visual for the lazy ones :)
Can't believe Google did not document this yet...
maneuver contains the action to take for the current step (turn left, merge, straight, etc.).
This field is used to determine which icon to display, and can contain one of the following values:
UPD
Believe it or not, but finally they documented it! Please see here.
according to this gmaps-api-issue I think google not in hurry to document this part of api :(
But I can help with this issue at least with following... The "maneuver" field is the short description of step's action. I suppose google's script uses it for applying css classes to direction panel. I noticed that icon for each step depends on css class ".adp-{maneuver_name}". Css file for panel contains 18 classes with that mask and I had extracted list of maneuvers:
turn-sharp-left
uturn-right
turn-slight-right
merge
roundabout-left
roundabout-right
uturn-left
turn-slight-left
turn-left
ramp-right
turn-right
fork-right
straight
fork-left
ferry-train
turn-sharp-right
ramp-left
ferry
During the work I found two additional values of the "maneuver" field, which doesn't have css classes:
keep-left
keep-right
I can't guarantee fullness of this list, but I used this list in my project and it works properly.
when you use directions service, google maps inject some css in your <head>
As of 2015/jun, I've got this code below. It seems google only downloads what it needs to show the directions, so, your results may vary.
Background-image file at the bottom:
.adp-substep .adp-stepicon .adp-maneuver {
background-size: 19px 630px;
position: absolute;
left: 0;
width: 16px;
height: 16px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-ferry {
background-position: 0 -614px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-ferry-train {
background-position: 0 -566px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-merge {
background-position: 0 -143px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-straight {
background-position: 0 -534px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-fork-left {
background-position: 0 -550px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-ramp-left {
background-position: 0 -598px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-roundabout-left {
background-position: 0 -197px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-turn-left {
background-position: 0 -413px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-turn-sharp-left {
background-position: 0 0
}
.adp-substep .adp-stepicon .adp-maneuver.adp-turn-slight-left {
background-position: 0 -378px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-uturn-left {
background-position: 0 -305px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-fork-right {
background-position: 0 -499px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-ramp-right {
background-position: 0 -429px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-roundabout-right {
background-position: 0 -232px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-turn-right {
background-position: 0 -483px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-turn-sharp-right {
background-position: 0 -582px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-turn-slight-right {
background-position: 0 -51px
}
.adp-substep .adp-stepicon .adp-maneuver.adp-uturn-right {
background-position: 0 -35px
}
.adp-substep .adp-stepicon .adp-maneuver {
background-image: url(http://maps.gstatic.com/mapfiles/api-3/images/maneuvers.png);
}
Just take a look on their SDK
https://github.com/googlemaps/google-maps-services-js/blob/master/src/common.ts line 1132
export enum Maneuver {
turn_slight_left = "turn-slight-left",
turn_sharp_left = "turn-sharp-left",
uturn_left = "uturn-left",
turn_left = "turn-left",
turn_slight_right = "turn-slight-right",
turn_sharp_right = "turn-sharp-right",
uturn_right = "uturn-right",
turn_right = "turn-right",
straight = "straight",
ramp_left = "ramp-left",
ramp_right = "ramp-right",
merge = "merge",
fork_left = "fork-left",
fork_right = "fork-right",
ferry = "ferry",
ferry_train = "ferry-train",
roundabout_left = "roundabout-left",
roundabout_right = "roundabout-right"
}
Maneuver contains the action to take for the current step (turn left, merge, straight, etc.). This field is used to determine which icon to display, and can contain one of the following values: turn-slight-left, turn-sharp-left, uturn-left, turn-left, turn-slight-right, turn-sharp-right, uturn-right, turn-right, straight, ramp-left, ramp-right, merge, fork-left, fork-right, ferry, ferry-train, roundabout-left, roundabout-right. Values in this list are subject to change
Below link will help you to find all the images
https://github.com/opentripplanner/OpenTripPlanner/tree/master/src/client/images/directions
Related
I have a working parallax example on Chrome on Codepen. The most important code is here :
body {
height : $body-height;
perspective : #{$perspective}px;
perspective-origin : 0;
-webkit-overflow-scrolling : touch; // Safari fix
}
#at-root body,
.parallax-container {
overflow-x : hidden;
overflow-y : auto;
position : relative;
}
#at-root body {
#at-root .parallax-container {
// position
transform-style : preserve-3d; // to avoid that the intermediary container flattens the effect
// size
height : 100%;
width : 100%;
#at-root {
.background-content,
.foreground-content {
position : relative;
}
.background-content {
transform-origin : 0 0;
transform : translateZ(0) scale(1);
}
div.other-class {
$value : 126;
height : #{$value}px;
bottom : #{-($value + 35)}px;
}
}
}
}
I read a lot of things on parallax and still does not understand what is going wrong here.
I believe I made it work one time, maybe it is a regression, but I cannot find the problem.
Do not hesitate to suggest things for Safari if it does not work on Safari too because I cannot test it on this browser yet.
I am on Firefox 82.0.3 and Chromium 86.0.4240.198 on Ubuntu 20.04.
I love the new CKEditor in Typo3, much better than the old RTE.
But I have an question about its configuration:
Is it possible to increase the width of the dropdowns?
I've tried the tips:
.cke_combo_text { width:auto !important; }
.cke_combopanel { height:600px !important; }
But it doesn't work. Any tips?
Found it!
We are using our own template-distribution.
You have to add in the ext_tables.php
//Overwrite BE-Stylings if needed. e.g. increase the select-width of ckeditor for Inline- / Block-Styles
if( TYPO3_MODE == "BE"){
$GLOBALS['TBE_STYLES']['skins']['backend']['stylesheetDirectories']['[your_ext_key]'] = 'EXT:[your_ext_key]/Resources/Private/Backend/';
}
Then you can add a stylesheet:
eg. typo3conf/ext/[your_ext_key]/Resources/Private/Backend/rte_ckeditor.scss
.cke_combopanel {
min-width: 35rem !important;
.cke_panel_frame {
min-width: 35rem !important;
}
}
When I searched for the icons used by JQGrid, I found single PNG file with all the icons. I am wondering how it can use portion of the image as icon for buttons used in JQGrid.
jqGrid uses icons from jQuery UI Theme. Usage of multiple icons (pictures) in one PNG file is the standard optimization. If one separate icons in multiple files then loading of enery separate file follow long time because of round trip times. Even is multiple files will be loaded parallel (multiple parallel HTTP request) loading of one file is more effectively.
So it you examine jquery-ui.css of jQuery UI (for example here) you will find the following
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_469bdd_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_d8e7f3_256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(images/ui-icons_6da8d5_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url(images/ui-icons_217bc0_256x240.png);
}
.ui-state-active .ui-icon {
background-image: url(images/ui-icons_f9bd01_256x240.png);
}
.ui-state-highlight .ui-icon {
background-image: url(images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_cd0a0a_256x240.png);
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
...
Every row of the body of the grid have the class "ui-widget-content". So the icons will be from the image with the relative URL images/ui-icons_469bdd_256x240.png (see CSS rule for .ui-widget-content .ui-icon):
On the other side the pager have the class "ui-state-default". So the icons will be from the image with the relative URL images/ui-icons_6da8d5_256x240.png (see CSS rule for .ui-state-default .ui-icon) and so on.
So all icons will be loaded from one file. All icon have the same height and the width 16px, but different icons have different background-position. So different 16x16 px parts of the index will be used.
The optimization method have the name Image Sprites. You can read about it here. There are some server solution which allows to combine many images (PNG and GIF images, but not JPG) referenced from a CSS file into a single large image on the fly on the server (see here). There are also places in Internet (like here) which allows you to upload multiple files and to get one combined image. In any way the solution is very old already and it will be intensively used by web developers.
Below is one page of a Joomla 1.5 extension another developer created quickly that ultimately works like the core Joomla Related Articles but a bit more custom. The code is not very pretty but it works. It shows the title and date for the latest 5 articles that are tagged with the same tag on the current page being viewed. The only problem is it shows articles from 2013 and 2012, since there are only a couple 2013 articles. So ultimately it should show 5 related items only from the current year. So if its 2013 (which it is), and there are only 4 articles from 2013 it should only show those 4.
On the line: for($y=2001; $y <= $intYear; $y++) I tried changing 2001 to 2013 but didn't change anything on the front end. Tried changing to 2014 and didn't change anything either.
The other option I was thinking was on the line: $objDb->setQuery("SELECT sectionid, catid, title if there was a way to say WHERE created='$currentYear' kind of thing.
Once again the code is not pretty and imagine the performance not so great, but looking for a quick fix to this issue, until the whole module can be replaced with a better solution later on. Any help would be most appreaciated!
<?php
// Include the syndicate functions only once
//require_once (dirname(__FILE__).DS.'helper.php');
//
//$list = modRelatedItemsHelper::getList($params);
//
//if (!count($list)) {
// return;
//}
//
//$showDate = $params->get('showDate', 0);
//
//require(JModuleHelper::getLayoutPath('mod_related_items'));
// no direct access
defined('_JEXEC') or die('Restricted access');
// Include the syndicate functions only once
include_once( dirname(__FILE__).DS.'helper.php' );
if( !defined('NL') )
{ define('NL', "\n"); }
$prmRptShowFilter=$params->get('rpt_show_filter');
$prmRptSection=$params->get('rpt_section');
$prmRptCategory=$params->get('rpt_category');
$prmRptDateFormat=$params->get('rpt_date_format');
$arrMonths=array();
$arrMonths[1]='January';
$arrMonths[2]='February';
$arrMonths[3]='March';
$arrMonths[4]='April';
$arrMonths[5]='May';
$arrMonths[6]='June';
$arrMonths[7]='July';
$arrMonths[8]='August';
$arrMonths[9]='September';
$arrMonths[10]='October';
$arrMonths[11]='November';
$arrMonths[12]='December';
$arrYears=array();
$intYear=date(Y);
for($y=2001; $y <= $intYear; $y++)
{ $arrYears[]=$y; }
$varArticleId=JRequest::getVar('id');
$objDb=&JFactory::getDBO();
//--- Database Script ---//
$objDb->setQuery("SELECT sectionid, catid, title FROM #__content WHERE id='$varArticleId' LIMIT 1");
$rows=$objDb->loadObjectList();
$section_id=$rows[0]->sectionid;
$cat_id=$rows[0]->catid;
//--- Database Script ---//
$arrList=modGtSidebarCustomHelper::getList($params);
?>
<style type="text/css">
#idForm1 {
float: right;
}
#idForm1 ul {
margin: 0;
padding: 0;
list-style: none;
clear: both;
}
#idForm1 li {
float: left;
margin: 0 1px 0 0;
padding: 0;
}
#idGtReportDisplayB {
text-align:left;
margin:3px 5px;
}
#idGtReportDisplayB a:hover {
text-decoration: underline;
font-weight: normal;
}
#idGtReportDisplayB span.zoom-link {
display: none;
}
#idGtReportDisplayB dl,
#idGtReportDisplayB dl dt,
#idGtReportDisplayB dl dd {
padding: 0px 5px 0px 5px;
margin: 0;
}
#idGtReportDisplayB dd {
color: #680e0e;
}
#idGtReportDisplayB dl {
width: 284px;
padding-bottom: 15px;
}
#idNoRelatedLatestNews {
display: none;
}
</style>
<div id="idGtReportDisplayB">
<?php
$strDisplay='';
$prmRptDateFormat='n/j/Y';
if( !empty($arrList) )
{
$strDisplay.='<h2>Recent News</h2>'. NL;
$numSize=sizeof($arrList);
for($x=0; ($x < $numSize) && ($x <= 5); $x++)
{
$tmpDtm=strtotime($arrList[$x]->created);
$strDisplay.='<dl>'. NL;
$strDisplay.=' <dt>'. $arrList[$x]->title .'</dt>'. NL;
$strDisplay.=' <dd>'. date($prmRptDateFormat, $tmpDtm) .'</dd>'. NL;
$strDisplay.='</dl>'. NL;
}
echo($strDisplay);
}
else
{
# include( dirname(__FILE__).DS.'..'.DS.'mod_latestnews'.DS.'mod_latestnews.php' );
?>
<style type="text/css">
#idNoRelatedLatestNews {
display: block;
}
</style>
<?
}
?>
</ul>
</div>
Try something like,
$current_year = date('Y');
$objDb->setQuery("SELECT sectionid, catid, title FROM #__content WHERE id='$varArticleId' AND YEAR(created_on) = $current_year ");
It will load only current year data ..
Since there wasn't much of any response from the community on this one, I ultimately created a hack that resolved the issue for now. In which I added the article year as the class name to each dl and then through css just hid the old year I didn't want. While not ideal it works and hopefully will be replacing all the code soon enough anyway.
I have a DatePicker widget for which i need to apply the custom styles for it. To achive it, what i have done is, in applications main css file, I have added the css styles as below
.dRPLable {
font-size: 10px;
font-weight: bold;
color: gray;
}
.dRPBtn {
background-color: #38B0DE;
background: #38B0DE;
color: white;
}
.dRPLB {
background: #EEEEEE;
}
.dRPPopup {
width: 8em;
height: 2em;
}
.mycal .datePickerPreviousButton { visibility: visible; color: gray; }
.mycal .datePickerNextButton { visibility: visible; color: gray; }
.mycal .datePickerWeekdayLabel{background: white;}
.mycal .datePickerMonthSelector { background: white; }
.mycal .datePickerMonth { background: white;color: orange;}
.mycal .datePickerWeekendLabel{background: white;}
.mycal .datePickerDayIsValue { background: orange;}
.mycal .datePickerDayIsWeekend { background: #D9D9D9;}
Then everything is applying perfectly
I am making it as a independent custom widget, for that i have created a separate css file.
To access it I have created a resources interface as below,
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.ImageResource;
public interface DateRangeTypePickerResources extends ClientBundle {
DateRangeTypePickerResources INSTANCE = GWT
.create(DateRangeTypePickerResources.class);
/*
* #Source("DocumentImg.jpg") ImageResource getDocumentImg();
*/
#Source("down.png")
ImageResource getDownImg();
#Source("up.png")
ImageResource getUpImg();
public interface DateRangeTypePickerCssStyle extends CssResource {
String dRPLable();
String dRPBtn();
String dRPLB();
String mycal();
String dRPPopup();
String datePickerPreviousButton();
String datePickerNextButton();
String datePickerWeekdayLabel();
String datePickerWeekendLabel();
String datePickerMonthSelector();
String datePickerMonth();
String datePickerDayIsValue();
String datePickerDayIsWeekend();
}
#Source("../widget/DateRangeTypePicker.css")
DateRangeTypePickerCssStyle DateRangeTypePickerCss();
}
How i am accessing those methods as below
public class DateRangePicker extends Composite {
static DateRangeTypePickerResources resources = GWT
.create(DateRangeTypePickerResources.class);
DateRangeTypePickerCssStyle css = DateRangeTypePickerResources.INSTANCE
.DateRangeTypePickerCss();
static {
DateRangeTypePickerResources.INSTANCE.DateRangeTypePickerCss()
.ensureInjected();
}
public DateRangePicker(DateRangePickerModel dateRangePickerModel) {
Label startDateLabel = new Label("Start Date");
startDtToday.setStylePrimaryName(css.dRPLabel());
flexTable.setWidget(0, 0, startDateLabel);
DatePicker startDatePicker = new DatePicker();
startDatePicker.setStyleName(css.mycal());
}
}
Here style is applying for Label. But Style is not applying for DatePicker.
How can i apply the custom style to DatePicker from the CssResources class?
Before posting such a huge and repeated question search if the question is already asked or not... There are many similar question to it.
And the answer for your question is in the following link
ClickHere