~bcsaller/juju-gui/charmFind

<p>This example uses DD and <a href="http://developer.yahoo.com/yql/">YQL</a> to build a Photo Browser application. This example was part of the YUI 3 presentation by <a href="http://twiiter.com/davglass">@davglass</a> at <a href="http://openhacklondon.pbworks.com/">Open Hack : London</a></p>

</div>

View Example in New Window

</a>

</div>

<p>In this example, Drag and Drop is heavily customized by using "event bubbling" and "custom proxies".</p>

<p>When you see <code>Y.DD.DDM.on</code> in the code, you are seeing the built-in "event bubbling".</p>

<p>The DD <code>dragNode</code> is the proxy node, we add some styles to it allowing it to look the way we want.</p>

<p>Here is the Flickr YQL query used in this example.</p>

<pre class="code prettyprint">SELECT * FROM flickr.photos.search(100) WHERE

(text="yuiconf")

AND (safe_search = 1)

AND (media = "photos")

AND (api_key = "1895311ec0d2e23431a6407f3e8dffcc")</pre>

<p><em>Note: You need to get your own API key, please do not use ours.</em></p>

<h3 id="slider-and-stylesheet">Slider and StyleSheet</h3>

<p>In this example, we will use the Slider control to dynamically manipulate a CSS Style Rule.</p>

<p>First, we need to create the slider and render it.</p>

<pre class="code prettyprint">//Create and render the slider

var sl = new Y.Slider({

length: '200px', value: 40, max: 70, min: 5

}).render('.horiz_slider');</pre>

<p>Now, we listen for the Slider's <code>valueChange</code> event. This event is fired when the value of the Slider has changed.</p>

<p>Next we use the StyleSheet utility to dynamically change a style rule to resize the images.

The style rule that we want to change is <code>#yui-main .yui-g ul li</code>. When the Slider's value changes, we will take the value and divide it by 2, then use that as the percentage width of the li.

This will give us the effect we want (resizing images) without touching all the images via the DOM.

</p>

<pre class="code prettyprint">//Listen for the change

sl.after('valueChange',function (e) {

//Insert a dynamic stylesheet rule:

var sheet = new Y.StyleSheet('image_slider');

sheet.set('#yui-main .yui-g ul li', {

width: (e.newVal / 2) + '%'

});

});</pre>

<h3 id="event-delegation">Event Delegation</h3>

<p>This listener listens for all <code>mouseup</code> events on the <code>document</code> and it will only fire when the target element matches the <code>*</code> selector (which should be all elements).</p>

<p>This way we can remove all the <code>selected</code> CSS classes from all the images in the browser when a <code>mouseup</code> occurs, only if the shift key was not pressed. We can then check to determine if the mouseup came from one of the images. If it has, add the selected class back to it.</p>

<pre class="code prettyprint">//Listen for all mouseups on the document (selecting/deselecting images)

Y.delegate('mouseup' , function(e) {

if (!e.shiftKey) {

//No shift key - remove all selected images

wrapper.all('img.selected').removeClass('selected');

}

//Check if the target is an image and select it.

if (e.target.test('#yui-main .yui-g ul li img')) {

e.target.addClass('selected');

}

}, document, '*');</pre>

<p>This listener, listens for all <code>click</code> events on the album list <code>#photoList li</code>.

First, it stops the click, so the href is not followed. Next, it removes all the <code>selected</code> classes from the list. Then, it adds the <code>selected</code> class to the item that was clicked on.</p>

<p>After that UI setup, it uses Selectors to change the view of the images in the browser.

First, it checks if we are viewing "all" or a "sub album". If all is selected, it removes the <code>hidden</code> class from all the images.

If it was an album, it adds the <code>hidden</code> class to all the images, then selects all the images with the class of its <code>id</code>, then it removes the hidden class from them.

</p>

100

<p>Basically, it hides all the images, then determines the ones it needs to show and removes the <code>hidden</code> class from them.</p>

101

102

<pre class="code prettyprint">//Listen for all clicks on the '#photoList li' selector

103

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

104

//Prevent the click

105

e.halt();

106

//Remove all the selected items

107

e.currentTarget.get('parentNode').all('li.selected').removeClass('selected');

108

//Add the selected class to the one that one clicked

109

e.currentTarget.addClass('selected');

110

//The "All Photos" link was clicked

111

if (e.currentTarget.hasClass('all')) {

112

//Remove all the hidden classes

113

wrapper.all('li').removeClass('hidden');

114

} else {

115

//Another "album" was clicked, get its id

116

var c = e.target.get('id');

117

//Hide all items by adding the hidden class

118

wrapper.all('li').addClass('hidden');

119

//Now, find all the items with the class name the same as the album id

120

//and remove the hidden class

121

wrapper.all('li.' + c).removeClass('hidden');

122

}

123

}, document, '#photoList li');</pre>

124

125

126

127

<h3 id="full-source">Full Source</h3>

128

<p>Here is the full commented JavaScript source for this example.</p>

129

130

<pre class="code prettyprint">YUI().use('yql', 'node', 'anim', 'dd', 'dd-plugin', 'dd-drop-plugin', 'slider', 'stylesheet', 'event-delegate', function(Y) {

131

//Get a reference to the wrapper to use later and add a loading class to it.

132

var wrapper = Y.one('#yui-main .yui-g ul').addClass('loading');

133

//Set it's height to the height of the viewport so we can scroll it.

134

wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px');

135

Y.on('windowresize', function() { wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px'); });

136

//Make the YQL query.

137

Y.YQL('SELECT * FROM flickr.photos.search(100) WHERE (text="yuiconf") AND (safe_search = 1) AND (media = "photos") AND (api_key = "1895311ec0d2e23431a6407f3e8dffcc")', function(e) {

138

if (e.query && e.query.results) {

139

var photos = e.query.results.photo;

140

//Walk the returned photos array

141

Y.each(photos, function(v, k) {

142

//Create our URL

143

var url = 'http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_m.jpg',

144

//Create the image and the LI

145

li = Y.Node.create('<li class="loading"><img src="' + url + '" title="' + v.title + '"></li>'),

146

//Get the image from the LI

147

img = li.get('firstChild');

148

//Append the li to the wrapper

149

wrapper.appendChild(li);

150

//This little hack moves the tall images to the bottom of the list

151

//So they float better ;)

152

img.on('load', function() {

153

//Is the height longer than the width?

154

var c = ((this.get('height') > this.get('width')) ? 'tall' : 'wide');

155

this.addClass(c);

156

if (c === 'tall') {

157

//Move it to the end of the list.

158

this.get('parentNode.parentNode').removeChild(this.get('parentNode'));

159

wrapper.appendChild(this.get('parentNode'));

160

}

161

this.get('parentNode').removeClass('loading');

162

});

163

});

164

//Get all the newly added li's

165

wrapper.all('li').each(function(node) {

166

//Plugin the Drag plugin

167

this.plug(Y.Plugin.Drag, {

168

offsetNode: false

169

});

170

//Plug the Proxy into the DD object

171

this.dd.plug(Y.Plugin.DDProxy, {

172

resizeFrame: false,

173

moveOnEnd: false,

174

borderStyle: 'none'

175

});

176

});

177

//Create and render the slider

178

var sl = new Y.Slider({

179

length: '200px', value: 40, max: 70, min: 5

180

}).render('.horiz_slider');

181

//Listen for the change

182

sl.after('valueChange',function (e) {

183

//Insert a dynamic stylesheet rule:

184

var sheet = new Y.StyleSheet('image_slider');

185

sheet.set('#yui-main .yui-g ul li', {

186

width: (e.newVal / 2) + '%'

187

});

188

});

189

//Remove the DDM as a bubble target..

190

sl._dd.removeTarget(Y.DD.DDM);

191

//Remove the wrappers loading class

192

wrapper.removeClass('loading');

193

Y.one('#ft').removeClass('loading');

194

}

195

});

196

//Listen for all mouseup's on the document (selecting/deselecting images)

197

Y.delegate('mouseup', function(e) {

198

if (!e.shiftKey) {

199

//No shift key - remove all selected images

200

wrapper.all('img.selected').removeClass('selected');

201

}

202

//Check if the target is an image and select it.

203

if (e.target.test('#yui-main .yui-g ul li img')) {

204

e.target.addClass('selected');

205

}

206

}, document, '*');

207

208

//Listen for all clicks on the '#photoList li' selector

209

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

210

//Prevent the click

211

e.halt();

212

//Remove all the selected items

213

e.currentTarget.get('parentNode').all('li.selected').removeClass('selected');

214

//Add the selected class to the one that one clicked

215

e.currentTarget.addClass('selected');

216

//The "All Photos" link was clicked

217

if (e.currentTarget.hasClass('all')) {

218

//Remove all the hidden classes

219

wrapper.all('li').removeClass('hidden');

220

} else {

221

//Another "album" was clicked, get it's id

222

var c = e.currentTarget.get('id');

223

//Hide all items by adding the hidden class

224

wrapper.all('li').addClass('hidden');

225

//Now, find all the items with the class name the same as the album id

226

//and remove the hidden class

227

wrapper.all('li.' + c).removeClass('hidden');

228

}

229

}, document, '#photoList li');

230

231

//Stop the drag with the escape key

232

Y.one(document).on('keyup', function(e) {

233

//The escape key was pressed

234

if ((e.keyCode === 27) || (e.charCode === 27)) {

235

//We have an active Drag

236

if (Y.DD.DDM.activeDrag) {

237

//Stop the drag

238

Y.DD.DDM.activeDrag.stopDrag();

239

}

240

}

241

});

242

//On the drag:mouseDown add the selected class

243

Y.DD.DDM.on('drag:mouseDown', function(e) {

244

var img = e.target.get('node').one('img');

245

//If it's a gesture event, then we need to act differently

246

if (Y.DD.Drag.START_EVENT.indexOf('gesture') === 0) {

247

if (img.hasClass('selected')) {

248

img.removeClass('selected');

249

} else {

250

img.addClass('selected');

251

}

252

} else {

253

img.removeClass('selected');

254

}

255

});

256

//On drag start, get all the selected elements

257

//Add the count to the proxy element and offset it to the cursor.

258

Y.DD.DDM.on('drag:start', function(e) {

259

var img = e.target.get('node').one('img').addClass('selected');

260

//How many items are selected

261

var count = wrapper.all('img.selected').size();

262

//Set the style on the proxy node

263

e.target.get('dragNode').setStyles({

264

height: '25px', width: '25px'

265

}).set('innerHTML', '<span>' + count + '</span>');

266

//Offset the dragNode

267

e.target.deltaXY = [25, 5];

268

});

269

//We dropped on a drop target

270

Y.DD.DDM.on('drag:drophit', function(e) {

271

//get the images that are selected.

272

var imgs = wrapper.all('img.selected'),

273

//The xy position of the item we dropped on

274

toXY = e.drop.get('node').getXY();

275

276

imgs.each(function(node) {

277

//Clone the image, position it on top of the original and animate it to the drop target

278

node.get('parentNode').addClass(e.drop.get('node').get('id'));

279

var n = node.cloneNode().set('id', '').setStyle('position', 'absolute');

280

Y.one('body').appendChild(n);

281

n.setXY(node.getXY());

282

new Y.Anim({

283

node: n,

284

to: {

285

height: 20, width: 20, opacity: 0,

286

top: toXY[1], left: toXY[0]

287

288

from: {

289

width: node.get('offsetWidth'),

290

height: node.get('offsetHeight')

291

292

duration: .5

293

}).run();

294

});

295

//Update the count

296

var count = wrapper.all('li.' + e.drop.get('node').get('id')).size();

297

e.drop.get('node').one('span').set('innerHTML', '(' + count + ')');

298

});

299

//Add drop support to the albums

300

Y.all('#photoList li').each(function(node) {

301

if (!node.hasClass('all')) {

302

//make all albums Drop Targets except the all photos.

303

node.plug(Y.Plugin.Drop);

304

}

305

});

306

});</pre>

307

308

</div>

309

</div>

310

</div>

311

312

313

314

315

316

317

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

318

</div>

319

320

321

322

<li>

323

324

</li>

325

<li>

326

327

</li>

328

<li>

329

<a href="#slider-and-stylesheet">Slider and StyleSheet</a>

330

</li>

331

<li>

332

<a href="#event-delegation">Event Delegation</a>

333

</li>

334

<li>

335

<a href="#full-source">Full Source</a>

336

</li>

337

</ul>

338

</div>

339

</div>

340

341

342

343

344

345

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

346

</div>

347

348

349

350

351

352

353

<a href="simple-drag.html">Simple Drag</a>

354

</li>

355

356

357

358

359

<a href="drag-plugin.html">Drag - Node plugin</a>

360

</li>

361

362

363

364

365

<a href="proxy-drag.html">Drag - Proxy</a>

366

</li>

367

368

369

370

371

<a href="constrained-drag.html">Drag - Constrained to a Region</a>

372

</li>

373

374

375

376

377

<a href="groups-drag.html">Drag - Interaction Groups</a>

378

</li>

379

380

381

382

383

<a href="shim-drag.html">Using the Drag Shim</a>

384

</li>

385

386

387

388

389

<a href="drop-code.html">Using Drop Based Coding</a>

390

</li>

391

392

393

394

395

<a href="winscroll.html">Window Scrolling</a>

396

</li>

397

398

399

400

401

<a href="delegate.html">Drag Delegation</a>

402

</li>

403

404

405

406

407

<a href="delegate-drop.html">Drag Delegation with a Drop Target</a>

408

</li>

409

410

411

412

413

<a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>

414

</li>

415

416

417

418

419

<a href="list-drag.html">List Reorder w/Bubbling</a>

420

</li>

421

422

423

424

425

<a href="scroll-list.html">List Reorder w/Scrolling</a>

426

</li>

427

428

429

430

431

<a href="anim-drop.html">Animated Drop Targets</a>

432

</li>

433

434

435

436

437

<a href="photo-browser.html">Photo Browser</a>

438

</li>

439

440

441

442

443

<a href="portal-drag.html">Portal Style Example</a>

444

</li>

445

446

447

448

449

450

451

</ul>

452

</div>

453

</div>

454

455

456

457

458

459

<h2 class="no-toc">Examples That Use This Component</h2>

460

</div>

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

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

500

</li>

501

502

503

504

505

<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>

506

</li>

507

508

509

</ul>

510

</div>

511

</div>

512

513

</div>

514

</div>

515

</div>

516

</div>

517

518

519

520

521

</body>

522

</html>

Older »