Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(398)

Unified Diff: ui/webui/resources/js/action_link.js

Issue 668983004: Add <a is="action-link">, a web component extension of <a> for in-page actions. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fixes Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: ui/webui/resources/js/action_link.js
diff --git a/ui/webui/resources/js/action_link.js b/ui/webui/resources/js/action_link.js
new file mode 100644
index 0000000000000000000000000000000000000000..5410bcc831d819b9ae1ad4ffe69f6f1a798ce2cf
--- /dev/null
+++ b/ui/webui/resources/js/action_link.js
@@ -0,0 +1,62 @@
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Action links are elements that are used to perform an in-page navigation or
+// action (e.g. showing a dialog).
+//
+// They look like normal anchor (<a>) tags as their text color is blue. However,
+// they're subtly different as they're not initially underlined (giving users a
+// clue that underlined links navigate while action links don't).
+//
+// Action links look very similar to normal links when hovered (hand cursor,
+// underlined). This gives the user an idea that clicking this link will do
+// something similar to navigation but in the same page.
+//
+// They can be created in JavaScript like this:
+//
+// var link = document.createElement('a', 'action-link'); // Note second arg.
+//
+// or with a constructor like this:
+//
+// var link = new ActionLink();
+//
+// They can be used easily from HTML as well, like so:
+//
+// <a is="action-link">Click me!</a>
+//
+// Using the <action-link> tag or document.createElement('action-link') is not
+// currently supported and is not the preferred way of extending tags.
+
+/**
+ * @constructor
+ * @extends {HTMLAnchorElement}
+ */
+var ActionLink = document.registerElement('action-link', {
+ prototype: {
+ __proto__: HTMLAnchorElement.prototype,
+
+ createdCallback: function() {
+ if (this.tagName == 'action-link')
+ throw 'Use <a is="action-link"> instead of <action-link>';
+
+ // Links aren't tabble unless there's an [href] attribute set. Setting
+ // this adds undesirable "Open link in new tab..." context menu handlers
+ // so just manually add to tab order instead.
+ this.tabIndex = 0;
+
+ this.addEventListener('click', function(e) {
+ e.preventDefault();
+ });
+
+ this.addEventListener('keydown', function(e) {
+ if (e.keyIdentifier == 'Enter') {
+ e.preventDefault();
+ e.stopPropagation();
+ this.click();
+ }
+ });
+ },
+ },
+ extends: 'a',
+});

Powered by Google App Engine
This is Rietveld 408576698