~bac/juju-gui/trunkcopy

<p><strong>Short URL:</strong> <input type="text" id="expand" value="http://bit.ly/paj1De" size="35"> <input type="button" id="do_expand" value="Expand" class="button"></p>

(function() {

var username = 'davglass',

key = 'R_d2405255a50490af4394745edeb957f7';

YUI().use('event-key', 'node', 'gallery-bitly', function(Y) {

To use the bit.ly module, you must have a bit.ly username and apiKey.

If you do not have an apiKey, sign up for a bitly account and go to

your Account page to get your apiKey.

var bitly = new Y.bitly({

username: username,

key: key

}),

exp = Y.one('#expand'),

short = Y.one('#shorten'),

createElm = function(par, url) {

var item = '';

if (par.one('em')) {

item = par.one('em');

} else {

item = Y.Node.create('<em></em>');

par.append(item);

}

item.set('innerHTML', '<a href="' + url + '">' + url + '</a>');

return item;

shorten = function(node) {

bitly.shorten(short.get('value'), function(r) {

var par = node.get('parentNode'),

item = createElm(par, r.shortUrl);

exp.set('value', r.shortUrl);

});

expand = function(node) {

bitly.expandByURL(exp.get('value'), function(r) {

var par = node.get('parentNode'),

item = createElm(par, r.longUrl);

short.set('value', r.longUrl);

});

};

Y.on('click', function(e) {

shorten(e.target);

}, '#do_shorten');

Y.on('click', function(e) {

expand(e.target);

}, '#do_expand');

Y.on('blur', function(e) {

shorten(e.target);

}, '#shorten');

Y.on('blur', function(e) {

expand(e.target);

}, '#expand');

short.on('key', function(e) {

shorten(e.target);

}, 'enter');

exp.on('key', function(e) {

expand(e.target);

100

}, 'enter');

101

102

});

103

104

105

})();

106

</script>

107

108

</div>

109

110

<h3 id="loading-gallery-modules">Loading Gallery Modules</h3>

111

<p>If a Gallery module has been pushed to the CDN, it will be available to use as a first class YUI 3 module.</p>

112

<p>To load a Gallery module, simply add its module name to your <code>YUI().use</code> call. In the code sample below we are using the <code>gallery-bitly</code> module.</p>

113

114

<pre class="code prettyprint">YUI().use('gallery-bitly', function(Y) {

115

//Y.bitly is available here

116

});</pre>

117

118

119

<h3 id="bitly-example">Bitly example</h3>

120

<p>This simple example demonstrates using the <a href="http://yuilibrary.com/gallery/show/bitly">gallery-bitly</a> module to expand and shorten url's.</p>

121

<p><strong>Note: </strong> We are using the gallery module directly from the <code>use</code> statement, no configuration needed.</p>

122

123

<pre class="code prettyprint">YUI().use('event-key', 'node', 'gallery-bitly', function(Y) {

124

125

To use the bit.ly module, you must have a bit.ly username and apiKey.

126

If you do not have an apiKey, sign up for a bitly account and go to

127

your Account page to get your apiKey.

128

129

var bitly = new Y.bitly({

130

username: username,

131

key: key

132

}),

133

exp = Y.one('#expand'),

134

short = Y.one('#shorten'),

135

createElm = function(par, url) {

136

var item = '';

137

if (par.one('em')) {

138

item = par.one('em');

139

} else {

140

item = Y.Node.create('<em></em>');

141

par.append(item);

142

}

143

item.set('innerHTML', '<a href="' + url + '">' + url + '</a>');

144

return item;

145

146

shorten = function(node) {

147

bitly.shorten(short.get('value'), function(r) {

148

var par = node.get('parentNode'),

149

item = createElm(par, r.shortUrl);

150

151

exp.set('value', r.shortUrl);

152

});

153

154

expand = function(node) {

155

bitly.expandByURL(exp.get('value'), function(r) {

156

var par = node.get('parentNode'),

157

item = createElm(par, r.longUrl);

158

159

short.set('value', r.longUrl);

160

});

161

};

162

163

164

Y.on('click', function(e) {

165

shorten(e.target);

166

}, '#do_shorten');

167

168

Y.on('click', function(e) {

169

expand(e.target);

170

}, '#do_expand');

171

172

Y.on('blur', function(e) {

173

shorten(e.target);

174

}, '#shorten');

175

176

Y.on('blur', function(e) {

177

expand(e.target);

178

}, '#expand');

179

180

short.on('key', function(e) {

181

shorten(e.target);

182

}, 'enter');

183

184

exp.on('key', function(e) {

185

expand(e.target);

186

}, 'enter');

187

188

});</pre>

189

190

</div>

191

</div>

192

</div>

193

194

195

196

197

198

199

<h2 class="no-toc">Table of Contents</h2>

200

</div>

201

202

203

204

<li>

205

<a href="#loading-gallery-modules">Loading Gallery Modules</a>

206

</li>

207

<li>

208

<a href="#bitly-example">Bitly example</a>

209

</li>

210

</ul>

211

</div>

212

</div>

213

214

215

216

217

218

<h2 class="no-toc">Examples</h2>

219

</div>

220

221

222

223

224

225

226

227

</li>

228

229

230

231

232

<a href="yui-multi.html">Multiple Instances</a>

233

</li>

234

235

236

237

238

<a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>

239

</li>

240

241

242

243

244

<a href="yui-extend.html">Create Class Hierarchies with `extend`</a>

245

</li>

246

247

248

249

250

<a href="yui-augment.html">Compose Classes of Objects with `augment`</a>

251

</li>

252

253

254

255

256

<a href="yui-mix.html">Add Behaviors to Objects with `mix`</a>

257

</li>

258

259

260

261

262

<a href="yui-merge.html">Combine Data Sets with `merge`</a>

263

</li>

264

265

266

267

268

<a href="yui-isa.html">Check Data Types with `Lang`</a>

269

</li>

270

271

272

273

274

<a href="yui-ua.html">Browser Detection with `UA`</a>

275

</li>

276

277

278

279

280

<a href="yui-yui2.html">Working with YUI 2 in 3</a>

281

</li>

282

283

284

285

286

<a href="yui-gallery.html">Natively use YUI Gallery Modules</a>

287

</li>

288

289

290

291

292

<a href="loader-resolve.html">Programatically use Loader</a>

293

</li>

294

295

296

297

298

<a href="parallel.html">Using Y.Parallel</a>

299

</li>

300

301

302

</ul>

303

</div>

304

</div>

305

306

307

308

</div>

309

</div>

310

</div>

311

</div>

312

313

314

315

316

</body>

317

</html>

Older »