From 3868e9c3dc731459dae5769967a30a165e76f46b Mon Sep 17 00:00:00 2001 From: Ryan Shaw Date: Wed, 3 Aug 2011 14:42:15 -0600 Subject: [PATCH] make the creative commons license help accessible changed the buttons to be actual s with role=button and use aria-checked="true/false" to reflect state. Change-Id: I083f6db51bc5b2c4900fb9b41ac2f870247aa01d Reviewed-on: https://gerrit.instructure.com/4920 Tested-by: Hudson Reviewed-by: Jon Jensen --- app/coffeescripts/license_help.coffee | 74 +++++++++++++ app/stylesheets/g_instructure.sass | 36 ++++--- config/assets.yml | 2 +- public/javascripts/compiled/license_help.js | 86 +++++++++++++++ public/javascripts/license_help.js | 111 -------------------- public/partials/_license_help.html | 24 ++--- 6 files changed, 192 insertions(+), 141 deletions(-) create mode 100644 app/coffeescripts/license_help.coffee create mode 100644 public/javascripts/compiled/license_help.js delete mode 100644 public/javascripts/license_help.js diff --git a/app/coffeescripts/license_help.coffee b/app/coffeescripts/license_help.coffee new file mode 100644 index 00000000000..66551f48a9a --- /dev/null +++ b/app/coffeescripts/license_help.coffee @@ -0,0 +1,74 @@ +# +# Copyright (C) 2011 Instructure, Inc. +# +# This file is part of Canvas. +# +# Canvas is free software: you can redistribute it and/or modify it under +# the terms of the GNU Affero General Public License as published by the Free +# Software Foundation, version 3 of the License. +# +# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY +# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR +# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more +# details. +# +# You should have received a copy of the GNU Affero General Public License along +# with this program. If not, see . +# + +I18n.scoped "license_help", (I18n) -> + licenceTypes = ["by", "nc", "nd", "sa"] + toggleButton = (el, check) -> $(el).toggleClass('selected', !!check).attr('aria-checked', !!check) + checkButton = (el) -> toggleButton(el, true) + uncheckButton = (el) -> toggleButton(el, false) + $(".license_help_link").live "click", (event) -> + event.preventDefault() + $dialog = $("#license_help_dialog") + $select = $(this).prev("select") + if $dialog.length == 0 + $dialog = $("
").attr("id", "license_help_dialog").hide().loadingImage().appendTo("body") + .delegate(".option", "click", (event)-> + event.preventDefault() + select = !$(this).is('.selected') + toggleButton this, select + if select + checkButton $dialog.find(".option.by") + if $(this).hasClass("sa") + uncheckButton $dialog.find(".option.nd") + else if $(this).hasClass("nd") + uncheckButton $dialog.find(".option.sa") + else if $(this).hasClass("by") + uncheckButton $dialog.find(".option") + $dialog.triggerHandler("option_change") + return + ).delegate(".select_license", "click", ()-> + $dialog.data("select").val($dialog.data("current_license") or "private") if $dialog.data("select") + $dialog.dialog("close") + ).bind("license_change", (event, license) -> + $dialog.find(".license").removeClass("active").filter("." + license).addClass("active") + uncheckButton $dialog.find(".option") + if $dialog.find(".license.active").length == 0 + license = "private" + $dialog.find(".license.private").addClass("active") + $dialog.data "current_license", license + if license.match(/^cc/) + checkButton $dialog.find(".option.#{type}") for type in licenceTypes when type is 'by' or license.match("_#{type}") + ).bind("option_change", -> + args = [ "cc" ] + args.push(type) for type in licenceTypes when $dialog.find(".option.#{type}").is(".selected") + license = (if args.length == 1 then "private" else args.join("_")) + $dialog.triggerHandler "license_change", license + ).dialog( + autoOpen: false + title: I18n.t("content_license_help", "Content Licensing Help") + width: 700 + ) + $.get "/partials/_license_help.html", (html) -> + $dialog + .loadingImage('remove') + .html(html) + .triggerHandler "license_change", $select.val() or "private" + $dialog.find(".select_license").showIf $select.length + $dialog.data "select", $select + $dialog.triggerHandler "license_change", $select.val() or "private" + $dialog.dialog "open" diff --git a/app/stylesheets/g_instructure.sass b/app/stylesheets/g_instructure.sass index d367f726ec2..0fba425b607 100644 --- a/app/stylesheets/g_instructure.sass +++ b/app/stylesheets/g_instructure.sass @@ -1406,6 +1406,25 @@ h2.h-margin-top,h3.h-margin-top margin-top: 20px #license_help_dialog + #licence-help-options + th + vertical-align: top + white-space: nowrap + .option + display: block + color: inherit + text-decoration: none + margin: 0 2px + padding: 4px 2px + border: 2px solid #444 + +border-radius(5px) + &:hover + background-color: #eee + &.selected + background-color: #c3decf + img + vertical-align: middle + .licenses margin-top: 10px .license @@ -1420,25 +1439,10 @@ h2.h-margin-top,h3.h-margin-top .select float: left margin-right: 10px - .option_explanation + #option-explanations td font-size: 0.8em padding: 5px 5px 0 vertical-align: top - .option - vertical-align: top - white-space: nowrap - .holder - cursor: pointer - margin: 0 2px - padding: 4px 2px - border: 2px solid #444 - +border-radius(5px) - &:hover - background-color: #eee - &.selected .holder - background-color: #c3decf - img - vertical-align: middle form.user_content_post_form display: none diff --git a/config/assets.yml b/config/assets.yml index c76dd55a00d..9dec345a7b4 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -32,7 +32,7 @@ javascripts: - public/javascripts/ajax_errors.js - public/javascripts/page_views.js - public/javascripts/feedback.js - - public/javascripts/license_help.js + - public/javascripts/compiled/license_help.js - public/javascripts/wiki_sidebar.js - public/javascripts/translations/_core_en.js speed_grader: diff --git a/public/javascripts/compiled/license_help.js b/public/javascripts/compiled/license_help.js new file mode 100644 index 00000000000..639a724e361 --- /dev/null +++ b/public/javascripts/compiled/license_help.js @@ -0,0 +1,86 @@ +(function() { + I18n.scoped("license_help", function(I18n) { + var checkButton, licenceTypes, toggleButton, uncheckButton; + licenceTypes = ["by", "nc", "nd", "sa"]; + toggleButton = function(el, check) { + return $(el).toggleClass('selected', !!check).attr('aria-checked', !!check); + }; + checkButton = function(el) { + return toggleButton(el, true); + }; + uncheckButton = function(el) { + return toggleButton(el, false); + }; + return $(".license_help_link").live("click", function(event) { + var $dialog, $select; + event.preventDefault(); + $dialog = $("#license_help_dialog"); + $select = $(this).prev("select"); + if ($dialog.length === 0) { + $dialog = $("
").attr("id", "license_help_dialog").hide().loadingImage().appendTo("body").delegate(".option", "click", function(event) { + var select; + event.preventDefault(); + select = !$(this).is('.selected'); + toggleButton(this, select); + if (select) { + checkButton($dialog.find(".option.by")); + if ($(this).hasClass("sa")) { + uncheckButton($dialog.find(".option.nd")); + } else if ($(this).hasClass("nd")) { + uncheckButton($dialog.find(".option.sa")); + } + } else if ($(this).hasClass("by")) { + uncheckButton($dialog.find(".option")); + } + $dialog.triggerHandler("option_change"); + }).delegate(".select_license", "click", function() { + if ($dialog.data("select")) { + $dialog.data("select").val($dialog.data("current_license") || "private"); + } + return $dialog.dialog("close"); + }).bind("license_change", function(event, license) { + var type, _i, _len, _results; + $dialog.find(".license").removeClass("active").filter("." + license).addClass("active"); + uncheckButton($dialog.find(".option")); + if ($dialog.find(".license.active").length === 0) { + license = "private"; + $dialog.find(".license.private").addClass("active"); + } + $dialog.data("current_license", license); + if (license.match(/^cc/)) { + _results = []; + for (_i = 0, _len = licenceTypes.length; _i < _len; _i++) { + type = licenceTypes[_i]; + if (type === 'by' || license.match("_" + type)) { + _results.push(checkButton($dialog.find(".option." + type))); + } + } + return _results; + } + }).bind("option_change", function() { + var args, license, type, _i, _len; + args = ["cc"]; + for (_i = 0, _len = licenceTypes.length; _i < _len; _i++) { + type = licenceTypes[_i]; + if ($dialog.find(".option." + type).is(".selected")) { + args.push(type); + } + } + license = (args.length === 1 ? "private" : args.join("_")); + return $dialog.triggerHandler("license_change", license); + }).dialog({ + autoOpen: false, + title: I18n.t("content_license_help", "Content Licensing Help"), + width: 700 + }); + $.get("/partials/_license_help.html", function(html) { + return $dialog.loadingImage('remove').html(html).triggerHandler("license_change", $select.val() || "private"); + }); + } + $dialog.find(".select_license").showIf($select.length); + $dialog.data("select", $select); + $dialog.triggerHandler("license_change", $select.val() || "private"); + return $dialog.dialog("open"); + }); + }); +}).call(this); diff --git a/public/javascripts/license_help.js b/public/javascripts/license_help.js deleted file mode 100644 index ab4873b1083..00000000000 --- a/public/javascripts/license_help.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * Copyright (C) 2011 Instructure, Inc. - * - * This file is part of Canvas. - * - * Canvas is free software: you can redistribute it and/or modify it under - * the terms of the GNU Affero General Public License as published by the Free - * Software Foundation, version 3 of the License. - * - * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY - * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more - * details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - */ -I18n.scoped("license_help", function(I18n) { -$(document).ready(function() { - $(".license_help_link").live('click', function(event) { - event.preventDefault(); - var $dialog = $("#license_help_dialog"); - var $select = $(this).prev("select"); - if($dialog.length == 0) { - $dialog = $("
").attr('id', 'license_help_dialog').hide(); - $dialog.html("Loading..."); - $("body").append($dialog); - $.get("/partials/_license_help.html", function(html) { - $dialog.html(html); - $dialog.delegate('.option', 'click', function(event) { - $(this).toggleClass('selected'); - if($(this).hasClass('selected')) { - $dialog.find(".option.by").addClass('selected'); - if($(this).hasClass('sa')) { - $dialog.find(".option.nd").removeClass('selected'); - } else if($(this).hasClass('nd')) { - $dialog.find(".option.sa").removeClass('selected'); - } - } else { - if($(this).hasClass('by')) { - $dialog.find(".option").removeClass('selected'); - } - } - $dialog.triggerHandler('option_change'); - }); - $dialog.bind('license_change', function(event, license) { - $dialog.find(".license").removeClass('active').filter("." + license).addClass('active'); - $dialog.find(".option").removeClass('selected'); - if($dialog.find(".license.active").length == 0) { - license = 'private'; - $dialog.find(".license.private").addClass('active'); - } - $dialog.data('current_license', license); - if(license.match(/^cc/)) { - $dialog.find(".option.by").addClass('selected'); - if(license.match(/_sa/)) { - $dialog.find(".option.sa").addClass('selected'); - } - if(license.match(/_nc/)) { - $dialog.find(".option.nc").addClass('selected'); - } - if(license.match(/_nd/)) { - $dialog.find(".option.nd").addClass('selected'); - } - } - }); - $dialog.bind('option_change', function() { - var args = ['cc'], - licence; - if($dialog.find(".option.by").hasClass('selected')) { - args.push('by'); - } - if($dialog.find(".option.nc").hasClass('selected')) { - args.push('nc'); - } - if($dialog.find(".option.nd").hasClass('selected')) { - args.push('nd'); - } - if($dialog.find(".option.sa").hasClass('selected')) { - args.push('sa'); - } - if(args.length == 1) { - license = 'private'; - } else { - license = args.join("_"); - } - $dialog.triggerHandler('license_change', license); - }); - $dialog.delegate('.select_license', 'click', function() { - var $dialog_select = $dialog.data('select'); - if($dialog_select) { - $dialog_select.val($dialog.data('current_license') || 'private'); - } - $dialog.dialog('close'); - }); - $dialog.triggerHandler('license_change', $select.val() || "private"); - }); - $dialog.dialog({ - autoOpen: false, - title: I18n.t("content_license_help", "Content Licensing Help"), - width: 700, - height: 360 - }); - } - $dialog.find(".select_license").showIf($select.length > 0); - $dialog.data('select', $select); - $dialog.triggerHandler('license_change', $select.val() || "private"); - $dialog.dialog('open'); - }); -}); -}); \ No newline at end of file diff --git a/public/partials/_license_help.html b/public/partials/_license_help.html index 0748a8f41ba..970a436d208 100644 --- a/public/partials/_license_help.html +++ b/public/partials/_license_help.html @@ -1,4 +1,3 @@ -

Help with Content Licensing

Canvas can track the default license for content inside of your course. By default all content is considered copyrighted, but you can also release your content to the public domain or choose a Creative Commons license. @@ -9,24 +8,24 @@ want to apply and we'll show you the correct license for those conditions.
- - - - - + + + + + - - - - - + + + + +
Attribution
Share Alike
Non-Commercial
No Derivative Works
Attribution Share Alike Non-Commercial No Derivative Works
You let others copy, distribute, display, and perform your copyrighted work -- and derivative works based upon it -- but only if they give credit the way you request.You allow others to distribute derivative works only under a license identical to the license that governs your work.You let others copy, distribute, display, and perform your work -- and derivative works based upon it -- but for non-commercial purposes only.You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.
You let others copy, distribute, display, and perform your copyrighted work -- and derivative works based upon it -- but only if they give credit the way you request.You allow others to distribute derivative works only under a license identical to the license that governs your work.You let others copy, distribute, display, and perform your work -- and derivative works based upon it -- but for non-commercial purposes only.You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.
-
+
@@ -37,5 +36,4 @@ want to apply and we'll show you the correct license for those conditions.
CC Attribution Non-Commercial
CC Attribution Non-Commercial Share Alike
CC Attribution Non-Commercial No Derivatives
-