Scrollmap - Гісторыя версій

ExtraPaul на 10:15, 24 мая 2020

2020-05-24T10:15:51Z

← Папярэдн. версія		Версія ад 12:15, 24 мая 2020
Радок 20:		Радок 20:
	== How to use Scrollmap ==		== How to use Scrollmap ==

	At first, don't forget to add "ebg/scrollmap" as a dependency:		At first, in the Javascript file, don't forget to add "ebg/scrollmap" as a dependency:
	<pre>		<pre>
	define([		define([

Tutchek: Added navigation

2020-04-15T21:09:15Z

Added navigation

← Папярэдн. версія		Версія ад 23:09, 15 красавіка 2020
Радок 1:		Радок 1:
			{{Studio_Framework_Navigation}}

	Scrollmap is a BGA client side component to display an infinite game area.		Scrollmap is a BGA client side component to display an infinite game area.

Episodic: /* Enable move arrows */ ('../../../img/common/arrows.png') is the correct path

2017-03-10T20:25:55Z

Enable move arrows: ('../../../img/common/arrows.png') is the correct path

← Папярэдн. версія		Версія ад 22:25, 10 сакавіка 2017
Радок 123:		Радок 123:
	display: block;		display: block;
	position: absolute;		position: absolute;
	background-image: url('../../img/common/arrows.png');		background-image: url('../../../img/common/arrows.png');
	width: 32px;		width: 32px;
	height: 32px;		height: 32px;

Een: /* Enable scrollmap zone extension */

2013-04-26T13:57:14Z

Enable scrollmap zone extension

← Папярэдн. версія		Версія ад 15:57, 26 красавіка 2013
Радок 216:		Радок 216:
	<pre>		<pre>
	dojo.connect( $('enlargedisplay'), 'onclick', this, 'onIncreaseDisplayHeight' );		dojo.connect( $('enlargedisplay'), 'onclick', this, 'onIncreaseDisplayHeight' );
			</pre>

			In your view.php file, define the template variable LABEL_ENLARGE_DISPLAY so that it gets substituted with appropriate translatable text:

			<pre>
			$this->tpl['LABEL_ENLARGE_DISPLAY'] = self::_("Enlarge display");
	</pre>		</pre>

Een на 13:53, 26 красавіка 2013

2013-04-26T13:53:16Z

@@ Радок 186: / Радок 186: @@
          dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
          dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
 </pre>

Een на 16:23, 20 красавіка 2013

2013-04-20T16:23:55Z

← Папярэдн. версія		Версія ад 18:23, 20 красавіка 2013
Радок 113:		Радок 113:
	By default, the game area is centered on 0,0 coordinates.		By default, the game area is centered on 0,0 coordinates.

	== ~~Move~~ arrows ==		== Enable move arrows ==

	To show move arrows around the scrollmap to enable click based navigation in addition to drag and drop, add these lines to your CSS		To show move arrows icons around the scrollmap in order to enable click based navigation in addition to drag and drop, add these lines to your CSS:

	<pre>		<pre>
Радок 150:		Радок 150:
	</pre>		</pre>

	~~Then, in~~ your javascript, define the following functions		In your javascript, define the following functions:

	<pre>		<pre>
Радок 182:		Радок 182:

	<pre>		<pre>
	dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );		dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );
	dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );		dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );
	dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );		dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
	dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );		dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
	</pre>		</pre>

Een на 16:13, 20 красавіка 2013

2013-04-20T16:13:01Z

← Папярэдн. версія		Версія ад 18:13, 20 красавіка 2013
Радок 112:		Радок 112:

	By default, the game area is centered on 0,0 coordinates.		By default, the game area is centered on 0,0 coordinates.

			== Move arrows ==

			To show move arrows around the scrollmap to enable click based navigation in addition to drag and drop, add these lines to your CSS

			<pre>
			/ Move arrows /

			#movetop,#moveleft,#moveright,#movedown {
			display: block;
			position: absolute;
			background-image: url('../../img/common/arrows.png');
			width: 32px;
			height: 32px;
			}

			#movetop {
			top: 0px;
			left: 50%;
			background-position: 0px 32px;
			}
			#moveleft {
			top: 50%;
			left: 0px;
			background-position: 32px 0px;
			}
			#moveright {
			top: 50%;
			right: 0px;
			background-position: 0px 0px;
			}
			#movedown {
			bottom: 0px;
			left: 50%;
			background-position: 32px 32px;
			}
			</pre>

			Then, in your javascript, define the following functions

			<pre>
			onMoveTop : function( evt )
			{
			console.log( "onMoveTop" );
			evt.preventDefault();
			this.scrollmap.scroll( 0, 300 );
			},
			onMoveLeft : function( evt )
			{
			console.log( "onMoveLeft" );
			evt.preventDefault();
			this.scrollmap.scroll( 300, 0 );
			},
			onMoveRight : function( evt )
			{
			console.log( "onMoveRight" );
			evt.preventDefault();
			this.scrollmap.scroll( -300, 0 );
			},
			onMoveDown : function( evt )
			{
			console.log( "onMoveDown" );
			evt.preventDefault();
			this.scrollmap.scroll( 0, -300 );
			},
			</pre>

			And connect onclick events on the arrows to these functions in your javascript setup

			<pre>
			dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );
			dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );
			dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
			dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
			</pre>

Een: /* How to use Scrollmap */

2013-04-20T16:08:47Z

How to use Scrollmap

@@ Радок 78: / Радок 78: @@
 #map_footer {
      text-align: center;
+}

Een: /* How to use Scrollmap */

2013-04-20T16:06:32Z

How to use Scrollmap

@@ Радок 79: / Радок 79: @@
      text-align: center;
+}
 </pre>

Sourisdudesert: /* How to use Scrollmap */

2013-04-08T13:00:00Z

How to use Scrollmap

@@ Радок 51: / Радок 51: @@
          <a id="movedown" href="#"></a>
      </div>
 </pre>