Merge branch 'master' into 8-merge
Conflicts: docs/gotcha.txt docs/upgrades/upgrade_7.9.8-7.9.9.pl lib/WebGUI.pm lib/WebGUI/Asset.pm lib/WebGUI/Asset/Template.pm lib/WebGUI/Asset/Wobject/Calendar.pm lib/WebGUI/Asset/Wobject/Carousel.pm t/Asset/Asset.t t/Mail/Send.t t/Session/Url.t t/lib/WebGUI/Test.pm
This commit is contained in:
Doug Bell
commit
cd1e450c32
1229 changed files with 499 additions and 313891 deletions
|
|
@ -1,6 +1,20 @@
|
|||
7.9.10
|
||||
|
||||
7.9.9
|
||||
- fixed #11693: Shopping cart does not show for visitor user
|
||||
- fixed: missing per-item template variables for the cart.
|
||||
- fixed #11696: WebGUI 7.9.8 gotcha
|
||||
- fixed #11698: Trash dies on missing or bad workflow
|
||||
- fixed #11692: Dates not imported correctly into Thingy
|
||||
- fixed #11672: UTF-Error in message body (from DataForm)
|
||||
- fixed #11709: Shop - i18n error
|
||||
- fixed #11710: Weird license in json.js might be taken as non free
|
||||
- fixed #11708: Activity DeleteExpiredSessions is too slow
|
||||
- fixed #11621: Documentation Error: Methods that accept URLs should indicate whether or not to include Gateway
|
||||
- fixed #11457: Carousel broken
|
||||
- fixed #11455: Wrong use of Extras macro?
|
||||
- fixed #11715: "Empty" user profile fields: not in userProfileData / cannot delete
|
||||
- fixed #11718: Matrix does not URI encode search parameters
|
||||
|
||||
7.9.8
|
||||
- fixed #11651: First Day of Week is a string...
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,7 @@ upgrading from one version to the next, or even between multiple
|
|||
versions. Be sure to heed the warnings contained herein as they will
|
||||
save you many hours of grief.
|
||||
|
||||
<<<<<<< HEAD
|
||||
8.0.0
|
||||
--------------------------------------------------------------------
|
||||
* WebGUI 8 is not API compatible with WebGUI 7. If you have custom
|
||||
|
|
@ -16,6 +17,11 @@ save you many hours of grief.
|
|||
* WebGUI now requires the following modules
|
||||
- Moose
|
||||
- CHI
|
||||
=======
|
||||
7.9.8
|
||||
--------------------------------------------------------------------
|
||||
* Starting in WebGUI 7.9.4, the Net::Twitter module is required.
|
||||
>>>>>>> master
|
||||
|
||||
7.9.7
|
||||
--------------------------------------------------------------------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
docs/upgrades/packages-7.9.9/matrix-search-template.wgpkg
Normal file
BIN
docs/upgrades/packages-7.9.9/matrix-search-template.wgpkg
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
docs/upgrades/packages-7.9.9/stockdatatmpl000000001.wgpkg
Normal file
BIN
docs/upgrades/packages-7.9.9/stockdatatmpl000000001.wgpkg
Normal file
Binary file not shown.
|
|
@ -22,6 +22,7 @@ use Getopt::Long;
|
|||
use WebGUI::Session;
|
||||
use WebGUI::Storage;
|
||||
use WebGUI::Asset;
|
||||
use WebGUI::ProfileField;
|
||||
|
||||
|
||||
my $toVersion = '7.9.9';
|
||||
|
|
@ -32,6 +33,9 @@ my $session = start(); # this line required
|
|||
|
||||
# upgrade functions go here
|
||||
migrateAttachmentsToJson( $session );
|
||||
addIndexToUserSessionLog($session);
|
||||
addHeightToCarousel($session);
|
||||
synchronizeUserProfileTables($session);
|
||||
|
||||
finish($session); # this line required
|
||||
|
||||
|
|
@ -45,6 +49,42 @@ finish($session); # this line required
|
|||
# print "DONE!\n" unless $quiet;
|
||||
#}
|
||||
|
||||
#----------------------------------------------------------------------------
|
||||
# Describe what our function does
|
||||
sub addIndexToUserSessionLog {
|
||||
my $session = shift;
|
||||
print "\tAdd index to UserSessionLogTable... " unless $quiet;
|
||||
$session->db->write(q|alter table userLoginLog add index sessionId (sessionId)|);
|
||||
print "DONE!\n" unless $quiet;
|
||||
}
|
||||
|
||||
#----------------------------------------------------------------------------
|
||||
# Describe what our function does
|
||||
sub addHeightToCarousel {
|
||||
my $session = shift;
|
||||
print "\tAdd slide height to Carousel... " unless $quiet;
|
||||
$session->db->write(q|alter table Carousel add column slideHeight int(11)|);
|
||||
print "DONE!\n" unless $quiet;
|
||||
}
|
||||
|
||||
#----------------------------------------------------------------------------
|
||||
# Describe what our function does
|
||||
sub synchronizeUserProfileTables {
|
||||
my $session = shift;
|
||||
print "\tMake sure that userProfileField, and userProfileData tables are aligned correctly... " unless $quiet;
|
||||
my $dbh = $session->db->dbh;
|
||||
my $fields = WebGUI::ProfileField->getFields($session);
|
||||
foreach my $field ( @{ $fields } ) {
|
||||
my $columnInfo = $dbh->column_info(undef, undef, 'userProfileData', $field->getId)->fetchrow_hashref();
|
||||
if (! $columnInfo) {
|
||||
printf "\n\t\tDeleting broken field: %s", $field->getId;
|
||||
$session->db->deleteRow('userProfileField', 'fieldName', $field->getId);
|
||||
}
|
||||
}
|
||||
|
||||
print " ...DONE!\n" unless $quiet;
|
||||
}
|
||||
|
||||
#----------------------------------------------------------------------------
|
||||
# Move Template attachments to JSON collateral
|
||||
sub migrateAttachmentsToJson {
|
||||
|
|
@ -132,6 +172,7 @@ sub start {
|
|||
sub finish {
|
||||
my $session = shift;
|
||||
updateTemplates($session);
|
||||
migrateAttachmentsToJson( $session );
|
||||
my $versionTag = WebGUI::VersionTag->getWorking($session);
|
||||
$versionTag->commit;
|
||||
$session->db->write("insert into webguiVersion values (".$session->db->quote($toVersion).",'upgrade',".time().")");
|
||||
|
|
|
|||
123
docs/upgrades/upgrade_7.9.9-7.9.10.pl
Normal file
123
docs/upgrades/upgrade_7.9.9-7.9.10.pl
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
#!/usr/bin/env perl
|
||||
|
||||
#-------------------------------------------------------------------
|
||||
# WebGUI is Copyright 2001-2009 Plain Black Corporation.
|
||||
#-------------------------------------------------------------------
|
||||
# Please read the legal notices (docs/legal.txt) and the license
|
||||
# (docs/license.txt) that came with this distribution before using
|
||||
# this software.
|
||||
#-------------------------------------------------------------------
|
||||
# http://www.plainblack.com info@plainblack.com
|
||||
#-------------------------------------------------------------------
|
||||
|
||||
our ($webguiRoot);
|
||||
|
||||
BEGIN {
|
||||
$webguiRoot = "../..";
|
||||
unshift (@INC, $webguiRoot."/lib");
|
||||
}
|
||||
|
||||
use strict;
|
||||
use Getopt::Long;
|
||||
use WebGUI::Session;
|
||||
use WebGUI::Storage;
|
||||
use WebGUI::Asset;
|
||||
|
||||
|
||||
my $toVersion = '7.9.10';
|
||||
my $quiet; # this line required
|
||||
|
||||
|
||||
my $session = start(); # this line required
|
||||
|
||||
# upgrade functions go here
|
||||
|
||||
finish($session); # this line required
|
||||
|
||||
|
||||
#----------------------------------------------------------------------------
|
||||
# Describe what our function does
|
||||
#sub exampleFunction {
|
||||
# my $session = shift;
|
||||
# print "\tWe're doing some stuff here that you should know about... " unless $quiet;
|
||||
# # and here's our code
|
||||
# print "DONE!\n" unless $quiet;
|
||||
#}
|
||||
|
||||
|
||||
# -------------- DO NOT EDIT BELOW THIS LINE --------------------------------
|
||||
|
||||
#----------------------------------------------------------------------------
|
||||
# Add a package to the import node
|
||||
sub addPackage {
|
||||
my $session = shift;
|
||||
my $file = shift;
|
||||
|
||||
print "\tUpgrading package $file\n" unless $quiet;
|
||||
# Make a storage location for the package
|
||||
my $storage = WebGUI::Storage->createTemp( $session );
|
||||
$storage->addFileFromFilesystem( $file );
|
||||
|
||||
# Import the package into the import node
|
||||
my $package = eval {
|
||||
my $node = WebGUI::Asset->getImportNode($session);
|
||||
$node->importPackage( $storage, {
|
||||
overwriteLatest => 1,
|
||||
clearPackageFlag => 1,
|
||||
setDefaultTemplate => 1,
|
||||
} );
|
||||
};
|
||||
|
||||
if ($package eq 'corrupt') {
|
||||
die "Corrupt package found in $file. Stopping upgrade.\n";
|
||||
}
|
||||
if ($@ || !defined $package) {
|
||||
die "Error during package import on $file: $@\nStopping upgrade\n.";
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
#-------------------------------------------------
|
||||
sub start {
|
||||
my $configFile;
|
||||
$|=1; #disable output buffering
|
||||
GetOptions(
|
||||
'configFile=s'=>\$configFile,
|
||||
'quiet'=>\$quiet
|
||||
);
|
||||
my $session = WebGUI::Session->open($webguiRoot,$configFile);
|
||||
$session->user({userId=>3});
|
||||
my $versionTag = WebGUI::VersionTag->getWorking($session);
|
||||
$versionTag->set({name=>"Upgrade to ".$toVersion});
|
||||
return $session;
|
||||
}
|
||||
|
||||
#-------------------------------------------------
|
||||
sub finish {
|
||||
my $session = shift;
|
||||
updateTemplates($session);
|
||||
my $versionTag = WebGUI::VersionTag->getWorking($session);
|
||||
$versionTag->commit;
|
||||
$session->db->write("insert into webguiVersion values (".$session->db->quote($toVersion).",'upgrade',".time().")");
|
||||
$session->close();
|
||||
}
|
||||
|
||||
#-------------------------------------------------
|
||||
sub updateTemplates {
|
||||
my $session = shift;
|
||||
return undef unless (-d "packages-".$toVersion);
|
||||
print "\tUpdating packages.\n" unless ($quiet);
|
||||
opendir(DIR,"packages-".$toVersion);
|
||||
my @files = readdir(DIR);
|
||||
closedir(DIR);
|
||||
my $newFolder = undef;
|
||||
foreach my $file (@files) {
|
||||
next unless ($file =~ /\.wgpkg$/);
|
||||
# Fix the filename to include a path
|
||||
$file = "packages-" . $toVersion . "/" . $file;
|
||||
addPackage( $session, $file );
|
||||
}
|
||||
}
|
||||
|
||||
#vim:ft=perl
|
||||
|
|
@ -1829,8 +1829,6 @@ properties in the database, but creates a WebGUI::Asset object.
|
|||
|
||||
A hash reference of properties to assign to the object.
|
||||
|
||||
=cut
|
||||
|
||||
=head2 new ( session, assetId [,revisionDate ] )
|
||||
|
||||
Instanciator. This does not create an asset in the database, but looks up the object's
|
||||
|
|
@ -2048,8 +2046,6 @@ The height of the iframe. Required for making widget-in-widget function properly
|
|||
The templateId for this widgetized asset to use. Required for making
|
||||
widget-in-widget function properly.
|
||||
|
||||
=cut
|
||||
|
||||
=head3 styleTemplateId
|
||||
|
||||
The style templateId for this widgetized asset to use. Not required for making
|
||||
|
|
@ -2486,7 +2482,23 @@ sub write {
|
|||
|
||||
Returns the asset's url without any site specific prefixes. If you want a browser friendly url see the getUrl() method.
|
||||
|
||||
=head3 value
|
||||
# set the property
|
||||
if ($propertyDefinition->{serialize}) {
|
||||
# Only serialize references
|
||||
if ( ref $value ) {
|
||||
$setPairs{$property} = JSON->new->canonical->encode($value);
|
||||
}
|
||||
# Passing already serialized JSON string
|
||||
elsif ( $value ) {
|
||||
$setPairs{$property} = $value;
|
||||
$value = JSON->new->decode( $value ); # for setting in _properties, below
|
||||
}
|
||||
}
|
||||
else {
|
||||
$setPairs{$property} = $value;
|
||||
}
|
||||
$self->{_properties}{$property} = $value;
|
||||
}
|
||||
|
||||
The new value to set the URL to.
|
||||
|
||||
|
|
|
|||
|
|
@ -449,14 +449,15 @@ sub getParser {
|
|||
|
||||
=head2 importAssetCollateralData ( data )
|
||||
|
||||
Override to import attachments
|
||||
Override to import attachments from old versions of WebGUI
|
||||
|
||||
=cut
|
||||
|
||||
override importAssetCollateralData => sub {
|
||||
my ( $self, $data, @args ) = @_;
|
||||
$self->removeAttachments;
|
||||
$self->addAttachments( $data->{template_attachments} );
|
||||
if ( $data->{template_attachments} ) {
|
||||
$self->update( { attachmentsJson => $data->{template_attachments} } );
|
||||
}
|
||||
return super();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -241,13 +241,11 @@ sub _listViewPageInterval_builder {
|
|||
}
|
||||
|
||||
property icalFeeds => (
|
||||
fieldType => "JsonTable",
|
||||
default => sub { return []; },
|
||||
traits => ['Array', 'WebGUI::Definition::Meta::Property::Serialize',],
|
||||
isa => 'WebGUI::Type::JSONArray',
|
||||
coerce => 1,
|
||||
fieldType => "JsonTable",
|
||||
defaultValue => [],
|
||||
serialize => 1,
|
||||
traits => ['Array', 'WebGUI::Definition::Meta::Property::Serialize',],
|
||||
tab => "feeds",
|
||||
label => ['feeds','Asset_Calendar'],
|
||||
fields => [
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ $VERSION = "1.0.0";
|
|||
use strict;
|
||||
use JSON;
|
||||
use WebGUI::International;
|
||||
use WebGUI::Utility;
|
||||
use Moose;
|
||||
use WebGUI::Definition::Asset;
|
||||
extends 'WebGUI::Asset::Wobject';
|
||||
|
|
@ -37,6 +38,13 @@ property slideWidth => (
|
|||
hoverHelp => [ 'carousel slideWidth description', 'Asset_Carousel' ],
|
||||
label => [ 'carousel slideWidth label', 'Asset_Carousel' ],
|
||||
);
|
||||
property slideHeight => (
|
||||
fieldType => "integer",
|
||||
default => 0,
|
||||
tab => "display",
|
||||
hoverHelp => ['carousel slideHeight description', 'Asset_Carousel' ],
|
||||
label => ['carousel slideHeight label', 'Asset_Carousel' ],
|
||||
);
|
||||
property items => (
|
||||
noFormPost => 1,
|
||||
fieldType => 'text',
|
||||
|
|
|
|||
|
|
@ -2843,7 +2843,7 @@ sub www_import {
|
|||
my $fieldType = $insertColumn->{fieldType};
|
||||
my $fieldInOtherThingId = $insertColumn->{fieldInOtherThingId};
|
||||
# TODO: process dates and otherThing field id's
|
||||
if ($fieldType eq "date" || $fieldType eq "dateTime"){
|
||||
if (lc $fieldType eq "date" || lc $fieldType eq "datetime"){
|
||||
$fieldValue =~ s/\//-/gx;
|
||||
$fieldValue = $session->datetime->setToEpoch($fieldValue);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -555,7 +555,7 @@ sub exportGetDescendants {
|
|||
|
||||
=head2 exportGetUrlAsPath ( index )
|
||||
|
||||
Translates a URL into an appropriate path and filename for exporting. For
|
||||
Translates an asset's URL into an appropriate path and filename for exporting. For
|
||||
example, given C<'/foo/bar/baz'>, will return C<'/foo/bar/baz/index.html'>
|
||||
provided the value of indexFile as given to exportAsHtml was C<'index.html'>.
|
||||
|
||||
|
|
|
|||
|
|
@ -299,11 +299,16 @@ sub _invokeWorkflowOnExportedFiles {
|
|||
if ($workflowId) {
|
||||
my ($lastExportedAs) = $self->get("lastExportedAs");
|
||||
my $wfInstance = WebGUI::Workflow::Instance->create($self->session, { workflowId => $workflowId });
|
||||
$wfInstance->setScratch(
|
||||
WebGUI::Workflow::Activity::DeleteExportedFiles::DELETE_FILES_SCRATCH() =>
|
||||
Storable::freeze([ defined($lastExportedAs) ? ($lastExportedAs) : () ])
|
||||
);
|
||||
$wfInstance->start(1);
|
||||
if ($wfInstance) {
|
||||
$wfInstance->setScratch(
|
||||
WebGUI::Workflow::Activity::DeleteExportedFiles::DELETE_FILES_SCRATCH() =>
|
||||
Storable::freeze([ defined($lastExportedAs) ? ($lastExportedAs) : () ])
|
||||
);
|
||||
$wfInstance->start(1);
|
||||
}
|
||||
else {
|
||||
$self->session->log->warn('The Purge Workflow from the settings has been deleted and cannot be run.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ our $HELP = {
|
|||
],
|
||||
},
|
||||
{ 'name' => 'slideWidth', },
|
||||
{ 'name' => 'slideHeight', },
|
||||
],
|
||||
related => [],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -98,8 +98,9 @@ Macros in the footer will be evaluated.
|
|||
sub addFooter {
|
||||
my $self = shift;
|
||||
return if $self->{_footerAdded};
|
||||
my $text = "\n\n".$self->session->setting->get("mailFooter");
|
||||
WebGUI::Macro::process($self->session, \$text);
|
||||
my $footer = "\n\n".$self->session->setting->get("mailFooter");
|
||||
WebGUI::Macro::process($self->session, \$footer);
|
||||
my $text = encode("utf8", $footer);
|
||||
$self->{_footerAdded} = 1;
|
||||
my @parts = $self->getMimeEntity->parts();
|
||||
##No parts yet, add one with the footer content.
|
||||
|
|
@ -117,7 +118,7 @@ sub addFooter {
|
|||
Charset => "UTF-8",
|
||||
Encoding => "quoted-printable",
|
||||
Type => 'text/plain',
|
||||
Data => encode('utf8', $body_content),
|
||||
Data => $body_content,
|
||||
);
|
||||
shift @parts;
|
||||
unshift @parts, $new_part;
|
||||
|
|
@ -130,7 +131,7 @@ sub addFooter {
|
|||
Charset => "UTF-8",
|
||||
Encoding => "quoted-printable",
|
||||
Type => 'text/html',
|
||||
Data => encode('utf8', $body_content),
|
||||
Data => $body_content,
|
||||
);
|
||||
shift @parts;
|
||||
unshift @parts, $new_part;
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ sub create {
|
|||
|
||||
# Add the column to the userProfileData table
|
||||
$db->write(
|
||||
"ALTER TABLE userProfileData ADD " . $db->dbh->quote_identifier($fieldName)
|
||||
"ALTER TABLE userProfileData ADD " . $db->dbh->quote_identifier($id)
|
||||
. $dbDataType
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -309,7 +309,8 @@ sub _getFeedUrl {
|
|||
|
||||
=head2 _getStaticFeedUrl ($extension)
|
||||
|
||||
Generic method for returning the static URL for a type of feed.
|
||||
Generic method for returning the static URL for a type of feed. The returned URL will be complete,
|
||||
and absolute, containing the gateway URL for this site.
|
||||
|
||||
=head3 $extension
|
||||
|
||||
|
|
|
|||
|
|
@ -141,7 +141,9 @@ Any URL parameters that need to be tacked on to the current URL to accomplish wh
|
|||
|
||||
=head3 pageURL
|
||||
|
||||
The URL to any page. Defaults to the current page.
|
||||
The URL to any page. Defaults to the current page. If a URL is passed, the gateway URL from the site's config
|
||||
file will be prepended to it.
|
||||
|
||||
|
||||
=head3 confirmText
|
||||
|
||||
|
|
|
|||
|
|
@ -408,9 +408,8 @@ sub makeCompliant {
|
|||
$url =~ s{\s+$}{}; # remove trailing whitespace
|
||||
$url =~ s{^/+}{}; # remove leading slashes
|
||||
$url =~ s{/+$}{}; # remove trailing slashes
|
||||
$url =~ s{[^\w/:._-]+}{-}g; # replace anything aside from word or other allowed characters with dashes
|
||||
$url =~ s{//+}{/}g; # remove double slashes
|
||||
$url =~ s{--+}{-}g; # remove double dashes
|
||||
$url =~ s{[^\w/:.-]+}{-}g; # replace anything aside from word or other allowed characters with dashes
|
||||
$url =~ tr{/-}{/-}s; # replace multiple slashes and dashes with singles.
|
||||
return $url;
|
||||
}
|
||||
|
||||
|
|
@ -533,16 +532,14 @@ The string to urlize.
|
|||
=cut
|
||||
|
||||
sub urlize {
|
||||
my $self = shift;
|
||||
my ($value);
|
||||
$value = lc(shift); #lower cases whole string
|
||||
my $self = shift;
|
||||
my $value = lc(shift); #lower cases whole string
|
||||
$value = $self->makeCompliant($value);
|
||||
|
||||
# remove /./ or /../
|
||||
$value =~ s{(^|/)(?:\.\.?/)*}{$1}g;
|
||||
|
||||
# remove trailing slashes
|
||||
$value =~ s/\/$//;
|
||||
return $value;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ sub execute {
|
|||
my $sth = $session->db->read( "select Event.assetId, revisionDate from Event join assetData using (assetId, revisionDate) where endDate < ? and revisionDate = (select max(revisionDate) from assetData where assetData.assetId=Event.assetId);", [ $date->toDatabaseDate ]);
|
||||
EVENT: while ( my ($id) = $sth->array ) {
|
||||
my $asset = eval { WebGUI::Asset::Event->newById($self->session, $id); };
|
||||
if (! Exception::Class->caught() && $asset->eventEndDate < time() - $self->trashAfter) {
|
||||
if (! Exception::Class->caught() ) {
|
||||
$asset->trash;
|
||||
}
|
||||
last EVENT if time() > $finishTime;
|
||||
|
|
|
|||
|
|
@ -33,12 +33,30 @@ our $I18N = {
|
|||
context => q|Description of the carousel template field, used as hover help.|
|
||||
},
|
||||
|
||||
'carousel slideHeight label' => {
|
||||
message => q|Carousel slide height|,
|
||||
lastUpdated => 0,
|
||||
context => q|Slide, one "frame" or "page" in the Carousel.|
|
||||
},
|
||||
|
||||
'carousel slideHeight description' => {
|
||||
message => q|Height in pixels. The Carousel will not automatically resize itself for content of various widths. Setting this width will help it render properly. If left with the default, 0, then the width of the Carousel is set by the width of the first element.|,
|
||||
lastUpdated => 0,
|
||||
context => q|Description of the carousel template field, used as hover help.|
|
||||
},
|
||||
|
||||
'slideWidth' => {
|
||||
message => q|The width set for each slide in the Carousel|,
|
||||
lastUpdated => 0,
|
||||
context => q|Description of the carousel template field, used as hover help.|
|
||||
},
|
||||
|
||||
'slideHeight' => {
|
||||
message => q|The height set for each slide in the Carousel|,
|
||||
lastUpdated => 0,
|
||||
context => q|Description of the carousel template field, used as hover help.|
|
||||
},
|
||||
|
||||
'items label' => {
|
||||
message => q|Items|,
|
||||
lastUpdated => 0,
|
||||
|
|
|
|||
|
|
@ -1978,7 +1978,7 @@ our $I18N = {
|
|||
},
|
||||
|
||||
'loginFormButton help' => {
|
||||
message => q|The end of the form to help a user log in. This variable will only be populated if the current user is Visitor.|,
|
||||
message => q|A button to submit the login form. This variable will only be populated if the current user is Visitor.|,
|
||||
lastUpdated => 0,
|
||||
context => q|Template variable help|
|
||||
},
|
||||
|
|
|
|||
|
|
@ -301,6 +301,7 @@ isa_ok($tempNode, 'WebGUI::Asset::Wobject::Folder');
|
|||
is($tempNode->getId, 'tempspace0000000000000', 'Tempspace Asset ID check');
|
||||
is($tempNode->getParent->getId, $rootAsset->getId, 'Tempspace parent is Root Asset');
|
||||
|
||||
|
||||
################################################################
|
||||
#
|
||||
# urlExists
|
||||
|
|
|
|||
106
t/Asset/Post/notification.t
Normal file
106
t/Asset/Post/notification.t
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
#-------------------------------------------------------------------
|
||||
# WebGUI is Copyright 2001-2009 Plain Black Corporation.
|
||||
#-------------------------------------------------------------------
|
||||
# Please read the legal notices (docs/legal.txt) and the license
|
||||
# (docs/license.txt) that came with this distribution before using
|
||||
# this software.
|
||||
#-------------------------------------------------------------------
|
||||
# http://www.plainblack.com info@plainblack.com
|
||||
#-------------------------------------------------------------------
|
||||
|
||||
## Test that trashing a post works, and checking side effects like updating
|
||||
## lastPost information in the Thread, and CS.
|
||||
|
||||
use FindBin;
|
||||
use strict;
|
||||
use lib "$FindBin::Bin/../../lib";
|
||||
use WebGUI::Test;
|
||||
use WebGUI::Session;
|
||||
use Test::More tests => 9; # increment this value for each test you create
|
||||
use WebGUI::Asset::Wobject::Collaboration;
|
||||
use WebGUI::Asset::Post;
|
||||
use WebGUI::Asset::Post::Thread;
|
||||
use Mail::Send;
|
||||
use Data::Dumper;
|
||||
use Encode;
|
||||
|
||||
my $session = WebGUI::Test->session;
|
||||
|
||||
# Do our work in the import node
|
||||
my $node = WebGUI::Asset->getImportNode($session);
|
||||
|
||||
# Grab a named version tag
|
||||
my $versionTag = WebGUI::VersionTag->getWorking($session);
|
||||
$versionTag->set({name=>"Collab setup"});
|
||||
|
||||
# Need to create a Collaboration system in which the post lives.
|
||||
my @addArgs = ( undef, undef, { skipAutoCommitWorkflows => 1, skipNotification => 1 } );
|
||||
|
||||
my $notification_template = $node->addChild({
|
||||
className => 'WebGUI::Asset::Template',
|
||||
template => "<body>!!!url:<tmpl_var url>!!!content:<tmpl_var content>!!!</body>",
|
||||
}, @addArgs);
|
||||
|
||||
my $collab = $node->addChild({
|
||||
className => 'WebGUI::Asset::Wobject::Collaboration',
|
||||
notificationTemplateId => $notification_template->getId,
|
||||
}, @addArgs);
|
||||
|
||||
# finally, add posts and threads to the collaboration system
|
||||
|
||||
my $first_thread = $collab->addChild( { className => 'WebGUI::Asset::Post::Thread', }, @addArgs);
|
||||
|
||||
##Thread 1, Post 1 => t1p1
|
||||
my $title = "H\x{00E4}ufige Fragen";
|
||||
utf8::upgrade($title);
|
||||
my $content = "Ba\x{00DF}";
|
||||
utf8::upgrade($content);
|
||||
my $t1p1 = $first_thread->addChild(
|
||||
{
|
||||
className => 'WebGUI::Asset::Post',
|
||||
title => $title,
|
||||
url => lc $title,
|
||||
content => $content,
|
||||
},
|
||||
@addArgs
|
||||
);
|
||||
$t1p1->setSkipNotification;
|
||||
|
||||
$versionTag->commit();
|
||||
WebGUI::Test->addToCleanup($versionTag);
|
||||
|
||||
is $t1p1->get('title'), "H\x{00E4}ufige Fragen", "utf8 in title set correctly";
|
||||
is $t1p1->get('url'), "h\x{00E4}ufige-fragen", "... in url";
|
||||
is $t1p1->get('content'), "Ba\x{00DF}", "... in content";
|
||||
|
||||
foreach my $asset ($collab, $first_thread, $t1p1, ) {
|
||||
$asset = $asset->cloneFromDb;
|
||||
}
|
||||
|
||||
is $t1p1->get('title'), "H\x{00E4}ufige Fragen", "utf8 title pulled correctly from db";
|
||||
is $t1p1->get('url'), "h\x{00E4}ufige-fragen", "... and url";
|
||||
is $t1p1->get('content'), "Ba\x{00DF}", "... and content";
|
||||
|
||||
$t1p1->notifySubscribers();
|
||||
|
||||
my $messageIds = $session->db->buildArrayRef("select messageId from mailQueue where message like '%cs-".$t1p1->getId."%'");
|
||||
|
||||
is @{ $messageIds }, 2, 'two email messages sent, one for cs, one for thread';
|
||||
|
||||
WebGUI::Test->addToCleanup(SQL => 'delete from mailQueue where messageId IN ('. $session->db->quoteAndJoin($messageIds).')');
|
||||
|
||||
my $message1 = WebGUI::Mail::Send->retrieve($session, $messageIds->[0]);
|
||||
my $subject = $message1->getMimeEntity->head->get('Subject');
|
||||
$subject = decode('MIME-Q', $subject);
|
||||
chomp $subject;
|
||||
is $subject, "H\x{00E4}ufige Fragen", 'subject has correct UTF8 phrase';
|
||||
my $body = $message1->getMimeEntity->parts(0)->bodyhandle->as_string; ##comes out decoded for us
|
||||
my ($url, $content) = $body =~ /!!!url:([^!]+)!!!content:([^!]+)!!!/;
|
||||
my $expected_url = $session->url->getSiteURL . "/h\x{00E4}ufige-fragen";
|
||||
utf8::encode($expected_url);
|
||||
is $url,
|
||||
$expected_url,
|
||||
'url UTF8 checks out';
|
||||
|
||||
#vim:ft=perl
|
||||
|
||||
|
|
@ -138,14 +138,17 @@ $board->view;
|
|||
cmp_bag(
|
||||
$templateVars->{rows_loop},
|
||||
[
|
||||
{
|
||||
superhashof({
|
||||
deptHasChanged => ignore(),
|
||||
status => 'In',
|
||||
dateStamp => ignore(),
|
||||
message => 'work time',
|
||||
username => 'red',
|
||||
},
|
||||
ignore(), ignore(), ignore(), ignore(),
|
||||
}),
|
||||
superhashof({ username => 'Admin' }),
|
||||
superhashof({ username => 'boggs' }),
|
||||
superhashof({ username => 'andy' }),
|
||||
superhashof({ username => 'hadley' }),
|
||||
],
|
||||
'view: returns one entry for each user, entry is correct for user with status'
|
||||
) or diag(Dumper $templateVars->{rows_loop});
|
||||
|
|
|
|||
13
t/Help/isa.t
13
t/Help/isa.t
|
|
@ -30,10 +30,8 @@ my $session = WebGUI::Test->session;
|
|||
|
||||
plan tests => 4;
|
||||
|
||||
installCollateral();
|
||||
WebGUI::Test->addToCleanup(sub {
|
||||
unlink File::Spec->catfile(WebGUI::Test->lib, qw/WebGUI Help HelpTest.pm/);
|
||||
});
|
||||
local @INC = @INC;
|
||||
unshift @INC, File::Spec->catdir( WebGUI::Test->getTestCollateralPath, 'Help-isa', 'lib' );
|
||||
|
||||
my $allHelp = WebGUI::Operation::Help::_load($session, 'HelpTest');
|
||||
|
||||
|
|
@ -169,11 +167,4 @@ cmp_deeply(
|
|||
'isa imports variables with nested loops'
|
||||
);
|
||||
|
||||
sub installCollateral {
|
||||
copy(
|
||||
File::Spec->catfile( WebGUI::Test->getTestCollateralPath, qw/Help HelpTest.pm/),
|
||||
File::Spec->catfile( WebGUI::Test->lib, qw/WebGUI Help/)
|
||||
);
|
||||
}
|
||||
|
||||
#vim:ft=perl
|
||||
|
|
|
|||
|
|
@ -20,11 +20,7 @@ use WebGUI::Content::SetLanguage;
|
|||
|
||||
my $session = WebGUI::Test->session;
|
||||
|
||||
my $numTests = 1; ##For conditional load check
|
||||
my $langTests = 4; ##For language look-up tests
|
||||
$numTests += 20 + $langTests;
|
||||
|
||||
plan tests => $numTests;
|
||||
plan tests => 25;
|
||||
|
||||
my $loaded = use_ok('WebGUI::International');
|
||||
|
||||
|
|
@ -45,12 +41,8 @@ is($i18n->getNamespace(), 'Asset', 'getNamespace: set namespace to Asset');
|
|||
is($i18n->get('topicName'), 'Assets', 'get: get English label for topicName in Asset: Assets');
|
||||
is($i18n->get('topicName', 'WebGUI'), 'WebGUI', 'get: test manual namespace override');
|
||||
|
||||
installPigLatin();
|
||||
WebGUI::Test->addToCleanup(sub {
|
||||
unlink File::Spec->catfile(WebGUI::Test->lib, qw/WebGUI i18n PigLatin WebGUI.pm/);
|
||||
unlink File::Spec->catfile(WebGUI::Test->lib, qw/WebGUI i18n PigLatin.pm/);
|
||||
rmdir File::Spec->catdir(WebGUI::Test->lib, qw/WebGUI i18n PigLatin/);
|
||||
});
|
||||
local @INC = @INC;
|
||||
unshift @INC, File::Spec->catdir( WebGUI::Test->getTestCollateralPath, 'International', 'lib' );
|
||||
|
||||
#tests for sub new
|
||||
my $i18nNew1 = WebGUI::International->new($session);
|
||||
|
|
@ -66,8 +58,6 @@ my $languages = $i18n->getLanguages();
|
|||
|
||||
my $gotPigLatin = exists $languages->{PigLatin};
|
||||
|
||||
SKIP: {
|
||||
skip 'No PigLatin language pack for testing', $langTests unless $gotPigLatin;
|
||||
is(
|
||||
$i18n->get('account','WebGUI','English'),
|
||||
$i18n->get('account','WebGUI','PigLatin'),
|
||||
|
|
@ -94,8 +84,6 @@ SKIP: {
|
|||
'keys with spaces work'
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
is($i18n->getLanguage('English', 'label'), 'English', 'getLanguage, specific property');
|
||||
|
||||
isa_ok($i18n->getLanguage('English'), 'HASH', 'getLanguage, without a specific property returns a hashref');
|
||||
|
|
@ -119,16 +107,4 @@ is(
|
|||
'Language check after SetLanguage contentHandler : key from missing file return English key'
|
||||
);
|
||||
|
||||
sub installPigLatin {
|
||||
mkdir File::Spec->catdir(WebGUI::Test->lib, 'WebGUI', 'i18n', 'PigLatin');
|
||||
copy(
|
||||
WebGUI::Test->getTestCollateralPath('WebGUI.pm'),
|
||||
File::Spec->catfile(WebGUI::Test->lib, qw/WebGUI i18n PigLatin WebGUI.pm/)
|
||||
);
|
||||
copy(
|
||||
WebGUI::Test->getTestCollateralPath('PigLatin.pm'),
|
||||
File::Spec->catfile(WebGUI::Test->lib, qw/WebGUI i18n PigLatin.pm/)
|
||||
);
|
||||
}
|
||||
|
||||
#vim:ft=perl
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ my $mime; # for getMimeEntity
|
|||
#----------------------------------------------------------------------------
|
||||
# Tests
|
||||
|
||||
plan tests => 39; # Increment this number for each test you create
|
||||
plan tests => 40; # Increment this number for each test you create
|
||||
|
||||
WebGUI::Test->addToCleanup(SQL => 'delete from mailQueue');
|
||||
|
||||
|
|
@ -121,7 +121,8 @@ $mail = WebGUI::Mail::Send->create( $session, {
|
|||
$mail->addHeaderField('List-ID', "H\x{00C4}ufige Fragen");
|
||||
my $messageId = $mail->queue;
|
||||
my $dbMail = WebGUI::Mail::Send->retrieve($session, $messageId);
|
||||
is($dbMail->getMimeEntity->head->get('List-ID'), "=?UTF-8?Q?H=C3=84ufige=20Fragen?=\n", 'addHeaderField: handles utf-8 correctly');
|
||||
is($dbMail->getMimeEntity->head->get('List-ID'), "=?UTF-8?Q?H=C3=84ufige=20Fragen?=\n", 'addHeaderField: handles utf-8 correctly in List-ID');
|
||||
is($dbMail->getMimeEntity->head->get('Subject'), "=?UTF-8?Q?H=C3=84ufige=20Fragen?=\n", '... in Subject');
|
||||
|
||||
# TODO: Test that addHtml creates a body with the right content type
|
||||
use utf8;
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ isa_ok(
|
|||
'AuthType not in config file, so return default authType',
|
||||
);
|
||||
|
||||
WebGUI::Test->originalConfig( 'authMethods' );
|
||||
$session->config->addToArray( 'authMethods', 'TestAuth' );
|
||||
isa_ok(
|
||||
WebGUI::Operation::Auth::getInstance( $session ),
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@ ok(! $search->_isStopword('private.+'), '_isStopword: regex metacharacters
|
|||
SKIP: {
|
||||
use utf8;
|
||||
|
||||
my $min_word_length = $session->db->quickScalar('SELECT @@ft_min_word_len');
|
||||
my $min_word_length = $session->db->quickHashRef("show variables like 'ft_min_word_len'");
|
||||
skip 'MySQL minimum word length too long to support ideograms', 2
|
||||
if $min_word_length > 2;
|
||||
if $min_word_length->{Value} > 2;
|
||||
|
||||
# Create an article to index
|
||||
my $article = WebGUI::Asset->getImportNode( $session )->addChild( {
|
||||
|
|
|
|||
|
|
@ -247,9 +247,9 @@ cmp_deeply (
|
|||
SKIP: {
|
||||
use utf8;
|
||||
|
||||
my $min_word_length = $session->db->quickScalar('SELECT @@ft_min_word_len');
|
||||
my $min_word_length = $session->db->quickHashRef("show variables like 'ft_min_word_len'");
|
||||
skip 'MySQL minimum word length too long to support ideograms', 1
|
||||
if $min_word_length > 2;
|
||||
if $min_word_length->{Value} > 2;
|
||||
|
||||
$article->update({
|
||||
description => "甲骨文",
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ use WebGUI::Session;
|
|||
|
||||
use Test::More tests => 90; # increment this value for each test you create
|
||||
|
||||
installBadLocale();
|
||||
WebGUI::Test->addToCleanup(sub { unlink File::Spec->catfile(WebGUI::Test->lib, qw/WebGUI i18n BadLocale.pm/); });
|
||||
|
||||
local @INC = @INC;
|
||||
unshift @INC, File::Spec->catdir( WebGUI::Test->getTestCollateralPath, 'Session-DateTime', 'lib' );
|
||||
|
||||
my $session = WebGUI::Test->session;
|
||||
|
||||
my $dt = $session->datetime;
|
||||
|
|
@ -301,11 +301,4 @@ $session->user({user => $dude});
|
|||
is($dt->epochToHuman($wgbday), '8/16/2001 9:00 pm', 'epochToHuman: constructs a default locale if the language does not provide one.');
|
||||
$session->user({userId => 1});
|
||||
|
||||
sub installBadLocale {
|
||||
copy(
|
||||
WebGUI::Test->getTestCollateralPath(qw/ Session-DateTime lib WebGUI i18n BadLocale.pm /),
|
||||
File::Spec->catfile(WebGUI::Test->lib, qw/WebGUI i18n BadLocale.pm/)
|
||||
);
|
||||
}
|
||||
|
||||
#vim:ft=perl
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@ my @getRefererUrlTests = (
|
|||
);
|
||||
|
||||
use Test::More;
|
||||
plan tests => 83 + scalar(@getRefererUrlTests);
|
||||
use Test::MockObject::Extends;
|
||||
plan tests => 84 + scalar(@getRefererUrlTests);
|
||||
|
||||
my $session = WebGUI::Test->session;
|
||||
my $request = $session->request;
|
||||
|
|
@ -165,10 +166,25 @@ $session->url->setSiteURL('http://'.$sitename);
|
|||
is( $session->url->getSiteURL, 'http://'.$sitename, 'restore config setting');
|
||||
$session->setting->set('hostToUse', $setting_hostToUse);
|
||||
|
||||
#######################################
|
||||
#
|
||||
# makeCompliant
|
||||
#
|
||||
#######################################
|
||||
|
||||
$url = 'level1 /level2/level3 ';
|
||||
$url2 = 'level1-/level2/level3';
|
||||
|
||||
is( $session->url->makeCompliant($url), $url2, 'language specific URL compliance');
|
||||
is $session->url->makeCompliant($url), $url2, 'internal spaces encoded, trailing spaces removed';
|
||||
is $session->url->makeCompliant('home/'), 'home', '... trailing slashes removed';
|
||||
is $session->url->makeCompliant('home is where the heart is'), 'home-is-where-the-heart-is', '... makeCompliant translates spaces to dashes';
|
||||
is $session->url->makeCompliant('/home'), 'home', '... removes initial slash';
|
||||
is $session->url->makeCompliant('home -- here'), 'home-here', 'multiple dashes collapsed';
|
||||
is $session->url->makeCompliant('home!@#$%^&*here'), 'home-here', 'non-word characters collapsed to single dash';
|
||||
is $session->url->makeCompliant("home\x{2267}here"), 'home-here', 'non-word international characters removed';
|
||||
is $session->url->makeCompliant("home\x{1EE9}here"), "home\x{1EE9}here", 'word international characters not removed';
|
||||
my $character = "\x{00C0}";
|
||||
utf8::upgrade($character);
|
||||
is( $session->url->makeCompliant($character), $character, 'utf8 allowed in URLs');
|
||||
|
||||
|
||||
#######################################
|
||||
|
|
@ -332,17 +348,10 @@ is($unEscapedString, '10% is enough;', 'unescape method');
|
|||
#######################################
|
||||
|
||||
is($session->url->urlize('HOME/PATH1'), 'home/path1', 'urlize: urls are lower cased');
|
||||
is($session->url->urlize('home/'), 'home', '... trailing slashes removed');
|
||||
is($session->url->urlize('home is where the heart is'), 'home-is-where-the-heart-is', '... makeCompliant translates spaces to dashes');
|
||||
is($session->url->urlize('/home'), 'home', '... removes initial slash');
|
||||
is($session->url->urlize('home/../out-of-bounds'), 'home/out-of-bounds', '... removes ../');
|
||||
is($session->url->urlize('home/./here'), 'home/here', '... removes ./');
|
||||
is($session->url->urlize('home/../../out-of-bounds'), 'home/out-of-bounds', '... removes multiple ../');
|
||||
is($session->url->urlize('home/././here'), 'home/here', '... removes multiple ./');
|
||||
is($session->url->urlize('home -- here'), 'home-here', 'multiple dashes collapsed');
|
||||
is($session->url->urlize('home!@#$%^&*here'), 'home-here', 'non-word characters collapsed to single dash');
|
||||
is($session->url->urlize("home\x{2267}here"), 'home-here', 'non-word international characters removed');
|
||||
is($session->url->urlize("home\x{1EE9}here"), "home\x{1EE9}here", 'word international characters not removed');
|
||||
is $session->url->urlize('home/../out-of-bounds'), 'home/out-of-bounds', '... removes ../';
|
||||
is $session->url->urlize('home/./here'), 'home/here', '... removes ./';
|
||||
is $session->url->urlize('home/../../out-of-bounds'), 'home/out-of-bounds', '... removes multiple ../';
|
||||
is $session->url->urlize('home/././here'), 'home/here', '... removes multiple ./';
|
||||
|
||||
#######################################
|
||||
#
|
||||
|
|
|
|||
62
t/badExtrasMacros.t
Normal file
62
t/badExtrasMacros.t
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
#-------------------------------------------------------------------
|
||||
# WebGUI is Copyright 2001-2009 Plain Black Corporation.
|
||||
#-------------------------------------------------------------------
|
||||
# Please read the legal notices (docs/legal.txt) and the license
|
||||
# (docs/license.txt) that came with this distribution before using
|
||||
# this software.
|
||||
#-------------------------------------------------------------------
|
||||
# http://www.plainblack.com info@plainblack.com
|
||||
#-------------------------------------------------------------------
|
||||
|
||||
use FindBin;
|
||||
use strict;
|
||||
use warnings;
|
||||
use lib "$FindBin::Bin/lib"; ##t/lib
|
||||
|
||||
use WebGUI::Test;
|
||||
use WebGUI::Session;
|
||||
use Data::Dumper;
|
||||
use WebGUI::Asset::Template;
|
||||
|
||||
#The goal of this test is to locate poorly used macros in the default
|
||||
#templates;
|
||||
|
||||
use Test::More; # increment this value for each test you create
|
||||
my $numTests = 0;
|
||||
|
||||
my $session = WebGUI::Test->session;
|
||||
my $lib = WebGUI::Test->lib;
|
||||
|
||||
##Find the name of the International macro in the user's config file.
|
||||
|
||||
#note "International macro name = $international";
|
||||
|
||||
##Regexp setup for parsing out the Macro calls.
|
||||
my $macro = qr{
|
||||
\^
|
||||
Extras
|
||||
(?: \( \) )?
|
||||
;
|
||||
}xms;
|
||||
|
||||
# put your tests here
|
||||
|
||||
$numTests = $session->db->quickScalar('select count(distinct(assetId)) from template');
|
||||
|
||||
plan tests => $numTests;
|
||||
|
||||
my $getATemplate = WebGUI::Asset::Template->getIsa($session);
|
||||
|
||||
my @templateLabels;
|
||||
|
||||
while (my $templateAsset = $getATemplate->()) {
|
||||
my $template = $templateAsset->get('template');
|
||||
my $header = $templateAsset->get('extraHeadTags');
|
||||
my $match = ($template =~ $macro);
|
||||
if ($header) {
|
||||
$match ||= ($header =~ $macro);
|
||||
}
|
||||
ok(!$match, sprintf "%s: %s (%s) has no bad extras macros", $templateAsset->getTitle, $templateAsset->getId, $templateAsset->getUrl);
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,134 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Chaining Animations Using <code>onComplete</code></title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
#animator {
|
||||
background-color:#003366;
|
||||
color:#fff;
|
||||
height:15em;
|
||||
width: 15em;
|
||||
position:relative;
|
||||
margin:1em;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Chaining Animations Using <code>onComplete</code></h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>A common use case for animation involves causing two or more animations to fire sequentially. This is known as <em>chaining</em>. It's easy to chain animations using the <a href="http://developer.yahoo.com/yui/animation/">YUI Animation Utility</a>'s custom events.</p>
|
||||
|
||||
<p>In this example, a color animation is set to fire <em>after</em> an animation of position. Click the button below to start the sequence.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!--markup for YUI Button Control-->
|
||||
<span id="startAnim" class="yui-button yui-link-button">
|
||||
<em class="first-child">
|
||||
<a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a>
|
||||
</em>
|
||||
</span>
|
||||
|
||||
<!--The animated element.-->
|
||||
<div id="animator">
|
||||
This element will animate position
|
||||
and then color when you click the
|
||||
button.
|
||||
</div>
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
//Setup the example once the animator div is present
|
||||
//in the DOM.
|
||||
YAHOO.util.Event.onAvailable("animator", function() {
|
||||
|
||||
//This is the first animation; this one will
|
||||
//fire when the button is clicked.
|
||||
var move = new YAHOO.util.Anim("animator", {
|
||||
left: {from:0, to:75}
|
||||
}, 1);
|
||||
|
||||
//This is the second animation; it will fire
|
||||
//when the first animation is complete.
|
||||
var changeColor = new YAHOO.util.ColorAnim("animator", {
|
||||
backgroundColor: {from:"#003366", to:"#ff0000"}
|
||||
}, 1);
|
||||
|
||||
//Here's the chaining glue: We subscribe to the
|
||||
//first animation's onComplete event, and in
|
||||
//our handler we animate the second animation:
|
||||
move.onComplete.subscribe(function() {
|
||||
changeColor.animate();
|
||||
});
|
||||
|
||||
//Here we set up our YUI Button and subcribe to
|
||||
//its click event. When clicked, it will
|
||||
//animate the first animation:
|
||||
var startAnim = new YAHOO.widget.Button("startAnim");
|
||||
startAnim.subscribe("click", function() {
|
||||
//reset the color value to the start so that
|
||||
//the animation can be run multiple times:
|
||||
YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366");
|
||||
move.animate();
|
||||
});
|
||||
|
||||
//You can also make use of the onStart and onTween
|
||||
//custom events in Animation; here, we'll log all
|
||||
//of changeColor's custom events and peek at their
|
||||
//argument signatures:
|
||||
changeColor.onStart.subscribe(function() {
|
||||
YAHOO.log("changeColor animation is starting.", "info", "example");
|
||||
});
|
||||
|
||||
changeColor.onTween.subscribe(function(s, o) {
|
||||
YAHOO.log("changeColor onTween firing with these arguments: " +
|
||||
YAHOO.lang.dump(o), "info", "example");
|
||||
});
|
||||
|
||||
changeColor.onComplete.subscribe(function(s, o) {
|
||||
YAHOO.log("changeColor onComplete firing with these arguments: " +
|
||||
YAHOO.lang.dump(o), "info", "example");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Multiple Attributes</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Multiple Attributes</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to animate multiple attributes of an HTMLElement using the YUI Animation Utility. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
height: { to: 50 },
|
||||
width: { to: 50 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Basic Animation</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Animation</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to apply a simple animation effect to an HTMLElement. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { to: 0 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Colors</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Colors</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate colors. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
color: { to: '#06e' },
|
||||
backgroundColor: { to: '#e06' }
|
||||
};
|
||||
var anim = new YAHOO.util.ColorAnim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on(document, 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Along a Curved Path</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:30px;
|
||||
width:30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Along a Curved Path</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate along a curved path. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo"></div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
points: { to: [600, 10], control: [ [300, 100], [800, 800] ] }
|
||||
};
|
||||
var anim = new YAHOO.util.Motion('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animation Easing</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animation Easing</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to apply an Easing to a YUI Animation instance. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { to: 0 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes, 1.5, YAHOO.util.Easing.backIn);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating From a Given Value</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating From a Given Value</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to start a YUI Animation from a given value. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { from: 600, to: 0 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Motion</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:30px;
|
||||
width:30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Motion</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate the motion of an HTMLElement. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo"></div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
points: { to: [600, 10] }
|
||||
};
|
||||
var anim = new YAHOO.util.Motion('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,83 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animated Scrolling</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
height:6em;
|
||||
width:20em;
|
||||
overflow:auto;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animated Scrolling</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate the scrolling of an HTMLElement. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<style>
|
||||
#demo {
|
||||
height:6em;
|
||||
width:20em;
|
||||
overflow:auto;
|
||||
}
|
||||
</style>
|
||||
<div id="demo">
|
||||
<p>Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.</p>
|
||||
</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var attributes = {
|
||||
scroll: { to: [0, 200] }
|
||||
};
|
||||
var anim = new YAHOO.util.Scroll('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,73 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Using Custom Units for an Animation</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:30em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using Custom Units for an Animation</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use YUI Animation with units other than pixels. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
<script>
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { from: 30, to: 10, unit:'em' }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,93 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Screenreader Accessibility</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#myAutoComplete {
|
||||
width:15em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Screenreader Accessibility</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete example demonstrates how to make the widget more screenreader accessible.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
|
||||
<div id="myAutoComplete">
|
||||
<label id="myInputLabel" for="myInput">Enter a state:</label> <input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.Accessibility = function() {
|
||||
// Set up DataSource and AutoComplete instances
|
||||
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates, {responseSchema: {fields : ["state"]}});
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
|
||||
|
||||
// Set up span element with screenreader text
|
||||
var elLabel = YAHOO.util.Dom.get("myInputLabel"),
|
||||
origLabel = elLabel.innerHTML,
|
||||
screenreaderLabel = "<span style=\"position:absolute;left:-999em;\">Use the up and down arrow keys to navigate suggestions.</span>"
|
||||
|
||||
// Insert the screenreader text whenever user starts an AutoComplete interaction
|
||||
oAC.textboxFocusEvent.subscribe(function(){elLabel.innerHTML += screenreaderLabel;});
|
||||
oAC.textboxBlurEvent.subscribe(function(){elLabel.innerHTML = origLabel;});
|
||||
|
||||
// The typeAhead feature must also be set to true for screenreader support
|
||||
oAC.typeAhead = true;
|
||||
|
||||
// Turn off autoHighlight for less confusion
|
||||
oAC.autoHighlight = false;
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,83 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Basic Local Data</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#myAutoComplete {
|
||||
width:15em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Local Data</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. Enabling the <code>prehighlightClassName</code> and <code>useShadow</code> features, as well as pulling in the Animation utility, provides an ehanced visual user experience.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="myInput">Enter a state:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.BasicLocal = function() {
|
||||
// Use a LocalDataSource
|
||||
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
|
||||
// Optional to define fields for single-dimensional array
|
||||
oDS.responseSchema = {fields : ["state"]};
|
||||
|
||||
// Instantiate the AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
oAC.prehighlightClassName = "yui-ac-prehighlight";
|
||||
oAC.useShadow = true;
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,88 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Basic Remote Data</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#myAutoComplete {
|
||||
width:25em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Remote Data</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete implementation points to an online script that serves a data as delimited plain text. Enabling caching on the DataSource can reduce trips to the server and speed performance for repeated queries.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="myInput">Search our database:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.BasicRemote = function() {
|
||||
// Use an XHRDataSource
|
||||
var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php");
|
||||
// Set the responseType
|
||||
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
|
||||
// Define the schema of the delimited results
|
||||
oDS.responseSchema = {
|
||||
recordDelim: "\n",
|
||||
fieldDelim: "\t"
|
||||
};
|
||||
// Enable caching
|
||||
oDS.maxCacheEntries = 5;
|
||||
|
||||
// Instantiate the AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,194 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Combobox, with CSS for Multiple Stacked Instances</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
/* custom styles for inline instances */
|
||||
.yui-skin-sam .yui-ac-input { position:static;width:20em; vertical-align:middle;}
|
||||
.yui-skin-sam .yui-ac-container { width:20em;left:0px;}
|
||||
|
||||
/* needed for stacked instances for ie & sf z-index bug of absolute inside relative els */
|
||||
#bAutoComplete { z-index:9001; }
|
||||
#lAutoComplete { z-index:9000; }
|
||||
|
||||
/* buttons */
|
||||
.yui-ac .yui-button {vertical-align:middle;}
|
||||
.yui-ac .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-rt.png) center center no-repeat }
|
||||
.yui-ac .open .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-dn.png) center center no-repeat}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Combobox, with CSS for Multiple Stacked Instances</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This "combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field. Please note the following custom CSS:</p>
|
||||
|
||||
<ul>
|
||||
<li>z-index has been applied to support multiple vertically stacked AutoComplete instances</li>
|
||||
<li>the input field and container have been styled to support a button inline to the right</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="bInput">What would you like for breakfast?</label>
|
||||
<div id="bAutoComplete">
|
||||
<input id="bInput" type="text"> <span id="toggleB"></span>
|
||||
<div id="bContainer"></div>
|
||||
</div>
|
||||
|
||||
<label for="lInput">What would you like for lunch?</label>
|
||||
<div id="lAutoComplete">
|
||||
<input id="lInput" type="text"> <span id="toggleL"></span>
|
||||
<div id="lContainer"></div>
|
||||
</div>
|
||||
|
||||
<label for="dInput">What would you like for dinner?</label>
|
||||
<div id="dAutoComplete">
|
||||
<input id="dInput" type="text"> <span id="toggleD"></span>
|
||||
<div id="dContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.Combobox = function() {
|
||||
// Instantiate DataSources
|
||||
var bDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.breakfasts);
|
||||
var lDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.lunches);
|
||||
var dDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.dinners);
|
||||
|
||||
// Instantiate AutoCompletes
|
||||
var oConfigs = {
|
||||
prehighlightClassName: "yui-ac-prehighlight",
|
||||
useShadow: true,
|
||||
queryDelay: 0,
|
||||
minQueryLength: 0,
|
||||
animVert: .01
|
||||
}
|
||||
var bAC = new YAHOO.widget.AutoComplete("bInput", "bContainer", bDS, oConfigs);
|
||||
var lAC = new YAHOO.widget.AutoComplete("lInput", "lContainer", lDS, oConfigs);
|
||||
var dAC = new YAHOO.widget.AutoComplete("dInput", "dContainer", dDS, oConfigs);
|
||||
|
||||
// Breakfast combobox
|
||||
var bToggler = YAHOO.util.Dom.get("toggleB");
|
||||
var oPushButtonB = new YAHOO.widget.Button({container:bToggler});
|
||||
var toggleB = function(e) {
|
||||
//YAHOO.util.Event.stopEvent(e);
|
||||
if(!YAHOO.util.Dom.hasClass(bToggler, "open")) {
|
||||
YAHOO.util.Dom.addClass(bToggler, "open")
|
||||
}
|
||||
|
||||
// Is open
|
||||
if(bAC.isContainerOpen()) {
|
||||
bAC.collapseContainer();
|
||||
}
|
||||
// Is closed
|
||||
else {
|
||||
bAC.getInputEl().focus(); // Needed to keep widget active
|
||||
setTimeout(function() { // For IE
|
||||
bAC.sendQuery("");
|
||||
},0);
|
||||
}
|
||||
}
|
||||
oPushButtonB.on("click", toggleB);
|
||||
bAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(bToggler, "open")});
|
||||
|
||||
// Lunch combobox
|
||||
var lToggler = YAHOO.util.Dom.get("toggleL");
|
||||
var oPushButtonL = new YAHOO.widget.Button({container:lToggler});
|
||||
var toggleL = function(e) {
|
||||
//YAHOO.util.Event.stopEvent(e);
|
||||
if(!YAHOO.util.Dom.hasClass(lToggler, "open")) {
|
||||
YAHOO.util.Dom.addClass(lToggler, "open")
|
||||
}
|
||||
|
||||
// Is open
|
||||
if(lAC.isContainerOpen()) {
|
||||
lAC.collapseContainer();
|
||||
}
|
||||
// Is closed
|
||||
else {
|
||||
lAC.getInputEl().focus(); // Needed to keep widget active
|
||||
setTimeout(function() { // For IE
|
||||
lAC.sendQuery("");
|
||||
},0);
|
||||
}
|
||||
}
|
||||
oPushButtonL.on("click", toggleL);
|
||||
lAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(lToggler, "open")});
|
||||
|
||||
// Dinner combobox
|
||||
var dToggler = YAHOO.util.Dom.get("toggleD");
|
||||
var oPushButtonD = new YAHOO.widget.Button({container:dToggler});
|
||||
var toggleD = function(e) {
|
||||
//YAHOO.util.Event.stopEvent(e);
|
||||
if(!YAHOO.util.Dom.hasClass(dToggler, "open")) {
|
||||
YAHOO.util.Dom.addClass(dToggler, "open")
|
||||
}
|
||||
|
||||
// Is open
|
||||
if(dAC.isContainerOpen()) {
|
||||
dAC.collapseContainer();
|
||||
}
|
||||
// Is closed
|
||||
else {
|
||||
dAC.getInputEl().focus(); // Needed to keep widget active
|
||||
setTimeout(function() { // For IE
|
||||
dAC.sendQuery("");
|
||||
},0);
|
||||
}
|
||||
}
|
||||
oPushButtonD.on("click", toggleD);
|
||||
dAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(dToggler, "open")});
|
||||
|
||||
return {
|
||||
bDS: bDS,
|
||||
bAC: bAC,
|
||||
lDS: lDS,
|
||||
lAC: lAC,
|
||||
dDS: dDS,
|
||||
dAC: dAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,324 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Configurations Dashboard</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
/* custom styles for this example */
|
||||
#dashboard_autocomplete {margin:0 1em 0 0;width:50%;height:4em;}/* set width and height of widget here*/
|
||||
#dashboard_autocomplete label {display:block;color:#E76300;font-weight:bold;}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Configurations Dashboard</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example is designed to allow you to experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction. The first field after the AutoComplete input textbox is a select element that allows you to test for bleed-through on Internet Explorer when the AutoComplete suggestion container descends to cover it. The remaining form fields allow you to change property settings on the AutoComplete instance and to see immediately how those changes look and feel in the browser.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="dashboard_autocomplete">
|
||||
<label for="dashboard_input">Search the Web Using Yahoo!'s Search API:</label>
|
||||
<input id="dashboard_input" type="text" name="p">
|
||||
<div id="dashboard_container"></div>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Panel begins -->
|
||||
|
||||
<h3>Use the Controls Below to Customize the Behavior of the AutoComplete Instance Above:</h3>
|
||||
<form id="panel">
|
||||
|
||||
<!-- The following is in a select to demonstrate the useIFrame feature -->
|
||||
<select><option>Customize configurations for AutoComplete</option></select>
|
||||
|
||||
<div>
|
||||
<input id="animHoriz" type="checkbox">
|
||||
<label for="animHoriz">Animate Horizontally</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="animVert" type="checkbox" checked>
|
||||
<label for="animVert">Animate Vertically</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="animSpeedInput">Animation Speed: </label>
|
||||
<input id="animSpeedInput" type="text" size="2" value="0.3">
|
||||
<input id="animSpeed" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<input id="useShadow" type="checkbox">
|
||||
<label for="useShadow">Use Shadow</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="useIFrame" type="checkbox">
|
||||
<label for="useIFrame">Use IFrame</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="autoHighlight" type="checkbox" checked>
|
||||
<label for="autoHighlight">Automatically Highlight First Item</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="typeAhead" type="checkbox">
|
||||
<label for="typeAhead">Type Ahead</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="forceSelection" type="checkbox">
|
||||
<label for="forceSelection">Force a Selection</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="maxResultsDisplayedInput">Maximum Results: </label>
|
||||
<input id="maxResultsDisplayedInput" type="text" size="2" value="10">
|
||||
<input id="maxResultsDisplayed" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<label for="minQueryLengthInput">Minimum Query Length: </label>
|
||||
<input id="minQueryLengthInput" type="text" size="2" value="1">
|
||||
<input id="minQueryLength" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<label for="queryDelayInput">Query Delay: </label>
|
||||
<input id="queryDelayInput" type="text" size="2" value="0.2">
|
||||
<input id="queryDelay" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<label for="typeAheadDelayInput">TypeAhead Delay: </label>
|
||||
<input id="typeAheadDelayInput" type="text" size="2" value="0.2">
|
||||
<input id="typeAheadDelay" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<label for="delimCharInput">Delimiter Character(s) like ; or [";", ","]</label><br>
|
||||
<input id="delimCharInput" type="text" size="30" value="">
|
||||
<input id="delimChar" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<label for="highlightClassNameInput">Highlight Classname</label><br>
|
||||
<input id="highlightClassNameInput" type="text" size="30" value="yui-ac-highlight" maxlength="30">
|
||||
<input id="highlightClassName" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<label for="prehighlightClassNameInput">Pre-highlight Classname</label><br>
|
||||
<input id="prehighlightClassNameInput" type="text" size="30" value="" maxlength="30">
|
||||
<input id="prehighlightClassName" type="button" value="Update">
|
||||
</div>
|
||||
<div>
|
||||
<input id="allowBrowserAutocomplete" type="checkbox" checked>
|
||||
<label for="allowBrowserAutocomplete">Allow Browser Autocomplete</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="alwaysShowContainer" type="checkbox">
|
||||
<label for="alwaysShowContainer">Always Show Container</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="setHeaderInput">Set Header</label>
|
||||
<input id="setHeader" type="button" value="Update"><br>
|
||||
<textarea id="setHeaderInput" cols="25" rows="5"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="setBodyInput">Set Body</label>
|
||||
<input id="setBody" type="button" value="Update"><br>
|
||||
<textarea id="setBodyInput" cols="25" rows="5"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="setFooterInput">Set Footer</label>
|
||||
<input id="setFooter" type="button" value="Update"><br>
|
||||
<textarea id="setFooterInput" cols="25" rows="5"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Panel ends -->
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.Dashboard = function() {
|
||||
return {
|
||||
|
||||
myDataSource: null,
|
||||
myAutoComp: null,
|
||||
|
||||
// Initialize widgets and the dashboard
|
||||
init: function() {
|
||||
|
||||
// DataSource
|
||||
this.myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php");
|
||||
this.myDataSource.responseSchema = {
|
||||
recordDelim: "\n",
|
||||
fieldDelim: "\t"
|
||||
};
|
||||
this.myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
|
||||
|
||||
// AutoComplete
|
||||
this.myAutoComp = new YAHOO.widget.AutoComplete("dashboard_input","dashboard_container", this.myDataSource);
|
||||
|
||||
// IFrame workaround for IE
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
if(YAHOO.env.ua.ie < 7) {
|
||||
this.myAutoComp.useIFrame = true;
|
||||
YAHOO.util.Dom.get("useIFrame").checked = true;
|
||||
}
|
||||
|
||||
// Dashboard DOM event handling (assign scope to the HTML Element)
|
||||
YAHOO.util.Event.addListener("animHoriz","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("animVert","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("useShadow","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("useIFrame","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("autoHighlight","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("typeAhead","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("forceSelection","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("allowBrowserAutocomplete","click",this.handleCheckboxEvent,this);
|
||||
YAHOO.util.Event.addListener("alwaysShowContainer","click",this.handleCheckboxEvent,this);
|
||||
|
||||
YAHOO.util.Event.addListener("animSpeed","click",this.handleNumberInputEvent,this);
|
||||
YAHOO.util.Event.addListener("maxResultsDisplayed","click",this.handleNumberInputEvent,this);
|
||||
YAHOO.util.Event.addListener("minQueryLength","click",this.handleNumberInputEvent,this);
|
||||
YAHOO.util.Event.addListener("queryDelay","click",this.handleNumberInputEvent,this);
|
||||
YAHOO.util.Event.addListener("typeAheadDelay","click",this.handleNumberInputEvent,this);
|
||||
|
||||
YAHOO.util.Event.addListener("delimChar","click",this.handleDelimiterInputEvent,this);
|
||||
|
||||
YAHOO.util.Event.addListener("highlightClassName","click",this.handleTextInputEvent,this);
|
||||
YAHOO.util.Event.addListener("prehighlightClassName","click",this.handleTextInputEvent,this);
|
||||
|
||||
YAHOO.util.Event.addListener("setHeader","click",this.handleTextareaEvent,this);
|
||||
YAHOO.util.Event.addListener("setBody","click",this.handleTextareaEvent,this);
|
||||
YAHOO.util.Event.addListener("setFooter","click",this.handleTextareaEvent,this);
|
||||
},
|
||||
|
||||
// For valid inputs
|
||||
updateValue: function(property, value) {
|
||||
this.myAutoComp[property] = value;
|
||||
this.logSuccess(property);
|
||||
},
|
||||
|
||||
// For invalid inputs
|
||||
revertInput: function(property) {
|
||||
YAHOO.util.Dom.get(property+"Input").value = this.myAutoComp[property];
|
||||
this.logFailure(property);
|
||||
},
|
||||
|
||||
// Log success message
|
||||
logSuccess: function(property) {
|
||||
YAHOO.log("Updated " + property + " to " + this.myAutoComp[property] + ".", "info", "example");
|
||||
},
|
||||
|
||||
// Log failure message
|
||||
logFailure: function(property, error) {
|
||||
YAHOO.log("Could not update " + property + ".", "warn","example");
|
||||
},
|
||||
|
||||
// DOM event handler (scope assigned to the HTML Element)
|
||||
handleCheckboxEvent: function(e, oSelf) {
|
||||
var property = this.id;
|
||||
oSelf.updateValue(property, this.checked);
|
||||
|
||||
if(oSelf.myAutoComp.useShadow && oSelf.myAutoComp.alwaysShowContainer) {
|
||||
YAHOO.log("The AutoComplete properties useShadow and alwaysShowContainer should not be enabled concurrently.","warn","example")
|
||||
}
|
||||
},
|
||||
|
||||
// DOM event handler (scope assigned to the HTML Element)
|
||||
handleNumberInputEvent: function(e, oSelf) {
|
||||
var property = this.id;
|
||||
|
||||
// Validate input
|
||||
var nValue = YAHOO.util.Dom.get(property+"Input").value*1;
|
||||
if(YAHOO.lang.isNumber(nValue)) {
|
||||
oSelf.updateValue(property, nValue);
|
||||
}
|
||||
else {
|
||||
oSelf.revertInput(property);
|
||||
}
|
||||
},
|
||||
|
||||
// DOM event handler (scope assigned to the HTML Element)
|
||||
handleDelimiterInputEvent: function(e, oSelf) {
|
||||
var property = this.id;
|
||||
|
||||
// Validate input
|
||||
var sValue = YAHOO.util.Dom.get(property+"Input").value;
|
||||
if((sValue.indexOf("[") == 0) &&
|
||||
(sValue.indexOf("]") == sValue.length-1) &&
|
||||
(sValue.indexOf("<") < 0) &&
|
||||
(sValue.indexOf(">") < 0)) {
|
||||
// Ok to turn into an array
|
||||
try {
|
||||
sValue = eval(sValue);
|
||||
}
|
||||
catch(e) {
|
||||
// Not ok
|
||||
oSelf.revertInput(property);
|
||||
return;
|
||||
}
|
||||
}
|
||||
else if(sValue.length !== 1){
|
||||
// Not ok
|
||||
oSelf.revertInput(property);
|
||||
return;
|
||||
}
|
||||
oSelf.updateValue(property, sValue);
|
||||
},
|
||||
|
||||
// DOM event handler (scope assigned to the HTML Element)
|
||||
handleTextInputEvent: function(e, oSelf) {
|
||||
var property = this.id;
|
||||
oSelf.updateValue(property, YAHOO.util.Dom.get(property+"Input").value);
|
||||
},
|
||||
|
||||
// DOM event handler (scope assigned to the HTML Element)
|
||||
handleTextareaEvent: function(e, oSelf) {
|
||||
var method = this.id;
|
||||
var value = YAHOO.util.Dom.get(method+"Input").value;
|
||||
switch(method) {
|
||||
case "setHeader":
|
||||
oSelf.myAutoComp.setHeader(value);
|
||||
break
|
||||
case "setBody":
|
||||
oSelf.myAutoComp.setBody(value);
|
||||
break;
|
||||
case "setFooter":
|
||||
oSelf.myAutoComp.setFooter(value);
|
||||
break;
|
||||
}
|
||||
YAHOO.log("Called " + method + "() with " + value, "info", "example");
|
||||
}
|
||||
};
|
||||
}();
|
||||
YAHOO.util.Event.addListener(this,'load',YAHOO.example.Dashboard.init, YAHOO.example.Dashboard, true);
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,141 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Find Photos on Flickr</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#flickrselections {
|
||||
float:right;
|
||||
width:240px;
|
||||
padding:10px;
|
||||
background-color:#FFA928;
|
||||
}
|
||||
|
||||
#flickrselections h5 {
|
||||
color:#009;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* custom styles for scrolling container */
|
||||
#flickrautocomplete {
|
||||
width:15em; /* set width of widget here */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
#flickrautocomplete .yui-ac-content {
|
||||
max-height:30em;overflow:auto;overflow-x:hidden; /* set scrolling */
|
||||
_height:30em; /* ie6 */
|
||||
}
|
||||
#flickrautocomplete .flickrImg {
|
||||
width:6em;height:6em;padding:.1em;vertical-align:middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Find Photos on Flickr</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The <code>generateRequest()</code> method has been customized in order send additional required parameters to the Flickr application. The <code>formatResult()</code> method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a <code>itemSelectEvent</code> handler has been defined to collect selected images in a separate container.
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="flickrinput">Find photos by tag and collect your selections:</label>
|
||||
<div id="flickrselections">
|
||||
<h5>Selections</h5>
|
||||
<div id="photos"></div>
|
||||
</div>
|
||||
|
||||
<div id="flickrautocomplete">
|
||||
<input id="flickrinput" type="text">
|
||||
<div id="flickrcontainer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ACFlickr = function() {
|
||||
// Set up a local proxy to the Flickr webservice
|
||||
var myDS = new YAHOO.util.XHRDataSource("assets/php/flickr_proxy.php");
|
||||
myDS.responseSchema = {
|
||||
resultNode: "photo",
|
||||
fields: ["title", "id", "owner", "secret", "server"]
|
||||
};
|
||||
myDS.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
|
||||
myDS.maxCacheEntries = 100;
|
||||
|
||||
// Instantiate AutoComplete
|
||||
var myAC = new YAHOO.widget.AutoComplete("flickrinput","flickrcontainer", myDS);
|
||||
myAC.resultTypeList = false;
|
||||
myAC.suppressInputUpdate = true;
|
||||
myAC.generateRequest = function(sQuery) {
|
||||
return "?method=flickr.photos.search&tags="+sQuery;
|
||||
};
|
||||
var getImgUrl = function(oPhoto, sSize) {
|
||||
var sId = oPhoto.id;
|
||||
var sSecret = oPhoto.secret;
|
||||
var sServer = oPhoto.server;
|
||||
var sUrl = "http://static.flickr.com/" +
|
||||
sServer +
|
||||
"/" +
|
||||
sId +
|
||||
"_" +
|
||||
sSecret +
|
||||
"_"+ (sSize || "s") +".jpg";
|
||||
return "<img src='" + sUrl + "' class='flickrImg'>";
|
||||
}
|
||||
|
||||
myAC.formatResult = function(oResultItem, sQuery) {
|
||||
// This was defined by the schema array of the data source
|
||||
var sTitle = oResultItem.title;
|
||||
var sMarkup = getImgUrl(oResultItem) + " " + sTitle;
|
||||
return (sMarkup);
|
||||
};
|
||||
myAC.itemSelectEvent.subscribe(function(sType, aArgs){
|
||||
var oPhoto = aArgs[2];
|
||||
YAHOO.util.Dom.get("photos").innerHTML =
|
||||
"<p>"+getImgUrl(oPhoto, "m")+"</p>"+YAHOO.util.Dom.get("photos").innerHTML
|
||||
});
|
||||
|
||||
return {
|
||||
oDS: myDS,
|
||||
oAC: myAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,185 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#myAutoComplete {
|
||||
width:15em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
.match {
|
||||
font-weight:bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example uses a FunctionDataSource to perform string matching against multiple fields of a contacts database at runtime. Since the data for this example is loaded into local memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. A custom formatter allows users to see their search term within the result set. An itemSelectEvent handler is used to update the input field with a custom value and to populate a hidden form field with the selected contact's ID for eventually submitting back to a server.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="myInput">Find a contact:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
<input id="myHidden" type="hidden">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.FnMultipleFields = function(){
|
||||
var myContacts = [
|
||||
{id:0, fname:"Alice", lname:"Abrams", nname:"ace"},
|
||||
{id:1, fname:"Abraham", lname:"Axelrod", nname:"Abe"},
|
||||
{id:2, fname:"Bruce", lname:"Baxter", nname:null},
|
||||
{id:3, fname:"Robert", lname:"Brown", nname:"Bob"},
|
||||
{id:4, fname:"Carl", lname:"Carlson", nname:null},
|
||||
{id:5, fname:"Charlie", lname:"Chaplin", nname:"Chuck"},
|
||||
{id:6, fname:"Darla", lname:"Darling", nname:null},
|
||||
{id:7, fname:"David", lname:"Dashing", nname:"Dave"},
|
||||
{id:8, fname:"Egbert", lname:"Excellent", nname:null},
|
||||
{id:9, fname:"Engleberg", lname:"Humperdink", nname:null}
|
||||
];
|
||||
|
||||
// Define a custom search function for the DataSource
|
||||
var matchNames = function(sQuery) {
|
||||
// Case insensitive matching
|
||||
var query = sQuery.toLowerCase(),
|
||||
contact,
|
||||
i=0,
|
||||
l=myContacts.length,
|
||||
matches = [];
|
||||
|
||||
// Match against each name of each contact
|
||||
for(; i<l; i++) {
|
||||
contact = myContacts[i];
|
||||
if((contact.fname.toLowerCase().indexOf(query) > -1) ||
|
||||
(contact.lname.toLowerCase().indexOf(query) > -1) ||
|
||||
(contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
|
||||
matches[matches.length] = contact;
|
||||
}
|
||||
}
|
||||
|
||||
return matches;
|
||||
};
|
||||
|
||||
// Use a FunctionDataSource
|
||||
var oDS = new YAHOO.util.FunctionDataSource(matchNames);
|
||||
oDS.responseSchema = {
|
||||
fields: ["id", "fname", "lname", "nname"]
|
||||
}
|
||||
|
||||
// Instantiate AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
oAC.useShadow = true;
|
||||
oAC.resultTypeList = false;
|
||||
|
||||
|
||||
// Custom formatter to highlight the matching letters
|
||||
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
|
||||
var query = sQuery.toLowerCase(),
|
||||
fname = oResultData.fname,
|
||||
lname = oResultData.lname,
|
||||
nname = oResultData.nname || "", // Guard against null value
|
||||
query = sQuery.toLowerCase(),
|
||||
fnameMatchIndex = fname.toLowerCase().indexOf(query),
|
||||
lnameMatchIndex = lname.toLowerCase().indexOf(query),
|
||||
nnameMatchIndex = nname.toLowerCase().indexOf(query),
|
||||
displayfname, displaylname, displaynname;
|
||||
|
||||
if(fnameMatchIndex > -1) {
|
||||
displayfname = highlightMatch(fname, query, fnameMatchIndex);
|
||||
}
|
||||
else {
|
||||
displayfname = fname;
|
||||
}
|
||||
|
||||
if(lnameMatchIndex > -1) {
|
||||
displaylname = highlightMatch(lname, query, lnameMatchIndex);
|
||||
}
|
||||
else {
|
||||
displaylname = lname;
|
||||
}
|
||||
|
||||
if(nnameMatchIndex > -1) {
|
||||
displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";
|
||||
}
|
||||
else {
|
||||
displaynname = nname ? "(" + nname + ")" : "";
|
||||
}
|
||||
|
||||
return displayfname + " " + displaylname + " " + displaynname;
|
||||
|
||||
};
|
||||
|
||||
// Helper function for the formatter
|
||||
var highlightMatch = function(full, snippet, matchindex) {
|
||||
return full.substring(0, matchindex) +
|
||||
"<span class='match'>" +
|
||||
full.substr(matchindex, snippet.length) +
|
||||
"</span>" +
|
||||
full.substring(matchindex + snippet.length);
|
||||
};
|
||||
|
||||
// Define an event handler to populate a hidden form field
|
||||
// when an item gets selected and populate the input field
|
||||
var myHiddenField = YAHOO.util.Dom.get("myHidden");
|
||||
var myHandler = function(sType, aArgs) {
|
||||
var myAC = aArgs[0]; // reference back to the AC instance
|
||||
var elLI = aArgs[1]; // reference to the selected LI element
|
||||
var oData = aArgs[2]; // object literal of selected item's result data
|
||||
|
||||
// update hidden form field with the selected item's ID
|
||||
myHiddenField.value = oData.id;
|
||||
|
||||
myAC.getInputEl().value = oData.fname + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
|
||||
};
|
||||
oAC.itemSelectEvent.subscribe(myHandler);
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,135 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Custom Formatting, with a Proxyless Remote DataSource</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/get/get-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
label {
|
||||
color:#E76300;
|
||||
font-weight:bold;
|
||||
}
|
||||
#myAutoComplete {
|
||||
width:30em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
/* styles for custom formatting */
|
||||
.yui-ac .result {position:relative;height:62px;}
|
||||
.yui-ac .name {position:absolute;bottom:0;left:64px;}
|
||||
.yui-ac .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;background-color:black;color:white;}
|
||||
.yui-ac .imgtext {position:absolute;width:58px;top:50%;text-align:center;}
|
||||
.yui-ac img {width:60px;height:60px;margin-right:4px;}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Custom Formatting, with a Proxyless Remote DataSource</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete instance uses a ScriptNodeDataSource to to find images from the YQL webservice without a proxy. The generateRequest() method must be customized to comply with the open API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.</p>
|
||||
|
||||
<p>A custom formatter function is defined in order to show thumbnail images in the results container.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="myInput">Yahoo! Image Search:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text" name="p">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.CustomFormatting = (function(){
|
||||
// Instantiate DataSource
|
||||
var oDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?");
|
||||
oDS.responseSchema = {
|
||||
resultsList: "query.results.result",
|
||||
fields: ["url", "thumbnail_url", "clickurl"]
|
||||
};
|
||||
|
||||
// Setting to default value for demonstration purposes.
|
||||
// The webservice needs to support execution of a callback function.
|
||||
oDS.scriptCallbackParam = "callback";
|
||||
|
||||
// Instantiate AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS);
|
||||
|
||||
// Bump up the query delay to reduce server load
|
||||
oAC.queryDelay = 1;
|
||||
|
||||
// The webservice needs custom parameters
|
||||
oAC.generateRequest = function(sQuery) {
|
||||
return "q=select%20*%20from%20search.images%20where%20query%3D%22" +
|
||||
sQuery +
|
||||
"%22%20and%20mimetype%20like%20%22%25jpeg%25%22&format=json";
|
||||
};
|
||||
|
||||
// Result data passed as object for easy access from custom formatter.
|
||||
oAC.resultTypeList = false;
|
||||
// Customize formatter to show thumbnail images
|
||||
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
|
||||
if(oResultData.thumbnail_url) {
|
||||
img = "<img src=\""+ oResultData.thumbnail_url + "\">";
|
||||
}
|
||||
else {
|
||||
img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>";
|
||||
}
|
||||
return "<div class=\"result\">" + img + " <span class=\"name\">" + sResultMatch + "</span></div>";
|
||||
};
|
||||
oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
|
||||
var oData = aArgs[2]; // object literal of selected item's result data
|
||||
|
||||
// Redirect to the img
|
||||
window.location.href = oData.clickurl;
|
||||
});
|
||||
|
||||
// Stub for form validation
|
||||
var validateForm = function() {
|
||||
// Validation code goes here
|
||||
return true;
|
||||
};
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC,
|
||||
validateForm: validateForm
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,108 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Searching Field A, Submitting Field B with itemSelectEvent</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#myAutoComplete {
|
||||
width:15em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
#mySubmit {
|
||||
position:absolute; left:15em; margin-left:1em; /* place the button next to the input */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Searching Field A, Submitting Field B with itemSelectEvent</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. The data consists of an account name, and an account number. The AutoComplete allows the user to search by name, but by subscribing to the itemSelectEvent Custom Event, populates a hidden form field with the ID, which the server would need for processing the hypothetical submission.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<form id="myForm" action="#">
|
||||
<label for="myInput">Find a company in the accounts database:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
<input id="myHidden" type="hidden">
|
||||
</form>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ItemSelectHandler = function() {
|
||||
// Use a LocalDataSource
|
||||
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.accounts);
|
||||
oDS.responseSchema = {fields : ["name", "id"]};
|
||||
|
||||
// Instantiate the AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
oAC.resultTypeList = false;
|
||||
|
||||
// Define an event handler to populate a hidden form field
|
||||
// when an item gets selected
|
||||
var myHiddenField = YAHOO.util.Dom.get("myHidden");
|
||||
var myHandler = function(sType, aArgs) {
|
||||
var myAC = aArgs[0]; // reference back to the AC instance
|
||||
var elLI = aArgs[1]; // reference to the selected LI element
|
||||
var oData = aArgs[2]; // object literal of selected item's result data
|
||||
|
||||
// update hidden form field with the selected item's ID
|
||||
myHiddenField.value = oData.id;
|
||||
};
|
||||
oAC.itemSelectEvent.subscribe(myHandler);
|
||||
|
||||
// Rather than submit the form,
|
||||
// alert the stored ID instead
|
||||
var onFormSubmit = function(e, myForm) {
|
||||
YAHOO.util.Event.preventDefault(e);
|
||||
alert("Company ID: " + myHiddenField.value);
|
||||
};
|
||||
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("myForm"), "submit", onFormSubmit);
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,96 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Tagging Example with alwaysShowContainer</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#myAutoComplete {
|
||||
width:20em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:20em; /* allow enough real estate for the container */
|
||||
}
|
||||
.yui-skin-sam .yui-ac-content { /* set scrolling */
|
||||
max-height:18em;overflow:auto;overflow-x:hidden; /* set scrolling */
|
||||
_height:18em; /* ie6 */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Tagging Example with alwaysShowContainer</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete interaction uses the <code>alwaysShowContainer</code> feature to allow users to find and select tags. Showing the set of previously used tags as a visual enhancement discourages unneccessary duplication of similar tags. As is common for tagging, comma- and semi-colon delimiters have also been enabled. Note that an initial query is needed on page load to get the container to display the first time with the full set of data. Since the container is meant to stay open, CSS is used to give it proper real estate on the page, including scrolling to show a potentially long list of tags.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="myInput">Assign tags:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.TagsAlwaysShow = function() {
|
||||
// Use a LocalDataSource
|
||||
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.tags);
|
||||
// Optional to define fields for single-dimensional array
|
||||
oDS.responseSchema = {fields : ["tag"]};
|
||||
|
||||
// Instantiate the AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
oAC.alwaysShowContainer = true;
|
||||
oAC.minQueryLength = 0; // Can be 0, which will return all results
|
||||
oAC.maxResultsDisplayed = 100; // Show more results, scrolling is enabled via CSS
|
||||
oAC.delimChar = [",",";"]; // Enable comma and semi-colon delimiters
|
||||
oAC.autoHighlight = false; // Auto-highlighting interferes with adding new tags
|
||||
oAC.sendQuery("");
|
||||
|
||||
// Populate list to start a new interaction
|
||||
oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
|
||||
oAC.sendQuery("");
|
||||
});
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,96 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Customizing Remote Requests</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
label {
|
||||
color:#E76300;
|
||||
font-weight:bold;
|
||||
}
|
||||
#myAutoComplete {
|
||||
width:40em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Customizing Remote Requests</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete implementation points to the Yahoo! Search webservice using an XHRDataSource. Since the third-party API requires certain application-specific paramaters to be passed in, the generateRequest() method has been redefined to append these special values. The <code>queryDelay</code> paramater has been increased to account for the large data payload returned by the Yahoo! Search webservice, so as to reduce throttle client-side processing.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<label for="myInput">Yahoo! Search:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.RemoteCustomRequest = function() {
|
||||
// Use an XHRDataSource
|
||||
var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php");
|
||||
// Set the responseType
|
||||
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
|
||||
// Define the schema of the JSON results
|
||||
oDS.responseSchema = {
|
||||
resultsList : "ResultSet.Result",
|
||||
fields : ["Title"]
|
||||
};
|
||||
|
||||
// Instantiate the AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
// Throttle requests sent
|
||||
oAC.queryDelay = .5;
|
||||
// The webservice needs additional parameters
|
||||
oAC.generateRequest = function(sQuery) {
|
||||
return "?output=json&results=100&query=" + sQuery ;
|
||||
};
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue