Skip to content

Popover update #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ekongobie wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Popover update #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c89e31
Merge pull request #7 from spdx/master
ekongobie Apr 7, 2020
cbd7ccc
Update popover
ekongobie Apr 7, 2020
c7400ab
Correct popover click issue, put help text in seperate file
ekongobie May 19, 2020
5cea5ce
Remove unnecessary console.logs
ekongobie May 19, 2020
eb700ee
Remove unecessary scripts; helps improve load time.
ekongobie May 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions src/app/constants.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
from django.utils.safestring import mark_safe

# License submission form help text

FULL_NAME_HELP_TEXT = mark_safe('\u2022 The full name may omit certain word, such as \'the,\' for alphabetical sorting purposes. <br/>'
'\u2022 No commas in full name of license or exception. <br/>'
'\u2022 The word \'version\' is not spelled out; \'v\' or nothing is used to indicate license version (for space reasons) <br/>'
'\u2022 For version, use lower case v and no period or space between v and the number. <br/>'
'\u2022 No abbreviations are included (in parenthesis) after the full name.')

SHORT_IDENTIFIER_HELP_TEXT = mark_safe('\u2022 Short identifier to be used to identify a license or exception match to licenses or exceptions in the context of an SPDX file, a source file, or elsewhere. <br/>'
'\u2022 Short identifiers consist of ASCII letters (A-Za-z), digits (0-9), full stops (.) and hyphen or minus signs (-) <br/>'
'\u2022 Short identifiers consist of an abbreviation based on a common short name or acronym for the license or exception. <br/>'
'\u2022 Where applicable, the abbreviation will be followed by a dash and then the version number, in X.Y format. <br/>'
'\u2022 Where applicable, and if possible, the short identifier should be harmonized with other well-known open source naming sources (i.e., OSI, Fedora, etc.) <br/>'
'\u2022 Short identifiers should be as short in length as possible while staying consistent with all other naming criteria.')

SOURCE_URL_HELP_TEXT = mark_safe('\u2022 Include URL for the official text of the license or exception.<br />'
'\u2022 If the license is OSI approved, also include URL for OSI license page.<br />'
'\u2022 Include another URL that has text version of license, if neither of the first two options are available.<br />'
'\u2022 Note that the source URL may refer to an original URL for the license which is no longer active. We don\'t remove inactive URLs. New or best available URLs may be added.<br />'
'\u2022 Link to the license or exception in its native language is used where specified (e.g. French for CeCILL). Link to English version where multiple, equivalent official translations (e.g. EUPL)')

LICENSE_HEADER_INFO_HELP_TEXT = mark_safe('\u2022 Should only include text intended to be put in the header of source files or other files as specified in the license or license appendix when specifically delineated.<br />'
'\u2022 Indicate if there is any variation in the header (i.e. for files developed by a contributor versus when applying license to original work) <br />'
'\u2022 Do not include NOTICE info intended for a separate notice file.<br />'
'\u2022 Leave this field blank if there is no standard header as specifically defined in the license.')

COMMENTS_INFO_HELP_TEXT = mark_safe('\u2022 Provide a short explanation regarding the need for this license or exception to be included on the SPDX License List. <br />'
'\u2022 Identify at least one program that uses it or any other related information.')

LICENSE_TEXT_HELP_TEXT = mark_safe('Full license of the license text.')


# License namespace submission form help text

LIC_NS_SUB_FULLNAME_HELP_TEXT = mark_safe('\u2022 The full name of the license namespace submitter.')

LIC_NS_NSINFO_HELP_TEXT = mark_safe('\u2022 License namespace in dns-style request or a free-format.')

LIC_NS_NSID_HELP_TEXT = mark_safe('\u2022 License namespace short identifier.')

LIC_NS_URL_INFO_HELP_TEXT = mark_safe('\u2022 Include URL for the official text of the license namespace.')

LIC_NS_LIC_LIST_URL_HELP_TEXT = mark_safe('\u2022 Include URL for the official text of the license list namespace.')

LIC_NS_GH_REPO_URL_HELP_TEXT = mark_safe('\u2022 Include URL for the official github page of the license namespace.')

LIC_NS_ORG_HELP_TEXT = mark_safe('\u2022 Select organisation of the license namespace.')

LIC_NS_DESC_HELP_TEXT = mark_safe('Description of the license namespace')
29 changes: 22 additions & 7 deletions src/app/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@

from app.models import UserID, LicenseNamespace, OrganisationName
from app.widgets import RelatedFieldWidgetCanAdd
from .constants import (FULL_NAME_HELP_TEXT, SHORT_IDENTIFIER_HELP_TEXT,
SOURCE_URL_HELP_TEXT, LICENSE_HEADER_INFO_HELP_TEXT,
COMMENTS_INFO_HELP_TEXT, LICENSE_TEXT_HELP_TEXT,
LIC_NS_SUB_FULLNAME_HELP_TEXT, LIC_NS_NSINFO_HELP_TEXT,
LIC_NS_NSID_HELP_TEXT, LIC_NS_URL_INFO_HELP_TEXT,
LIC_NS_LIC_LIST_URL_HELP_TEXT, LIC_NS_GH_REPO_URL_HELP_TEXT,
LIC_NS_ORG_HELP_TEXT, LIC_NS_DESC_HELP_TEXT)

OSI_CHOICES = (
(0, "-"),
Expand Down Expand Up @@ -76,13 +83,13 @@ def __init__(self, *args, **kwargs):
self.fields["userEmail"] = forms.EmailField(label='Email', initial=self.email)

licenseAuthorName = forms.CharField(label="License Author name", max_length=100, required=False)
fullname = forms.CharField(label="Fullname", max_length=70)
shortIdentifier = forms.CharField(label='Short identifier', max_length=25)
sourceUrl = forms.CharField(label='Source / URL', required=False)
fullname = forms.CharField(label="Fullname", max_length=70, help_text=FULL_NAME_HELP_TEXT)
shortIdentifier = forms.CharField(label='Short identifier', max_length=25, help_text=SHORT_IDENTIFIER_HELP_TEXT)
sourceUrl = forms.CharField(label='Source / URL', required=False, help_text=SOURCE_URL_HELP_TEXT)
osiApproved = forms.CharField(label="OSI Status", widget=forms.Select(choices=OSI_CHOICES))
comments = forms.CharField(label='Comments', required=False, widget=forms.Textarea(attrs={'rows': 4, 'cols': 40}))
licenseHeader = forms.CharField(label='Standard License Header', widget=forms.Textarea(attrs={'rows': 3, 'cols': 40}), required=False)
text = forms.CharField(label='Text', widget=forms.Textarea(attrs={'rows': 4, 'cols': 40}))
comments = forms.CharField(label='Comments', required=False, widget=forms.Textarea(attrs={'rows': 4, 'cols': 40}), help_text=COMMENTS_INFO_HELP_TEXT)
licenseHeader = forms.CharField(label='Standard License Header', widget=forms.Textarea(attrs={'rows': 3, 'cols': 40}), required=False, help_text=LICENSE_HEADER_INFO_HELP_TEXT)
text = forms.CharField(label='Text', widget=forms.Textarea(attrs={'rows': 4, 'cols': 40}), help_text=LICENSE_TEXT_HELP_TEXT)


class LicenseNamespaceRequestForm(forms.ModelForm):
Expand All @@ -93,16 +100,24 @@ def __init__(self, *args, **kwargs):
self.email = ""
super(LicenseNamespaceRequestForm, self).__init__(*args, **kwargs)
self.fields['shortIdentifier'].required = False
self.fields['shortIdentifier'].help_text = LIC_NS_NSID_HELP_TEXT
self.fields['namespace'].help_text = LIC_NS_NSINFO_HELP_TEXT
self.fields['fullname'].help_text = LIC_NS_SUB_FULLNAME_HELP_TEXT
self.fields['url'].required = True
self.fields['url'].help_text = LIC_NS_URL_INFO_HELP_TEXT
self.fields['description'].help_text = LIC_NS_DESC_HELP_TEXT
self.fields['license_list_url'].required = False
self.fields['license_list_url'].help_text = LIC_NS_LIC_LIST_URL_HELP_TEXT
self.fields['github_repo_url'].required = False
self.fields['github_repo_url'].help_text = LIC_NS_GH_REPO_URL_HELP_TEXT
self.fields['organisation'].required = False
self.fields["userEmail"] = forms.EmailField(label='Email', initial=self.email)

organisation = forms.ModelChoiceField(
required=False,
queryset=OrganisationName.objects.all(),
widget=RelatedFieldWidgetCanAdd(OrganisationName))
widget=RelatedFieldWidgetCanAdd(OrganisationName),
help_text=LIC_NS_ORG_HELP_TEXT)

class Meta:
model = LicenseNamespace
Expand Down
5 changes: 5 additions & 0 deletions src/app/static/css/starter-template.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,8 @@ input[type="checkbox"]{
margin-left: 0px !important;
margin-top: -3px !important;
}

.popover-content {
overflow-x: auto;
max-height: 380px;
}
16 changes: 9 additions & 7 deletions src/app/static/js/editor/codemirror.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9531,10 +9531,10 @@ TextareaInput.prototype.needsContentAttribute = false

function fromTextArea(textarea, options) {
options = options ? copyObj(options) : {}
options.value = textarea.value
if (!options.tabindex && textarea.tabIndex)
options.value = textarea ? textarea.value : ""
if (!options.tabindex && textarea && textarea.tabIndex)
{ options.tabindex = textarea.tabIndex }
if (!options.placeholder && textarea.placeholder)
if (!options.placeholder && textarea && textarea.placeholder)
{ options.placeholder = textarea.placeholder }
// Set autofocus to true if this textarea is focused, or if it has
// autofocus and no other element is focused.
Expand All @@ -9547,7 +9547,7 @@ function fromTextArea(textarea, options) {
function save() {textarea.value = cm.getValue()}

var realSubmit
if (textarea.form) {
if (textarea && textarea.form) {
on(textarea.form, "submit", save)
// Deplorable hack to make the submit method do the right thing.
if (!options.leaveSubmitMethodAlone) {
Expand Down Expand Up @@ -9580,8 +9580,10 @@ function fromTextArea(textarea, options) {
}
}

textarea.style.display = "none"
var cm = CodeMirror(function (node) { return textarea.parentNode.insertBefore(node, textarea.nextSibling); },
if(textarea) {
textarea.style.display = "none"
}
var cm = CodeMirror(function (node) { return textarea ? textarea.parentNode.insertBefore(node, textarea.nextSibling) : ""; },
options)
return cm
}
Expand Down Expand Up @@ -9682,4 +9684,4 @@ CodeMirror.version = "5.38.0"

return CodeMirror;

})));
})));
62 changes: 30 additions & 32 deletions src/app/templates/app/submit_new_license.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<div class = "form-group">
<div class="col-sm-12">
<label class="control-label col-sm-3" >License's Full Name
<span class="glyphicon glyphicon-question-sign" id="fullnameInfo" data-toggle="popover" data-placement="auto left"></span>
<span tabindex="0" class="glyphicon glyphicon-question-sign" id="fullnameInfo" data-toggle="popover" data-placement="auto left"></span>
</label>
<div class="col-sm-4">
{{ form.fullname }}
Expand All @@ -79,7 +79,7 @@
<div class = "form-group">
<div class="col-sm-12">
<label class="control-label col-sm-3" >Short Identifier
<span class="glyphicon glyphicon-question-sign" id="shortIdentifierInfo" data-toggle="popover" data-placement="auto left"></span>
<span tabindex="0" class="glyphicon glyphicon-question-sign" id="shortIdentifierInfo" data-toggle="popover" data-placement="auto left"></span>
</label>
<div class="col-sm-4">
{{ form.shortIdentifier }}
Expand All @@ -90,7 +90,7 @@
<div class = "form-group">
<div class="col-sm-12">
<label class="control-label col-sm-3" >Source / URL
<span class="glyphicon glyphicon-question-sign" id="sourceUrlInfo" data-toggle="popover" data-placement="auto left"></span>
<span tabindex="0" class="glyphicon glyphicon-question-sign" id="sourceUrlInfo" data-toggle="popover" data-placement="auto left"></span>
</label>
<div class="col-sm-4">
{{ form.sourceUrl }}
Expand All @@ -111,7 +111,7 @@
<div class = "form-group">
<div class="col-sm-12">
<label class="control-label col-sm-3" >Standard License Header
<span class="glyphicon glyphicon-question-sign" id="licenseHeaderInfo" data-toggle="popover" data-placement="auto left"></span>
<span tabindex="0" class="glyphicon glyphicon-question-sign" id="licenseHeaderInfo" data-toggle="popover" data-placement="auto left"></span>
</label>
<div class="col-sm-6">
{{ form.licenseHeader }}
Expand All @@ -122,7 +122,7 @@
<div class = "form-group">
<div class="col-sm-12">
<label class="control-label col-sm-3" >License Text
<span class="glyphicon glyphicon-question-sign" id="textInfo" data-toggle="popover" data-placement="auto left"></span>
<span tabindex="0" class="glyphicon glyphicon-question-sign" id="textInfo" data-toggle="popover" data-placement="auto left"></span>
</label>
<div class="col-sm-6">
{{ form.text }}
Expand Down Expand Up @@ -151,7 +151,7 @@
<div class = "form-group">
<div class="col-sm-12">
<label class="control-label col-sm-3" >Comments
<span class="glyphicon glyphicon-question-sign" id="commentsInfo" data-toggle="popover" data-placement="auto left"></span>
<span tabindex="0" class="glyphicon glyphicon-question-sign" id="commentsInfo" data-toggle="popover" data-placement="auto left"></span>
</label>
<div class="col-sm-6">
{{ form.comments }}
Expand All @@ -169,31 +169,18 @@

{% block script_block %}
<script type="text/javascript">
function initPopOvers() {
$('#fullnameInfo').popover({trigger: "click focus", title: "License Full Name", content: "{{ form.fullname.help_text }}", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#shortIdentifierInfo').popover({trigger: "click focus", title: "Short Identifier", content: "{{ form.shortIdentifier.help_text }}", html: "true", viewport: '.panel-body', container: 'body'});
$('#sourceUrlInfo').popover({trigger: "click focus", title: "Source URL", content: "{{ form.sourceUrl.help_text }}", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#licenseHeaderInfo').popover({trigger: "click focus", title: "Standard License Header", content: "{{ form.licenseHeader.help_text }}", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#commentsInfo').popover({trigger: "click focus", title: "Comments", content: "{{ form.comments.help_text}}", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#textInfo').popover({trigger: "click focus", title: "License Text", content: "{{ form.text.help_text }}", viewport: '.panel-body', container: '.panel-body'});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var is_touch_device = "ontouchstart" in document.documentElement;
$('#fullnameInfo').popover({trigger: is_touch_device ? "click" : "hover", title: "License Full Name", content: "\u2022 The full name may omit certain word, such as 'the,' for alphabetical sorting purposes. \
<br /> \u2022 No commas in full name of license or exception. \
<br /> \u2022 The word 'version' is not spelled out; 'v' or nothing is used to indicate license version (for space reasons) \
<br /> \u2022 For version, use lower case v and no period or space between v and the number. \
<br /> \u2022 No abbreviations are included (in parenthesis) after the full name.", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#shortIdentifierInfo').popover({trigger: is_touch_device ? "click" : "hover", title: "Short Identifier", content: "\u2022 Short identifier to be used to identify a license or exception match to licenses or exceptions in the context of an SPDX file, a source file, or elsewhere. \
<br /> \u2022 Short identifiers consist of ASCII letters (A-Za-z), digits (0-9), full stops (.) and hyphen or minus signs (-) \
<br /> \u2022 Short identifiers consist of an abbreviation based on a common short name or acronym for the license or exception. \
<br /> \u2022 Where applicable, the abbreviation will be followed by a dash and then the version number, in X.Y format. \
<br /> \u2022 Where applicable, and if possible, the short identifier should be harmonized with other well-known open source naming sources (i.e., OSI, Fedora, etc.) \
<br /> \u2022 Short identifiers should be as short in length as possible while staying consistent with all other naming criteria.", html: "true", viewport: '.panel-body', container: 'body'});
$('#sourceUrlInfo').popover({trigger: is_touch_device ? "click" : "hover", title: "Source URL", content: "\u2022 Include URL for the official text of the license or exception. \
<br /> \u2022 If the license is OSI approved, also include URL for OSI license page. \
<br /> \u2022 Include another URL that has text version of license, if neither of the first two options are available. \
<br /> \u2022 Note that the source URL may refer to an original URL for the license which is no longer active. We don't remove inactive URLs. New or best available URLs may be added. \
<br /> \u2022 Link to the license or exception in its native language is used where specified (e.g. French for CeCILL). Link to English version where multiple, equivalent official translations (e.g. EUPL)", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#licenseHeaderInfo').popover({trigger: is_touch_device ? "click" : "hover", title: "Standard License Header", content: "\u2022 Should only include text intended to be put in the header of source files or other files as specified in the license or license appendix when specifically delineated. \
<br /> \u2022 Indicate if there is any variation in the header (i.e. for files developed by a contributor versus when applying license to original work) \
<br /> \u2022 Do not include NOTICE info intended for a separate notice file. \
<br /> \u2022 Leave this field blank if there is no standard header as specifically defined in the license.", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#commentsInfo').popover({trigger: is_touch_device ? "click" : "hover", title: "Comments", content: "\u2022 Provide a short explanation regarding the need for this license or exception to be included on the SPDX License List. \
<br /> \u2022 Identify at least one program that uses it or any other related information.", html: "true", viewport: '.panel-body', container: '.panel-body'});
$('#textInfo').popover({trigger: is_touch_device ? "click" : "hover", title: "License Text", content: "Full license of the license text.", viewport: '.panel-body', container: '.panel-body'});
initPopOvers();
$("#licenserequest").addClass('linkactive');
$("#submitnewlicensepage").addClass('linkactive');
$('input').addClass('form-control');
Expand Down Expand Up @@ -223,6 +210,16 @@
window.location = githubLoginLink;
});
</script>
<script>
$(document).on('mousedown', function (e) {
$('[data-toggle=popover]').each(function (index, elt) {
// hide any open popovers when anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
</script>
<script type="text/javascript">
$(document).on('click', '#addSourceUrl', function(){
var html = '<div class="col-sm-12 btn-group" style="padding:6px 0; margin-top:2"><input type="text" class="form-control" id="sourceUrl" placeholder="" name = "sourceurl"></div>';
Expand Down Expand Up @@ -547,7 +544,7 @@
async function generate_text_diff(base, newtxt){
var sm = new difflib.SequenceMatcher(base, newtxt);
var opcodes = sm.get_opcodes();

// build the diff view and add it to the current DOM
var diff = $(diffview.buildView({
baseTextLines: base,
Expand All @@ -570,7 +567,7 @@
$(".modal-dialog").addClass("diff-modal-dialog");
$("#myModal").modal({
backdrop: 'static',
keyboard: true,
keyboard: true,
show: true
});
await new Promise(resolve => setTimeout(resolve, 2000));
Expand All @@ -593,6 +590,7 @@
});
}
</script>
<script type="text/javascript" src="{% static 'js/editor/codemirror.js' %}"></script>
Copy link
Copy Markdown
Collaborator

@rtgdk rtgdk May 28, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this script?

<script type="text/javascript" src="{% static 'js/editor/script.js' %}"></script>
<script type="text/javascript" src="{% static 'js/editor/difflib.js' %}"></script>
<script type="text/javascript" src="{% static 'js/editor/diffview.js' %}"></script>
Expand Down
Loading