Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-73387

AUI Carousel cannot be controlled via keyboard

    Details

      Description

      Description
      AUI Carousel cannot be controlled via keyboard

      Steps to reproduce/Testing done

      1. Start Liferay and login as admin
      2. Go to Control Panel > Content > Web Content
      3. Add a new structure with the following contents:
        <root available-locales="en_US" default-locale="en_US">
        	<dynamic-element dataType="string" indexType="" localizable="true" multiple="false" name="duration" readOnly="false" repeatable="false" required="false" showLabel="true" type="select" width="">
        		<dynamic-element name="optionnmyt" type="option" value="1">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[1]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionoqfc" type="option" value="2">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[2]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionpcvk" type="option" value="3">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[3]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optioncvsp" type="option" value="4">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[4]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionswnz" type="option" value="5">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[5]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionbanm" type="option" value="6">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[6]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionhqvo" type="option" value="7">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[7]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionwoec" type="option" value="8">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[8]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionysii" type="option" value="9">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[9]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element name="optionwhkq" type="option" value="10">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[10]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<meta-data locale="en_US">
        			<entry name="label">
        				<![CDATA[Item Duration]]>
        			</entry>
        			<entry name="predefinedValue">
        				<![CDATA[[]]]>
        			</entry>
        			<entry name="tip">
        				<![CDATA[Select how long, in seconds, you would prefer to display an item before switching to the next slide]]>
        			</entry>
        		</meta-data>
        	</dynamic-element>
        	<dynamic-element dataType="string" indexType="keyword" localizable="true" name="width" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
        		<meta-data locale="en_US">
        			<entry name="label">
        				<![CDATA[width]]>
        			</entry>
        			<entry name="predefinedValue">
        				<![CDATA[]]>
        			</entry>
        			<entry name="tip">
        				<![CDATA[]]>
        			</entry>
        		</meta-data>
        	</dynamic-element>
        	<dynamic-element dataType="string" indexType="keyword" localizable="true" name="height" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
        		<meta-data locale="en_US">
        			<entry name="label">
        				<![CDATA[height]]>
        			</entry>
        			<entry name="predefinedValue">
        				<![CDATA[]]>
        			</entry>
        			<entry name="tip">
        				<![CDATA[]]>
        			</entry>
        		</meta-data>
        	</dynamic-element>
        	<dynamic-element dataType="boolean" indexType="keyword" localizable="true" name="carousel_block" readOnly="false" repeatable="true" required="false" showLabel="true" type="checkbox" width="">
        		<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" localizable="true" name="carousel_desktop_image" readOnly="false" repeatable="false" required="false" showLabel="true" type="wcm-image" width="">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[carousel desktop image]]>
        				</entry>
        				<entry name="predefinedValue">
        					<![CDATA[]]>
        				</entry>
        				<entry name="tip">
        					<![CDATA[]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" localizable="true" name="carousel_mobile_image" readOnly="false" repeatable="false" required="false" showLabel="true" type="wcm-image" width="">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[carousel mobile image]]>
        				</entry>
        				<entry name="predefinedValue">
        					<![CDATA[]]>
        				</entry>
        				<entry name="tip">
        					<![CDATA[]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="carousel_title" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[carousel title]]>
        				</entry>
        				<entry name="predefinedValue">
        					<![CDATA[]]>
        				</entry>
        				<entry name="tip">
        					<![CDATA[]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="carousel_desc" readOnly="false" repeatable="false" required="false" showLabel="true" type="textarea" width="small">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[carousel desc]]>
        				</entry>
        				<entry name="predefinedValue">
        					<![CDATA[]]>
        				</entry>
        				<entry name="tip">
        					<![CDATA[]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="carousel_link_text" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[carousel link text]]>
        				</entry>
        				<entry name="predefinedValue">
        					<![CDATA[]]>
        				</entry>
        				<entry name="tip">
        					<![CDATA[]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element dataType="link-to-page" fieldNamespace="ddm" indexType="keyword" localizable="true" name="carousel_link" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-link-to-page" width="small">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[carousel link]]>
        				</entry>
        				<entry name="predefinedValue">
        					<![CDATA[]]>
        				</entry>
        				<entry name="tip">
        					<![CDATA[]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="Third_Party_Link" readOnly="false" repeatable="false" required="false" showLabel="true" type="textarea" width="small">
        			<meta-data locale="en_US">
        				<entry name="label">
        					<![CDATA[Third Party Link]]>
        				</entry>
        				<entry name="predefinedValue">
        					<![CDATA[]]>
        				</entry>
        				<entry name="tip">
        					<![CDATA[]]>
        				</entry>
        			</meta-data>
        		</dynamic-element>
        		<meta-data locale="en_US">
        			<entry name="label">
        				<![CDATA[carousel block]]>
        			</entry>
        			<entry name="predefinedValue">
        				<![CDATA[false]]>
        			</entry>
        			<entry name="tip">
        				<![CDATA[]]>
        			</entry>
        		</meta-data>
        	</dynamic-element>
        </root>
        
      1. Add a new velocity template with the following contents:
        <style type="text/css" media="screen">
          #common-carousel {
            height: $height.getData()px;
            position: relative;
            //width: $width.getData()px;
          }
          #common-carousel .carousel-item.carousel-item-active {
            display: block;
          }
          #common-carousel .carousel-item {
            display: none;
            height: $height.getData()px;
            overflow: hidden;
            width: 100%;
            position: absolute;
            top: 0;
          }
        </style>
        
        <div id="common-carousel">
          #if (!$carousel_block.getSiblings().isEmpty())
          #foreach ($cur_carousel_block in $carousel_block.getSiblings())
          <div class="carousel-item">
            
            <style>
              .aui .common-carousel-inner {
                background-image: url($cur_carousel_block.carousel_desktop_image.getData());
              }
              @media (max-width: 767px) {
                .aui .common-carousel-inner {
                  background-image: url($cur_carousel_block.carousel_mobile_image.getData())
                }
              }
              
              .aui.ie8 .common-carousel-inner {
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$cur_carousel_block.carousel_mobile_image.getData()', sizingMethod='scale');
                -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$cur_carousel_block.carousel_mobile_image.getData()', sizingMethod='scale')";
                background-image: none;
              }    
              
            </style>
        		
            <div class="common-carousel-inner">
              <div class="common-carousel-portlet">
                <div class="common-carousel-portlet-content">
                  <div class="common-carousel-portlet-mobile">
                    <h4 class="inversed">
                      $cur_carousel_block.carousel_title.getData()
                    </h4>
                    <div class="copy">
                      <p>
                        $cur_carousel_block.carousel_desc.getData()
                      </p>
                      #if($cur_carousel_block.carousel_link_text.getData() != "")
                          <p class="btn-block">
                            <a href="$cur_carousel_block.Third_Party_Link.getData()" class="btn btn-blue" target="_blank">
                              $cur_carousel_block.carousel_link_text.getData() 
                            </a>
                          </p>
                      #end
                    </div>            
                  </div>          
                </div>
              </div>
            </div>
          </div>
          #end
          #end
        </div>
        <script type="text/javascript">
          
          AUI().ready(
            'aui-carousel',
            function(A) {
              
              new A.Carousel(
                {
                  contentBox: '#common-carousel',
                  intervalTime: $duration.getData(),
                  activeIndex: 0,
                  height: $height.getData(),
                  width: '100%',
                  pauseOnHover: true,
                  imageAnim: false
                }
              ).render();
            }
          );
          
          
        </script>
        
      1. Create a new web content article with the above structure/template
      2. Add it to a page
      3. Notice that the Carousel controls can't be used with the keyboard

      Results of Testing
      Expected behavior: Carousel can be controlled with the keyboard
      Actual behavior: Carousel cannot be controlled with the keyboard

      Errors/Logs
      n/a

      Reproduced...
      Reproduced in trunk? Unable to test; different structure format used
      Reproduced in branch? Yes (2240b96f42b3a773d913dda960fe363929d30ac0)

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                hong.zhao Hong Zhao
                Reporter:
                jonathan.mak Jonathan Mak
                Participants of an Issue:
                Recent user:
                Csaba Turcsan
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Days since last comment:
                  2 years, 16 weeks, 6 days ago

                  Packages

                  Version Package
                  6.2.X EE
                  7.0.0 DXP FP23
                  7.0.X EE
                  7.0.4 CE GA5
                  7.1.X
                  Master