ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

make the creative commons license help accessible 

changed the buttons to be actual <a>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 <hudson@instructure.com>
Reviewed-by: Jon Jensen <jon@instructure.com>
This commit is contained in:
Ryan Shaw 2011-08-03 14:42:15 -06:00
parent ff13e31273
commit 3868e9c3dc
6 changed files with 192 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/coffeescripts/license_help.coffee Normal file
View File

@ -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 <http://www.gnu.org/licenses/>.
#
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 = $("<div/>").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"

36
app/stylesheets/g_instructure.sass
View File

@ -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

2
config/assets.yml
View File

@ -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:

86
public/javascripts/compiled/license_help.js Normal file
View File

@ -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 = $("<div/>").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);

111
public/javascripts/license_help.js
View File

@ -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 <http://www.gnu.org/licenses/>.
*/
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 = $("<div/>").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');
});
});
});

24
public/partials/_license_help.html
View File

@ -1,4 +1,3 @@
<h2>Help with Content Licensing</h2>
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.
<div style="margin-top: 10px;">
<table>
<thead>
<tr>
<th class="option by"><div class="holder"><img src='/images/cc/attribution.gif' /> Attribution</div></th>
<th class="option sa"><div class="holder"><img src='/images/cc/share_alike.gif' /> Share Alike</div></th>
<th class="option nc"><div class="holder"><img src='/images/cc/non_commercial.gif' /> Non-Commercial</div></th>
<th class="option nd"><div class="holder"><img src='/images/cc/no_derivative_works.gif' /> No Derivative Works</div></th>
<tr id="licence-help-options">
<th><a href="#" class="option by" role="button"><img src='/images/cc/attribution.gif' alt="" /> Attribution</a></th>
<th><a href="#" class="option sa" role="button"><img src='/images/cc/share_alike.gif' alt="" /> Share Alike</div></a></th>
<th><a href="#" class="option nc" role="button"><img src='/images/cc/non_commercial.gif' alt="" /> Non-Commercial</div></a></th>
<th><a href="#" class="option nd" role="button"><img src='/images/cc/no_derivative_works.gif' alt="" /> No Derivative Works</div></a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="option_explanation">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.</td>
<td class="option_explanation">You allow others to distribute derivative works only under a license identical to the license that governs your work.</td>
<td class="option_explanation">You let others copy, distribute, display, and perform your work -- and derivative works based upon it -- but for non-commercial purposes only.</td>
<td class="option_explanation">You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.</td>
<tr id="option-explanations">
<td>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.</td>
<td>You allow others to distribute derivative works only under a license identical to the license that governs your work.</td>
<td>You let others copy, distribute, display, and perform your work -- and derivative works based upon it -- but for non-commercial purposes only.</td>
<td>You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.</td>
</tr>
</tbody>
</table>
</div>
<div class="licenses">
<div class="licenses clearfix">
<div class="select">
<button class="button select_license">Use This License</button>
</div>
@ -37,5 +36,4 @@ want to apply and we'll show you the correct license for those conditions.
<div class="license cc_by_nc"><img src="/images/cc/cc_by_nc.png" alt="" /> CC Attribution Non-Commercial</div>
<div class="license cc_by_nc_sa"><img src="/images/cc/cc_by_nc_sa.png" alt="" /> CC Attribution Non-Commercial Share Alike</div>
<div class="license cc_by_nc_nd"><img src="/images/cc/cc_by_nc_nd.png" alt="" /> CC Attribution Non-Commercial No Derivatives</div>
<div class="clear"></div>
</div>