Skip to content

X
xblock-google-drive
Commit 38c7535e by Martyn James
Options

Merge pull request #5 from edx-solutions/mjevtic/validation 

Validation
parents 258ad437 3cce68c5
Showing with 447 additions and 65 deletions
google_drive/google_calendar.py
...@@ -88,7 +88,12 @@ class GoogleCalendarBlock(XBlock): ...@@ -88,7 +88,12 @@ class GoogleCalendarBlock(XBlock):
})) }))
fragment.add_javascript(load_resource('public/js/google_calendar_edit.js')) fragment.add_javascript(load_resource('public/js/google_calendar_edit.js'))
fragment.initialize_js('GoogleCalendarEditBlock') defaults = {
'defaultName': self.fields['display_name']._default,
'defaultID': self.fields['calendar_id']._default
}
fragment.initialize_js('GoogleCalendarEditBlock', defaults)
return fragment return fragment
......
google_drive/google_docs.py
...@@ -10,6 +10,7 @@ import textwrap ...@@ -10,6 +10,7 @@ import textwrap
#import webob #import webob
#from lxml import etree #from lxml import etree
#from xml.etree import ElementTree as ET #from xml.etree import ElementTree as ET
import requests
from xblock.core import XBlock from xblock.core import XBlock
from xblock.fields import Scope, String from xblock.fields import Scope, String
...@@ -81,7 +82,7 @@ class GoogleDocumentBlock(XBlock): ...@@ -81,7 +82,7 @@ class GoogleDocumentBlock(XBlock):
})) }))
fragment.add_javascript(load_resource('public/js/google_docs_edit.js')) fragment.add_javascript(load_resource('public/js/google_docs_edit.js'))
fragment.initialize_js('GoogleDocumentEditBlock') fragment.initialize_js('GoogleDocumentEditBlock', {'defaultName': self.fields['display_name']._default})
return fragment return fragment
...@@ -112,3 +113,17 @@ class GoogleDocumentBlock(XBlock): ...@@ -112,3 +113,17 @@ class GoogleDocumentBlock(XBlock):
return { return {
'result': 'success', 'result': 'success',
} }
@XBlock.json_handler
def check_url(self, data, suffix=''):
try:
r = requests.head(data['url'])
except:
return {
'status_code': 404,
}
return {
'status_code': r.status_code,
}
google_drive/public/css/google_calendar.css
...@@ -12,3 +12,100 @@ ...@@ -12,3 +12,100 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#validation_alert{
width: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: #323232;
border-bottom: 3px solid rgb(192, 172, 0);
padding: 10px;
position: absolute;
top:0;
z-index: 10;
max-height: 200px;
}
.alert_icon{
position: absolute;
top: 35%;
font-size: 200%;
left: 3%;
}
.alert_icon:before{
font-family: "FontAwesome";
content: "\f071";
display: inline-block;
color: rgb(192, 172, 0);
float: left;
height: 0;
width: 0;
}
.alert_header {
width: 85%;
margin: 0 5% 0 10%;
}
.alert_title {
width: auto;
color: white;
}
.alert_message {
font-size: 80%;
color: darkgray;
}
[class^="icon"] {
width: auto;
margin: 0;
padding: 2px;
}
&:hover {
color: rgb(128, 169, 204);
}
.is--hidden {
height: 0;
width: 0;
padding: 0;
margin: 0;
pointer-events: none;
outline: none;
}
.covered, .is--hidden {
display: none;
visibility: hidden;
}
.error {
outline: none !important;
border:2px solid red !important;
box-shadow: 0 0 10px #719ECE !important;
}
#save-button.disabled {
background-color: gray;
cursor: auto;
}
#google-docs-actions{
position: absolute;
bottom: 0;
}
.editor_content_wrapper {
width: 100%;
overflow-y: scroll;
position: absolute;
bottom: 0;
top: 0;
}
#xblock-inputs.alerted {
top: 69px;
}
google_drive/public/css/google_docs.css
...@@ -12,3 +12,100 @@ ...@@ -12,3 +12,100 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#validation_alert{
width: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: #323232;
border-bottom: 3px solid rgb(192, 172, 0);
padding: 10px;
position: absolute;
top:0;
z-index: 10;
max-height: 200px;
}
.alert_icon{
position: absolute;
top: 35%;
font-size: 200%;
left: 3%;
}
.alert_icon:before{
font-family: "FontAwesome";
content: "\f071";
display: inline-block;
color: rgb(192, 172, 0);
float: left;
height: 0;
width: 0;
}
.alert_header {
width: 85%;
margin: 0 5% 0 10%;
}
.alert_title {
width: auto;
color: white;
}
.alert_message {
font-size: 80%;
color: darkgray;
}
[class^="icon"] {
width: auto;
margin: 0;
padding: 2px;
}
&:hover {
color: rgb(128, 169, 204);
}
.is--hidden {
height: 0;
width: 0;
padding: 0;
margin: 0;
pointer-events: none;
outline: none;
}
.covered, .is--hidden {
display: none;
visibility: hidden;
}
.error {
outline: none !important;
border:2px solid red;
box-shadow: 0 0 10px #719ECE;
}
#save-button.disabled {
background-color: gray;
cursor: auto;
}
#google-docs-actions{
position: absolute;
bottom: 0;
}
.editor_content_wrapper {
width: 100%;
overflow-y: scroll;
position: absolute;
bottom: 0;
top: 0;
}
#xblock-inputs.alerted {
top: 69px;
}
google_drive/public/js/google_calendar_edit.js
function GoogleCalendarEditBlock(runtime, element) { function GoogleCalendarEditBlock(runtime, element, defaults) {
$('.save-button', element).bind('click', function() {
var clear_name_button = $('.clear-display-name', element);
var clear_id_button = $('.clear-calendar-id', element);
var save_button = $('.save-button', element);
var validation_alert = $('#validation_alert', element);
var xblock_inputs_wrapper = $('#xblock-inputs', element);
ToggleClearDefaultName();
ToggleClearCalendarID();
$('.clear-display-name', element).bind('click', function() {
$(this).addClass('inactive');
$('#edit_display_name', element).val(defaults.defaultName);
});
$('#edit_display_name', element).bind('keyup', function(){
ToggleClearDefaultName();
});
$('.clear-calendar-id', element).bind('click', function() {
$(this).addClass('inactive');
$('#edit_calendar_id', element).val(defaults.defaultID);
save_button.unbind('click').bind('click', SaveEditing);
});
$('#edit_calendar_id', element).bind('keyup', function(){
ToggleClearCalendarID();
var inputVal = $(this).val();
var calendarIDReg = /[\w-\.]+@+[\w-\.]/;
if(!calendarIDReg.test(inputVal)) {
save_button.addClass('disabled').unbind('click');
validation_alert.removeClass('covered');
$(this).addClass('error');
xblock_inputs_wrapper.addClass('alerted');
} else {
validation_alert.addClass('covered');
save_button.removeClass('disabled');
$(this).removeClass('error');
xblock_inputs_wrapper.removeClass('alerted');
save_button.bind('click', SaveEditing);
}
});
$('.cancel-button', element).bind('click', function() {
runtime.notify('cancel', {});
});
function ToggleClearDefaultName(){
if ($('#edit_display_name').val() == defaults.defaultName){
if (!clear_name_button.hasClass('inactive')){
clear_name_button.addClass('inactive');
}
}
else {
clear_name_button.removeClass('inactive');
}
}
function ToggleClearCalendarID(){
if ($('#edit_calendar_id').val() == defaults.defaultID){
if (!clear_id_button.hasClass('inactive')){
clear_id_button.addClass('inactive');
}
}
else {
clear_id_button.removeClass('inactive');
}
}
function SaveEditing(){
var data = { var data = {
'display_name': $('.edit-display-name', element).val(), 'display_name': $('.edit-display-name', element).val(),
'calendar_id': $('.edit-calendar-id', element).val(), 'calendar_id': $('.edit-calendar-id', element).val(),
...@@ -17,9 +88,5 @@ function GoogleCalendarEditBlock(runtime, element) { ...@@ -17,9 +88,5 @@ function GoogleCalendarEditBlock(runtime, element) {
$('.xblock-editor-error-message', element).css('display', 'block'); $('.xblock-editor-error-message', element).css('display', 'block');
} }
}); });
}); }
$('.cancel-button', element).bind('click', function() {
runtime.notify('cancel', {});
});
} }
google_drive/public/js/google_docs_edit.js
function GoogleDocumentEditBlock(runtime, element) { function GoogleDocumentEditBlock(runtime, element, defaults) {
$('.save-button', element).bind('click', function() {
var clear_name_button = $('.clear-display-name', element);
var save_button = $('.save-button', element);
var validation_alert = $('#validation_alert', element);
var embed_code_textbox = $('#edit_embed_code', element);
var xblock_inputs_wrapper = $('#xblock-inputs', element);
ToggleClearDefaultName();
IsUrlValid();
$('.clear-display-name', element).bind('click', function() {
$(this).addClass('inactive');
$('#edit_display_name', element).val(defaults.defaultName);
});
$('#edit_display_name', element).bind('keyup', function(){
ToggleClearDefaultName();
});
$('#edit_embed_code', element).bind('keyup', function(){
IsUrlValid();
});
$('.cancel-button', element).bind('click', function() {
runtime.notify('cancel', {});
});
function ToggleClearDefaultName(name, button){
if ($('#edit_display_name').val() == defaults.defaultName){
if (!clear_name_button.hasClass('inactive')){
clear_name_button.addClass('inactive');
}
}
else {
clear_name_button.removeClass('inactive');
}
}
function SaveEditing(){
var data = { var data = {
'display_name': $('.edit-display-name', element).val(), 'display_name': $('.edit-display-name', element).val(),
'embed_code': $('.edit-embed-code', element).val(), 'embed_code': $('.edit-embed-code', element).val(),
...@@ -16,9 +55,42 @@ function GoogleDocumentEditBlock(runtime, element) { ...@@ -16,9 +55,42 @@ function GoogleDocumentEditBlock(runtime, element) {
$('.xblock-editor-error-message', element).css('display', 'block'); $('.xblock-editor-error-message', element).css('display', 'block');
} }
}); });
}); }
$('.cancel-button', element).bind('click', function() { function IsUrlValid(){
runtime.notify('cancel', {}); var embed_html = $("#edit_embed_code", element).val();
});
var google_doc = $(embed_html);
$('#edit_embed_code', element).css({'cursor':'wait'});
save_button.addClass('disabled').unbind('click');
$.ajax({
type: "POST",
url: runtime.handlerUrl(element, 'check_url'),
data: JSON.stringify({url: google_doc.attr("src")}),
success: function(result) {
if (result.status_code >= 400){
validation_alert.removeClass('covered');
embed_code_textbox.addClass('error');
xblock_inputs_wrapper.addClass('alerted');
} else {
validation_alert.addClass('covered');
save_button.removeClass('disabled');
embed_code_textbox.removeClass('error');
xblock_inputs_wrapper.removeClass('alerted');
save_button.bind('click', SaveEditing);
}
},
error: function(result) {
validation_alert.removeClass('covered');
save_button.addClass('disabled').unbind('click');
embed_code_textbox.addClass('error');
xblock_inputs_wrapper.addClass('alerted');
},
complete: function() {
$('#edit_embed_code', element).css({'cursor':'auto'});
}
});
}
} }
google_drive/templates/html/google_calendar_edit.html
...@@ -2,49 +2,66 @@ ...@@ -2,49 +2,66 @@
<!-- TODO: Replace by default edit view once available in Studio --> <!-- TODO: Replace by default edit view once available in Studio -->
<div class="wrapper-comp-settings is-active editor-with-buttons " id="settings-tab"> <div class="wrapper-comp-settings is-active editor-with-buttons " id="settings-tab">
<ul class="list-input settings-list"> <div class="user-inputs-and-validation">
<li class="field comp-setting-entry is-set"> <div id="validation_alert" class="covered">
<div class="wrapper-comp-setting"> <i class="alert_icon"></i>
<label class="label setting-label" for="edit_display_name">{% trans "Display Name" %}</label> <div class="alert_header">
<input class="input setting-input edit-display-name" id="edit_display_name" value="{{ self.display_name }}" type="text"> <h2 class="alert_title">{% trans "Invalid Google Document" %}</h2>
</div> <p class="alert_message">{% trans "Please correct the outlined fields." %}</p>
<span class="tip setting-help">{% trans "This name appears in the horizontal navigation at the top of the page." %}</span> </div>
</li> </div>
<li class="field comp-setting-entry is-set"> <div id="xblock-inputs" class="editor_content_wrapper">
<div class="wrapper-comp-setting"> <ul class="list-input settings-list">
<label class="label setting-label" for="edit_calendar_id">{% trans "Public Calendar ID" %}</label> <li class="field comp-setting-entry is-set">
<textarea rows="3" cols="60" class="input setting-input edit-calendar-id" id="edit_calendar_id"> <div class="wrapper-comp-setting">
{{ self.calendar_id }} <label class="label setting-label" for="edit_display_name">{% trans "Display Name" %}</label>
</textarea> <input class="input setting-input edit-display-name" id="edit_display_name" value="{{ self.display_name }}" type="text">
</div> <button class="action setting-clear clear-display-name" type="button" name="setting-clear">
<span class="tip setting-help">{% trans "Google provides an ID for publicly available calendars. In the Google Calendar, open Settings and copy the ID from the Calendar Address section into this field. You can " %} <i class="icon-undo"></i>
<a href="https://support.google.com/calendar/answer/34578?ctx=tltp" target="_blank">learn more here</a>. <span class="sr">"<%= gettext("Clear Value") %>"</span>
</span> </button>
</li> </div>
<li class="field comp-setting-entry is-set"> <span class="tip setting-help">{% trans "This name appears in the horizontal navigation at the top of the page." %}</span>
<div class="wrapper-comp-setting"> </li>
<label class="label setting-label" for="edit_default_view">{% trans "Default View" %}</label> <li class="field comp-setting-entry is-set">
<select class="input setting-input edit-label_type" id="edit_label_type" value="{{self.default_view}}"> <div class="wrapper-comp-setting">
{% for view in self.views %} <label class="label setting-label" for="edit_calendar_id">{% trans "Public Calendar ID" %}</label>
<option value="{{forloop.counter0}}" {% if forloop.counter0 == self.default_view %}selected="selected"{% endif %}> <input class="input setting-input edit-calendar-id" id="edit_calendar_id" value="{{ self.calendar_id }}" type="text">
{{view}} <button class="action setting-clear clear-calendar-id" type="button" name="setting-clear">
</option> <i class="icon-undo"></i>
{% endfor %} <span class="sr">"<%= gettext("Clear Value") %>"</span>
</select> </button>
</div> </div>
<span class="tip setting-help">{% trans "The calendar view that students see by default. A student can change this view." %}</span> <span class="tip setting-help">{% trans "Google provides an ID for publicly available calendars. In the Google Calendar, open Settings and copy the ID from the Calendar Address section into this field. You can " %}
</li> <a href="https://support.google.com/calendar/answer/34578?ctx=tltp" target="_blank">learn more here</a>.
<li class="field comp-setting-entry is-set"></li> </span>
</ul> </li>
<div class="xblock-actions"> <li class="field comp-setting-entry is-set">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="edit_default_view">{% trans "Default View" %}</label>
<select class="input setting-input edit-label_type" id="edit_label_type" value="{{self.default_view}}">
{% for view in self.views %}
<option value="{{forloop.counter0}}" {% if forloop.counter0 == self.default_view %}selected="selected"{% endif %}>
{{view}}
</option>
{% endfor %}
</select>
</div>
<span class="tip setting-help">{% trans "The calendar view that students see by default. A student can change this view." %}</span>
</li>
<li class="field comp-setting-entry is-set"></li>
</ul>
</div>
</div>
<div class="xblock-actions" id="google-calendar-actions">
<span class="xblock-editor-error-message"></span> <span class="xblock-editor-error-message"></span>
<ul> <ul>
<li class="action-item"> <li class="action-item">
<a href="#" class="button action-primary save-button">{% trans "Save" %}</a> <a href="#" class="button action-primary save-button" id="save_button">{% trans "Save" %}</a>
</li> </li>
<li class="action-item"> <li class="action-item">
<a href="#" class="button cancel-button">{% trans "Cancel" %}</a> <a href="#" class="button cancel-button" id="cancel_button">{% trans "Cancel" %}</a>
</li> </li>
</ul> </ul>
</div> </div>
......
google_drive/templates/html/google_docs_edit.html
...@@ -2,34 +2,46 @@ ...@@ -2,34 +2,46 @@
<!-- TODO: Replace by default edit view once available in Studio --> <!-- TODO: Replace by default edit view once available in Studio -->
<div class="wrapper-comp-settings is-active editor-with-buttons " id="settings-tab"> <div class="wrapper-comp-settings is-active editor-with-buttons " id="settings-tab">
<ul class="list-input settings-list"> <div class="user-inputs-and-validation">
<li class="field comp-setting-entry is-set"> <div id="validation_alert" class="covered">
<i class="alert_icon"></i>
<div class="alert_header">
<h2 class="alert_title">{% trans "Invalid Google Document" %}</h2>
<p class="alert_message">{% trans "Please correct the outlined fields." %}</p>
</div>
</div>
<div id="xblock-inputs" class="editor_content_wrapper">
<ul class="list-input settings-list">
<li class="field comp-setting-entry is-set">
<div class="wrapper-comp-setting"> <div class="wrapper-comp-setting">
<label class="label setting-label" for="edit_display_name">{% trans "Display Name" %}</label> <label class="label setting-label" for="edit_display_name">{% trans "Display Name" %}</label>
<input class="input setting-input edit-display-name" id="edit_display_name" value="{{ self.display_name }}" type="text"> <input class="input setting-input edit-display-name" id="edit_display_name" value="{{ self.display_name }}" type="text">
<button class="action setting-clear clear-display-name" type="button" name="setting-clear">
<i class="icon-undo"></i>
<span class="sr">"<%= gettext("Clear Value") %>"</span>
</button>
</div> </div>
<span class="tip setting-help">{% trans "This name appears in the horizontal navigation at the top of the page." %}</span> <span class="tip setting-help">{% trans "This name appears in the horizontal navigation at the top of the page." %}</span>
</li> </li>
<li class="field comp-setting-entry is-set"> <li class="field comp-setting-entry is-set">
<div class="wrapper-comp-setting"> <div class="wrapper-comp-setting">
<label class="label setting-label" for="edit_embed_code">{% trans "Embed Code" %}</label> <label class="label setting-label" for="edit_embed_code">{% trans "Embed Code" %}</label>
<textarea rows="3" cols="60" class="input setting-input edit-embed-code" id="edit_embed_code"> <textarea rows="3" cols="60" class="input setting-input edit-embed-code" id="edit_embed_code">{{ self.embed_code }}</textarea>
{{ self.embed_code }}
</textarea>
</div> </div>
<span class="tip setting-help">{% trans "Google provides an embed code for Drive documents. In the Google Drive document, from the File menu, select Publish to the Web. Modify settings as needed, click Publish, and copy the embed code into this field." %}</span> <span class="tip setting-help">{% trans "Google provides an embed code for Drive documents. In the Google Drive document, from the File menu, select Publish to the Web. Modify settings as needed, click Publish, and copy the embed code into this field." %}</span>
</li> </li>
<li class="field comp-setting-entry is-set"></li> </ul>
</ul> </div>
<div class="xblock-actions"> </div>
<div class="xblock-actions" id="google-docs-actions">
<span class="xblock-editor-error-message"></span> <span class="xblock-editor-error-message"></span>
<ul> <ul>
<li class="action-item"> <li class="action-item">
<a href="#" class="button action-primary save-button">{% trans "Save" %}</a> <a href="#" class="button action-primary save-button" id="save_button">{% trans "Save" %}</a>
</li> </li>
<li class="action-item"> <li class="action-item">
<a href="#" class="button cancel-button">{% trans "Cancel" %}</a> <a href="#" class="button cancel-button" id="cancel_button">{% trans "Cancel" %}</a>
</li> </li>
</ul> </ul>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment