API tools faq
paste
Advertisement
Jason_Quinn

Reftoolbar 3.0 prototype

Jason_Quinn
Jul 19th, 2013
368
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 34.09 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  6. <meta charset="utf-8" />
  7. <title>reftoolbar jquery UI dialog-based form</title>
  8. <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  9. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  10. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  11.  
  12.  
  13. <!--
  14. OPEN ISSUES:
  15. *i have given virtually no thought to a11y or i18n.
  16. *jquery UI tooltips sometimes "get stuck" on screen (may be Ticket #8740 "Tooltip: Does not hide consistently with dynamically loaded content"
  17. **maybe force all tooltips to close to be extra safe
  18. *a click on a label at the bottom of the content area when it has a scrollbar for some reason returns the user near top of the content area
  19. *changing the date format if there are date fields with date entries in an unrecognized format causes them to blank.
  20. *not sure why rounded corners isn't being added to the select button by the add_dialog_textinput_classes function. Had to add manuall. Maybe it looks good without it anyhow.
  21. *could add validation checks to more fields, like name and group
  22.  
  23. COMMENTS:
  24. *the dialog and quote textarea each remember their size between open/closes. I suppose this is a feature. Not sure why the textarea is acting this way though.
  25. *Should the 'clear' button reset the date format? I suppose not.
  26. *There are a couple of intertwined issues with the 'delete author' and 'delete editor' buttons that needed to be
  27. worked around. If I set their CSS visability to 'hidden' when they needed to be deactivated, the cursor on
  28. mouseover was changing to 'pointer' style. Attempts to fix this were futile: I tried many ways, including
  29. setting the CSS cursor style, and they all seemed to do nothing. Rather than hiding the buttons, I decided
  30. to disable them. But when disabled, they were displaying the native tooltip, not the jquery UI tooltip.
  31. Keeping the jquery UI tooltip is not possible when the button is disabled (Ticket #8703
  32. "Tooltip: Native tooltip is displayed for disabled tooltipped element") This is apparently a design limitation of jquery itself.
  33. It is possible to "fake" a disabled button though. (Not done yet.)
  34. -->
  35.  
  36.  
  37. <script>
  38. /*
  39.   Arvind Satyanarayan's blog, March 3, 2006, "Toggle Visibility - Show/Hide Anything"
  40.   http://blog.movalog.com/a/javascript-toggle-visibility/
  41. */
  42. function toggle_visibility(id) {
  43.     var e = document.getElementById(id);
  44.     if ( e.style.display === 'block' )
  45.         e.style.display = 'none';
  46.     else
  47.         e.style.display = 'block';
  48. }
  49.  
  50. function turn_off_visibility(id) {
  51.     var e = document.getElementById(id);
  52.     e.style.display = 'none';
  53. }
  54.  
  55. /* These functions enable/disable the delete author/editor buttons.
  56.    I originally was hiding them with CSS by setting their visability to hidden.
  57.    I had difficulties with the cursor doing that and the element seemed to be ignoring
  58.    explicitly changing the cursor to the states I wanted (pointer/default). In
  59.    the end, perhaps this solution is better anyway because having a blank space
  60.    where a hidden button is, is perhaps confusing to the user. */
  61. function disable_button_by_selector(selector) {
  62.     $(selector).button("disable").tooltip({disabled: true});
  63. }
  64. function enable_button_by_selector(selector) {
  65.     $(selector).button("enable").tooltip({disabled: false});
  66. }
  67.  
  68. function add_dialog_textinput_classes(selector) {
  69.     $(selector).addClass("text").addClass("ui-widget-content").addClass("ui-corner-all");
  70. }
  71.  
  72. var authorcount=1;
  73. function addAuthorDiv(divID) {
  74.     var div = document.getElementById(divID);
  75.     var newdiv = document.createElement("div");
  76.     authorcount++;
  77.     newdiv.setAttribute("id", "author"+authorcount+"div");
  78.     newdiv.innerHTML = "<div class=\"row\"><div class=\"forth\"><label for=\"last"+authorcount+"\">last"+authorcount+"</label><input type=\"text\" id=\"last"+authorcount+"\" name=\"last"+authorcount+"\"></div><div class=\"forth\"><label for=\"first"+authorcount+"\">first"+authorcount+"</label><input type=\"text\" id=\"first"+authorcount+"\" name=\"first"+authorcount+"\"></div><div class=\"forth\"><label for=\"author"+authorcount+"\">author"+authorcount+"</label><input type=\"text\" id=\"author"+authorcount+"\" name=\"author"+authorcount+"\"/></div><div class=\"forth\"><label for=\"authorlink"+authorcount+"\">authorlink"+authorcount+"</label><input type=\"text\" id=\"authorlink"+authorcount+"\" name=\"authorlink"+authorcount+"\"></div></div><br clear=\"all\" />";
  79.     div.appendChild(newdiv);
  80.     /* re-add the styles to style newly added elements */
  81.     add_dialog_textinput_classes('#dialog-form input,#dialog-form textarea');
  82.     if ( authorcount === 2 ) {
  83.         document.getElementById('author1lastlabel'      ).innerHTML = 'last1';
  84.         document.getElementById('author1firstlabel'     ).innerHTML = 'first1';
  85.         document.getElementById('author1label'          ).innerHTML = 'author1';
  86.         document.getElementById('author1authorlinklabel').innerHTML = 'authorlink1';
  87.         enable_button_by_selector('#deleteAuthorButton');
  88.     }
  89. }
  90. function deleteAuthorDiv(divID) {
  91.     var div = document.getElementById(divID);
  92.     div.removeChild(document.getElementById('author'+authorcount+'div'));
  93.     authorcount--;
  94.     if ( authorcount === 1 ) {
  95.         document.getElementById('author1lastlabel'      ).innerHTML = 'last';
  96.         document.getElementById('author1firstlabel'     ).innerHTML = 'first';
  97.         document.getElementById('author1label'          ).innerHTML = 'author';
  98.         document.getElementById('author1authorlinklabel').innerHTML = 'authorlink';
  99.         disable_button_by_selector('#deleteAuthorButton');
  100.     }
  101. }
  102.  
  103. var editorcount=1;
  104. function addEditorDiv(divID) {
  105.     var div = document.getElementById(divID);
  106.     var newdiv = document.createElement("div");
  107.     editorcount++;
  108.     newdiv.setAttribute("id", "editor"+editorcount+"div");
  109.     newdiv.innerHTML = "<div class=\"row\"><div class=\"forth\"><label for=\"editor"+editorcount+"-last\">editor"+editorcount+"-last</label><input type=\"text\" id=\"editor"+editorcount+"-last"+editorcount+"\" name=\"editor"+editorcount+"-last\"></div><div class=\"forth\"><label for=\"editor"+editorcount+"-first\">editor"+editorcount+"-first</label><input type=\"text\" id=\"editor"+editorcount+"-first\" name=\"editor"+editorcount+"-first\"></div><div class=\"forth\"><label for=\"editor"+editorcount+"\">editor"+editorcount+"</label><input text=\"text\" id=\"editor"+editorcount+"\" name=\"editor"+editorcount+"\"/></div><div class=\"forth\"><label for=\"editor"+editorcount+"-link\">editor"+editorcount+"-link</label><input type=\"text\" id=\"editor"+editorcount+"-link\" name=\"editor"+editorcount+"-link\"></div></div><br clear=\"all\" />";
  110.     div.appendChild(newdiv);
  111.     /* re-add the styles to style newly added elements */
  112.     add_dialog_textinput_classes('#dialog-form input,#dialog-form textarea');
  113.     if ( editorcount === 2 ) {
  114.         document.getElementById('editor1lastlabel'      ).innerHTML = 'editor1-last';
  115.         document.getElementById('editor1firstlabel'     ).innerHTML = 'editor1-first';
  116.         document.getElementById('editor1label'          ).innerHTML = 'editor1';
  117.         document.getElementById('editor1editorlinklabel').innerHTML = 'editor1-link';
  118.         enable_button_by_selector('#deleteEditorButton');
  119.     }
  120. }
  121. function deleteEditorDiv(divID) {
  122.     var div = document.getElementById(divID);
  123.     div.removeChild(document.getElementById('editor'+editorcount+'div'));
  124.     editorcount--;
  125.     if ( editorcount === 1 ) {
  126.         document.getElementById('editor1lastlabel'      ).innerHTML = 'editor-last';
  127.         document.getElementById('editor1firstlabel'     ).innerHTML = 'editor-first';
  128.         document.getElementById('editor1label'          ).innerHTML = 'editor';
  129.         document.getElementById('editor1editorlinklabel').innerHTML = 'editor-link';
  130.         disable_button_by_selector('#deleteEditorButton');
  131.     }
  132. }
  133.  
  134. /*
  135.   Aniebiet Udoh on 12 May 2010
  136.   http://stackoverflow.com/a/2819568/2577374
  137.  
  138.   This function allows text to be added at the cursor position of a textbox.
  139. */
  140. jQuery.fn.extend({
  141. insertAtCaret: function(myValue){
  142.   return this.each(function(i) {
  143.     if (document.selection) {
  144.       //For browsers like Internet Explorer
  145.       this.focus();
  146.       var sel = document.selection.createRange();
  147.       sel.text = myValue;
  148.       this.focus();
  149.     }
  150.     else if (this.selectionStart || this.selectionStart == '0') {
  151.       //For browsers like Firefox and Webkit based
  152.       var startPos = this.selectionStart;
  153.       var endPos = this.selectionEnd;
  154.       var scrollTop = this.scrollTop;
  155.       this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
  156.       this.focus();
  157.       this.selectionStart = startPos + myValue.length;
  158.       this.selectionEnd = startPos + myValue.length;
  159.       this.scrollTop = scrollTop;
  160.     } else {
  161.       this.value += myValue;
  162.       this.focus();
  163.     }
  164.   });
  165. }
  166. });
  167.  
  168. $(function() {
  169.     /******************************/
  170.     /* BEGIN validation functions */
  171.     /******************************/
  172.     var title = $("#title");
  173.     allFields = $([]).add(title);
  174.     function checktitle( titlestring ) {
  175.         /* test for titlestring being all whitespace */
  176.         if ( titlestring.val().trim().length === 0 ) {
  177.             title.addClass("ui-state-error");
  178.             updateTips("\"title\" is mandatory and cannot be blank or all whitespace.");
  179.             return false;
  180.         } else {
  181.             title.removeClass("ui-state-error");
  182.             return true;
  183.         }
  184.     }
  185.  
  186.     var isbn = $("#isbn");
  187.     allFields = $([]).add(isbn);
  188.     function checkisbn( isbnstring ) {
  189.         /* count number of dashes and check on that too? */
  190.         /* get rid of leading and trailing whitespace and remove dashes and spaces */
  191.         var testisbnstring=isbnstring.val().trim().replace(/[-\s]/g,'');
  192.         /* if the string was only whitespace, that's fine */
  193.         if ( testisbnstring.length === 0 ) {
  194.             isbn.removeClass("ui-state-error");
  195.             return true;
  196.         }
  197.         /* Make sure only valid characters are used in the ISBN */
  198.         if ( /[^0-9X]+/g.test(testisbnstring) ) {
  199.             updateTips("The 'ISBN' field must consist only of digits, spaces, dashes, or 'X'.");
  200.             return false;
  201.         }
  202.         /* test just by number of digits (including 'X') if it could be a valid ISBN */
  203.         if ( testisbnstring.length !== 10 && testisbnstring.length !== 13 ) {
  204.             isbn.addClass("ui-state-error");
  205.             var message="The 'ISBN' string has " + testisbnstring.length + " digit";
  206.             if ( testisbnstring.length !== 1 ) {
  207.                 message+="s";
  208.             }
  209.             message+=". It should have 10 or 13.";
  210.             updateTips(message);
  211.             return false;
  212.         }
  213.         /* test if 10 digit string passes checksum */
  214.         if ( testisbnstring.length===10 && !isValidISBN10(testisbnstring) ) {
  215.             isbn.addClass("ui-state-error");
  216.             updateTips("The 'ISBN' string failed a 10 digit ISBN check.");
  217.             return false;
  218.         }
  219.         /* test if 13 digit string passes checksum */
  220.         if ( testisbnstring.length===13 && !isValidISBN13(testisbnstring) ) {
  221.             isbn.addClass("ui-state-error");
  222.             updateTips("The 'ISBN' string failed a 13 digit ISBN check.");
  223.             return false;
  224.         }
  225.         /* if we make it this far, assume all is okay. */
  226.         return true;
  227.     }
  228.  
  229.     /* This function was based on the PHP example from the Wikipedia article "International Standard Book Number".
  230.        https://en.wikipedia.org/w/index.php?title=International_Standard_Book_Number&oldid=563783562
  231.        It validates a 13 digit ISBN and returns true if it's valid, false otherwise. */
  232.     function isValidISBN10(isbnstring) {
  233.         /* get rid of spaces and dashes (could improve this... only 3 dashes allowed) */
  234.         isbnstring=isbnstring.replace(/[-\s]/g,'');
  235.         /* if we don't have 10 digits, we are done. */
  236.         if ( isbnstring.length !== 10 ) {
  237.             return false;
  238.         }
  239.         /* perform the check digit test */
  240.         var check=0, i=0;
  241.         for( i=0; i<10; i++) {
  242.             if (isbnstring[i] === "X") {
  243.                 check += 10*(10-i);
  244.             } else if (!isNaN(isbnstring[i])) {
  245.                 check += isbnstring[i]*(10-i);
  246.             } else {
  247.                 return false;
  248.             }
  249.         }
  250.         return (check%11 === 0);
  251.     }
  252.  
  253.     /* This function is based on the Javascript example from the Wikipedia article "International Standard Book Number".
  254.        https://en.wikipedia.org/w/index.php?title=International_Standard_Book_Number&oldid=563783562
  255.        It validates a 13 digit ISBN and returns true if it's valid, false otherwise. */
  256.     function isValidISBN13(isbnstring) {
  257.         /* get rid of spaces and dashes (could improve this... only 3 dashes allowed) */
  258.         isbnstring=isbnstring.replace(/[-\s]/g,'');
  259.         /* if we don't have 13 digits, we are done. */
  260.         if ( isbnstring.length !== 13 ) {
  261.             return false;
  262.         }
  263.         /* perform the check digit test */
  264.         var check=0, i=0;
  265.         for ( i=0; i<13; i+=2 ) {
  266.             check += +isbnstring[i];
  267.         }
  268.         for (i=1; i<12; i+=2) {
  269.             check += 3 * +isbnstring[i];
  270.         }
  271.         return (check%10 === 0);
  272.     }
  273.  
  274.     var page = $("#page");
  275.     var pages = $("#pages");
  276.     allFields = $([]).add(page);
  277.     allFields = $([]).add(pages);
  278.     function checkpagepages( pagestring, pagesstring ) {
  279.         /* one of page and pages must be blank*/
  280.         if ( pagestring.val().trim().length !== 0 && pagesstring.val().trim().length !== 0 ) {
  281.             page.addClass("ui-state-error");
  282.             pages.addClass("ui-state-error");
  283.             updateTips("One of 'page' and 'pages' must be blank.");
  284.             return false;
  285.         } else {
  286.             page.removeClass("ui-state-error");
  287.             pages.removeClass("ui-state-error");
  288.             return true;
  289.         }
  290.     }
  291.  
  292.     /****************************/
  293.     /* END validation functions */
  294.     /****************************/
  295.  
  296.     var tips=$(".validateTips");
  297.     var defaulttip="The 'title' field is mandatory. All other fields are optional, although they may have dependencies.";
  298.  
  299.     var tiptimeout;
  300.     function updateTips(t) {
  301.         tips.text(t).addClass("ui-state-highlight");
  302.         clearTimeout(tiptimeout); /* not sure this is needed */
  303.         tiptimeout=setTimeout(function() {
  304.                 tips.removeClass("ui-state-highlight");
  305.             }, 1000);
  306.     }
  307.  
  308.     /* The autocomplete for the month field */
  309.     var availableMonths = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
  310.     $("#month").autocomplete({
  311.         source: availableMonths,
  312.         minLength: 1
  313.     });
  314.  
  315.     /* add date picker to accessdate and archivedate */
  316.     $("#accessdate,#archivedate").datepicker({
  317.         changeMonth: true,
  318.         changeYear: true,
  319.         firstDay: 0, /* the first day of the week: Sunday is 0, Monday is 1, etc. */
  320.         showAnim: "show", /* visual effect used during calendar open and close */
  321.         showButtonPanel: true,
  322.         constrainInput: false,
  323.         isRTL: false,
  324.         dateFormat: "dd MM yy", /* the default */
  325.         monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
  326.         monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
  327.         dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
  328.         dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
  329.         dayNamesMin: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]
  330.     });
  331.  
  332.     /* add function that changes the format used by the datepicker */
  333.     $("#format1,#format2").change(function() {
  334.         $("#accessdate,#archivedate").datepicker("option","dateFormat", $(this).val());
  335.     });
  336.  
  337.     /* This defines the dialog form */
  338.     $("#dialog-form").dialog({
  339.         title: "Cite book",
  340.         autoOpen: false,
  341.         height: 445,
  342.         width: 700,
  343.         modal: false,
  344.         show: "puff",
  345.         hide: "fade",
  346.         open: function() {
  347.             /* BEGIN reset the form to default state */
  348.             while ( authorcount > 1 ) {
  349.                 deleteAuthorDiv('authorsDivID');
  350.             }
  351.             while ( editorcount > 1 ) {
  352.                 deleteEditorDiv('editorsDivID');
  353.             }
  354.             turn_off_visibility('extra');
  355.             tips.text(defaulttip);
  356.             disable_button_by_selector('#deleteAuthorButton');
  357.             disable_button_by_selector('#deleteEditorButton');
  358.             /* END reset the form to default state */
  359.         },
  360.         close: function() {
  361.             $(this).find('form')[0].reset();
  362.             $('#citebookform input[type="text"],textarea').each(function(){
  363.                 $(this).removeClass("ui-state-error");
  364.             });
  365.             clearTimeout(tiptimeout);
  366.             tips.removeClass("ui-state-highlight");
  367.             tips.text(defaulttip);
  368.         },
  369.         buttons: {
  370.             "Insert": function() {
  371.                 var bValid=true;
  372.                 /* Remove the highlighting from all invalid fields */
  373.                 $('#citebookform input[type="text"],textarea').each(function(){
  374.                     $(this).removeClass("ui-state-error");
  375.                 });
  376.  
  377.                 /* START checks (careful! short-circuit evaluation) */
  378.                 bValid = checktitle(title) && checkisbn(isbn) && checkpagepages(page,pages);
  379.                 /* END checks */
  380.  
  381.                 if ( bValid ) {
  382.                     /* now it's time to build the string that will be inserting into the editor */
  383.                     var citationstring="<ref";
  385.                     /* the fields for the ref tag parameters are special and need to be handled first */
  386.                     /* BUG: what if user inputs quotes? how should we handle that? */
  387.                     $('#citebookform input[id="group"],#citebookform input[id="name"]').each(function(){
  388.                         if ( $.trim($(this).val()) !== "" ) {
  389.                             citationstring+=" " + $(this).attr('name') + "=";
  390.                             /* test for space and, if so, surround parameter with double quotes */
  391.                             if ( /\s/g.test($(this).val()) ) {
  392.                                 citationstring+="\"" + $.trim($(this).val()) + "\"";
  393.                             } else {
  394.                                 citationstring+=$.trim($(this).val());
  395.                             }
  396.                         }
  397.                     });
  399.                     /* now we can start to build the template string */
  400.                     citationstring+=">{{cite book";
  401.                     /* START adding the parameters and their values (but only if not blank) */
  402.                     $('#citebookform input[type="text"],#citebookform textarea').each(function(){
  403.                         /* if blank or one of the special ref tag parameters already handled, we skip it */
  404.                         if ( $.trim($(this).val()) !== "" && $(this).attr('name') !== "name" && $(this).attr('name') !== "group" ) {
  405.                             citationstring+=" |" + $(this).attr('name') + "=" + $.trim($(this).val());
  406.                         }
  407.                     });
  408.                     /* END adding parameters */
  409.                     citationstring+="}}</ref>";
  410.  
  411.                     /* insert the citation string into the editor textbox */
  412.                     $("#editor-textarea").insertAtCaret(citationstring);
  413.  
  414.                     $(this).dialog("close");
  415.                 }
  416.             },
  417.             "Show/hide extra fields": function () {
  418.                 toggle_visibility('extra');
  419.             },
  420.             "Clear": function() {
  421.                 $(this).find('form')[0].reset();
  422.                 $('#citebookform input[type="text"],textarea').each(function(){
  423.                     $(this).removeClass("ui-state-error");
  424.                 });
  425.                 clearTimeout(tiptimeout);
  426.                 tips.removeClass("ui-state-highlight");
  427.                 tips.text(defaulttip);
  428.             },
  429.             "Cancel": function() {
  430.                 $(this).dialog("close");
  431.             }
  432.         }
  433.     });
  434.  
  435.     /* add autocomplete of month names to month field */
  436.     $("#month").autocomplete("widget").insertAfter($("#dialog-form").parent());
  437.  
  438.     /* position some divs of the form before the dialog content area (to avoid scrollbar) */
  439.     $("#authoreditorbuttons").insertBefore($(".ui-dialog-content"));
  440.     $("#tips").insertBefore($(".ui-dialog-content"));
  441.     $('.ui-dialog-title').append(' <span style="font-size: 60%">(<a href="https://en.wikipedia.org/wiki/Template:Cite_book" target="_blank">help</a>)</span>');
  442.  
  443.     /* add jquery ui tooltips */
  444.     $("#dialog-form").tooltip();
  445.     $("#authoreditorbuttons").tooltip();
  446.     $(".ui-dialog-titlebar").tooltip();
  447.  
  448.     /* event handler to open dialog window */
  449.     $("#insert-ref-button").button().click(function() {
  450.         $("#dialog-form").dialog("open");
  451.     });
  452.  
  453.     /* Defines the buttons to add/delete authors and editors */
  454.     $(function() {
  455.         $("#addAuthorButton").button({
  456.             icons: {
  457.                 primary: "ui-icon-plus"
  458.             },
  459.             text: false,
  460.             disabled: false,
  461.             }).click(function( event ) {
  462.                 addAuthorDiv('authorsDivID');
  463.         });
  464.         $("#deleteAuthorButton").button({
  465.             icons: {
  466.                 primary: "ui-icon-minus"
  467.             },
  468.             text: false,
  469.             disabled: false, /* having trouble with tooltips if I set to true initially */
  470.             }).click(function( event ) {
  471.                 deleteAuthorDiv('authorsDivID');
  472.         });
  473.         $("#addEditorButton").button({
  474.             icons: {
  475.                 primary: "ui-icon-plus"
  476.             },
  477.             text: false,
  478.             disabled: false,
  479.             }).click(function( event ) {
  480.                 addEditorDiv('editorsDivID');
  481.         });
  482.         $("#deleteEditorButton").button({
  483.             icons: {
  484.                 primary: "ui-icon-minus"
  485.             },
  486.             text: false,
  487.             disabled: false, /* having trouble with tooltips if I set to true initially */
  488.             }).click(function( event ) {
  489.                 deleteEditorDiv('editorsDivID');
  490.         });
  491.     });
  492.  
  493.     /* Add styles to the dialog elements (that exist at startup) */
  494.     add_dialog_textinput_classes('form#citebookform input,form#citebookform textarea,form#citebookform select');
  495.     $('form#citebookform,form#citebookform #authorsDivID,form#citebookform #editorsDivID,form#citebookform #accessdateDivID,#archivedateDivID,form#citebookform select').addClass("ui-corner-all");
  496.  
  497. });
  498. </script>
  499.  
  500. <style type="text/css">
  501. label, input, textarea {
  502.   display: inline;
  503. }
  504.  
  505. input.text, textarea.text {
  506.   margin-bottom: 5px;
  507.   width: 100%;
  508.   padding: 0em; /* must be zero or row/half/third/forth etc classes break */
  509.   background: white;
  510. }
  511.  
  512. .ui-dialog .ui-state-error {
  513.   padding: 0em;
  514. }
  515.  
  516. .ui-dialog {
  517.   background: lightgray;
  518.   font-size: 62.5%;
  519. }
  520.  
  521. .ui-dialog-titlebar {
  522.   font-size: medium;
  523.   background-color: lightblue;
  524.   background-image: none;
  525.   color: black;
  526. }
  527.  
  528. .ui-dialog-content {
  529.   background: inherit;
  530.   background-image: none;
  531.   color: black;
  532. }
  533.  
  534. .ui-dialog-buttonpane {
  535.   background: inherit;
  536. }
  537.  
  538. .ui-autocomplete {
  539.   font-size: 62.5%;
  540. }
  541.  
  542. .ui-tooltip {
  543.   font-size: 62.5%;
  544. }
  545.  
  546. .ui-datepicker {
  547.   font-size: 62.5%;
  548. }
  549.  
  550. .validateTips {
  551.   border: 1px solid transparent;
  552.   padding: 0.5%;
  553.   text-align:justify;
  554.   text-justify:inter-word;
  555. }
  556.  
  557. form#citebookform div#tips {
  558.   border: 1px solid transparent;
  559.   border-bottom-width: 10px;
  560.   border-top-width: 10px;
  561. }
  562.  
  563. form#citebookform                   { background: lightgray; width: 100% }
  564. form#citebookform #authorsDivID     { clear: both; background: lightgreen; }
  565. form#citebookform #editorsDivID     { clear: both; background: plum; }
  566. form#citebookform #accessdateDivID  { clear: both; background: lightgray /*LightSalmon*/; }
  567. form#citebookform #archivedateDivID { clear: both; background: lightgray /*Lavender*/; }
  568. form#citebookform .row              { width: 100%; margin-top: 0%; margin-bottom: 0%; padding-top: 0%; padding-bottom: 0%; padding-left: 0%; padding-right: 0%; }
  569. /* BEGIN ensure that ( (padding left) + (padding right) + (cell width) )*(number of cells per row) = 100% for each class */
  570. form#citebookform .full             { background: inherit; float: left; width: 99%;     padding-left: 0.5%; padding-right: 0.5%; }
  571. form#citebookform .half             { background: inherit; float: left; width: 49%;     padding-left: 0.5%; padding-right: 0.5%; }
  572. form#citebookform .third            { background: inherit; float: left; width: 32.333%; padding-left: 0.5%; padding-right: 0.5%; }
  573. form#citebookform .twothird         { background: inherit; float: left; width: 65.666%; padding-left: 0.5%; padding-right: 0.5%; }
  574. form#citebookform .forth            { background: inherit; float: left; width: 24%;     padding-left: 0.5%; padding-right: 0.5%; }
  575. form#citebookform .threeforth       { background: inherit; float: left; width: 74%;     padding-left: 0.5%; padding-right: 0.5%; }
  576. form#citebookform .sixth            { background: inherit; float: left; width: 15.666%; padding-left: 0.5%; padding-right: 0.5%; }
  577. form#citebookform .tenth            { background: inherit; float: left; width: 9%;      padding-left: 0.5%; padding-right: 0.5%; }
  578. form#citebookform .eighttenth       { background: inherit; float: left; width: 79%;     padding-left: 0.5%; padding-right: 0.5%; }
  579. /* END ensure that ( (padding left) + (padding right) + (cell width) )*(number of cells per row) = 100% for each class */
  580. form#citebookform .extra              { display: none; }
  581. </style>
  582.  
  583. </head>
  584.  
  585. <body>
  586.  
  587. <div id="dialog-form">
  588.  
  589.     <form id="citebookform">
  590.  
  591.     <div id="authoreditorbuttons" style="float: right; padding-top: 0.5%; padding-left: 10px; padding-right: 10px;" class="ui-button">
  592.         <div style="display: inline;">
  593.             <label style="display: inline;">Author: </label>
  594.             <button id="addAuthorButton">Add author</button>
  595.             <button id="deleteAuthorButton">Delete last author</button>
  596.         </div>
  597.         <div style="display: inline;">
  598.             <label style="display: inline;">Editor: </label>
  599.             <button id="addEditorButton">Add editor</button>
  600.             <button id="deleteEditorButton">Delete last editor</button>
  601.         </div>
  602.         <div style="display: inline;">
  603.             <label title="The date formatting used by the date picker in certain fields like 'accessdate'. Remember, articles should use consistant formatting of dates.">Datepicker format:</label>
  604.             <select id="format1" style="font-size: 100%;" class="ui-corner-all">
  605.                 <option value="dd MM yy selected">01 January 1900</option>
  606.                 <option value="d MM yy">1 January 1900</option>
  607.                 <option value="MM d, yy">January 1, 1900</option>
  608.                 <option value="MM dd, yy">January 01, 1900</option>
  609.             </select>
  610.         </div>
  611.     </div>
  612.  
  613.     <div id="tips" style="padding-left: 10px; padding-right: 10px; border-bottom-width: 3px; border-color: red;">
  614.         <br style="clear:both;" />
  615.         <p class="validateTips">content.. this text should be overwritten</p>
  616.     </div>
  617.  
  618.     <div class="row">
  619.         <div class="full">
  620.             <label for="title" title="Title of the book, including subtitle. Don't surround with double quotes because template does that automatically. If there are double quotes in title, use single quotes instead.">title</label>
  621.             <input autofocus type="text" id="title" name="title">
  622.         </div>
  623.     </div>
  624.  
  625.     <div id="authorsDivID">
  626.         <div id="author1" class="row">
  627.             <div class="forth">
  628.                 <label id="author1lastlabel" for="last" title="Author's last name. If last/first names are inappropriate, as with many Asian names, use 'author' field instead. See template help.">last</label>
  629.                 <input type="text" id="last" name="last">
  630.             </div>
  631.             <div class="forth">
  632.                 <label id="author1firstlabel" for="first" title="Author's first name. If last/first names are inappropriate, as with many Asian names, use 'author' field instead. See template help.">first</label>
  633.                 <input type="text" id="first" name="first">
  634.             </div>
  635.             <div class="forth">
  636.                 <label id="author1label" for="last" title="Author's full name. Use only when first/last names are inappropriate, for example, with many Asian names. See template help.">author</label>
  637.                 <input type="text" id="author" name="author">
  638.             </div>
  639.             <div class="forth">
  640.                 <label id="author1authorlinklabel" for="authorlink" title="This is the title of the author's Wikipedia article if they have one. Do not wikilink.">authorlink</label>
  641.                 <input type="text" id="authorlink" name="authorlink">
  642.             </div>
  643.         </div>
  644.         <br style="clear:both;" />
  645.     </div>
  646.  
  647.     <div id="editorsDivID">
  648.         <div id="editor1" class="row">
  649.             <div class="forth">
  650.                 <label id="editor1lastlabel" for="editor-last" title="Editor's last name. If last/first names are inappropriate, as with many Asian names, use 'editor' field instead. See template help.">editor-last</label>
  651.                 <input type="text" id="editor-last" name="editor-last">
  652.             </div>
  653.             <div class="forth">
  654.                 <label id="editor1firstlabel" for="editor-first" title="Editor's first name. If last/first names are inappropriate, as with many Asian names, use 'editor' field instead. See template help.">editor-first</label>
  655.                 <input type="text" id="editor-first" name="editor-first">
  656.             </div>
  657.             <div class="forth">
  658.                 <label id="editor1label" for="editor" title="Editor's full name. Use only when first/last names are inappropriate, for example, with many Asian names. See template help.">editor</label>
  659.                 <input type="text" id="editor" name="editor">
  660.             </div>
  661.             <div class="forth">
  662.                 <label id="editor1editorlinklabel" for="editor-link" title="This is the title of the editor's Wikipedia article if they have one. Do not wikilink.">editor-link</label>
  663.                 <input type="text" id="editor-link" name="editor-link">
  664.             </div>
  665.         </div>
  666.         <br style="clear:both;" />
  667.     </div>
  668.  
  669.     <div class="row">
  670.         <div class="third">
  671.             <label for="publisher" title="Publisher's name. Wikilink if desired.">publisher</label>
  672.             <input type="text" id="publisher" name="publisher">
  673.         </div>
  674.         <div class="third">
  675.             <label for="location" title="Geographical place of publication. Generally not wikilinked.">location</label>
  676.             <input type="text" id="location" name="location">
  677.         </div>
  678.         <div class="third">
  679.             <label for="isbn" title="The ISBN number of the book (10 or 13 digit version).">ISBN</label>
  680.             <input type="text" id="isbn" name="isbn">
  681.         </div>
  682.     </div>
  683.     <br style="clear:both;" />
  684.  
  685.     <div class="row">
  686.         <div class="third">
  687.             <label for="date" title="Full date of source being referenced in the SAME format as other publication dates in the citations (e.g., '5 May 2013' or 'May 5, 2013'). If full date isn't known, use 'month' and/or 'year' instead.">date</label>
  688.             <input type="text" id="date" name="date">
  689.         </div>
  690.         <div class="third">
  691.             <label for="month" title="Use 'date', not this, when 'day', 'month', and 'year' are all known.">month</label>
  692.             <input type="text" id="month" name="month">
  693.         </div>
  694.         <div class="sixth">
  695.             <label for="year" title="Use 'date', not this, when 'day', 'month', and 'year' are all known.">year</label>
  696.             <input type="text" id="year" name="year">
  697.         </div>
  698.         <div class="sixth">
  699.             <label for="origyear" title="Original year of publication (useful for reprints).">origyear</label>
  700.             <input type="text" id="origyear" name="origyear">
  701.         </div>
  702.     </div>
  703.     <br style="clear:both;" />
  704.  
  705.     <div id="accessdateDivID">
  706.         <div class="row">
  707.             <div class="twothird">
  708.                 <label for="url" title="Full URL link (including 'http://' part) that supports the reference.">URL</label>
  709.                 <input type="text" id="url" name="url">
  710.             </div>
  711.             <div class="third">
  712.                 <label for="accessdate" title="Full date when URL was accessed; use the same format as other access and archive dates in the citations.">accessdate</label>
  713.                 <input type="text" id="accessdate" name="accessdate">
  714.             </div>
  715.         </div>
  716.         <br style="clear:both;" />
  717.     </div>
  718.  
  719.     <div class="row">
  720.         <div class="third">
  721.             <label for="page" title="The page (note singular) in the source that supports the material being referenced (e.g., 78). Use the 'pages' field if there is more than one page being referenced.">page</label>
  722.             <input type="text" id="page" name="page">
  723.         </div>
  724.         <div class="third">
  725.             <label for="pages" title="The pages (note plural) in the source that support the material being referenced. Use dashes for ranges and commas for other separate pages (e.g., 78–82,101). If only one page is being referenced, use the 'page' field instead. This is NOT for the total number of pages of the source.">pages</label>
  726.             <input type="text" id="pages" name="pages">
  727.         </div>
  728.         <div class="third">
  729.             &nbsp;
  730.         </div>
  731.     </div>
  732.     <br style="clear:both;" />
  733.  
  734.     <div class="row">
  735.         <div class="full">
  736.             <label for="quote" title="Concise quotation from source that directly supports the material. Template automatically surrounds with double quotes.">quote</label>
  737.             <textarea id="quote" name="quote" style="width: 100%; resize: vertical;"></textarea>
  738.         </div>
  739.     </div>
  740.     <br style="clear:both;" />
  741.  
  742.     <div id="extra" class="extra">
  743.  
  744.         <div class="row">
  745.             <div class="third">
  746.                 <label for="edition" title="The edition of the book. Just use, for example, '2nd', '3rd', 'revised', and so on. Do not add the word 'edition' or 'ed.' because the template does that automatically.">edition</label>
  747.                 <input type="text" id="edition" name="edition">
  748.             </div>
  749.             <div class="third">
  750.                 <label for="series" title="Name of book series, if any.">series</label>
  751.                 <input type="text" id="series" name="series">
  752.             </div>
  753.             <div class="third">
  754.                 <label for="volume" title="Volume of book, if any. For example, 'II' or '5th'.">volume</label>
  755.                 <input type="text" id="volume" name="volume">
  756.             </div>
  757.         </div>
  758.         <br style="clear:both;" />
  759.  
  760.         <div id="archivedateDivID">
  761.             <div class="row">
  762.                 <div class="twothird">
  763.                     <label for="archiveurl" title="The URL of an web archive of the source.">archiveurl</label>
  764.                     <input type="text" id="archiveurl" name="archiveurl">
  765.                 </div>
  766.                 <div class="third">
  767.                     <label for="archivedate" title="The date the source was archived.">archivedate</label>
  768.                     <input type="text" id="archivedate" name="archivedate">
  769.                 </div>
  770.             </div>
  771.             <br style="clear:both;" />
  772.         </div>
  773.  
  774.         <div class="row">
  775.             <div class="third">
  776.                 <label for="language" title="Language of the source.">language</label>
  777.                 <input type="text" id="language" name="language">
  778.             </div>
  779.             <div class="twothird">
  780.                 <label for="trans_title" title="Translation of the title.">trans_title</label>
  781.                 <input type="text" id="trans_title" name="trans_title">
  782.             </div>
  783.         </div>
  784.         <br style="clear:both;" />
  785.  
  786.         <div class="row">
  787.             <div class="full">
  788.                 <label for="others" title="You can use phrases like 'Translated by Joe Bloggs' or 'Illustrated by Joe Bloggs'.">others</label>
  789.                 <input type="text" id="others" name="others">
  790.             </div>
  791.         </div>
  792.         <br style="clear:both;" />
  793.  
  794.         <div class="row">
  795.             <div class="third">
  796.                 <label for="name" title="An identifier for the reference tag (e.g., 'bloggs1998' in <ref name=bloggs1998>). If spaces exist in identifier, quotes will be automatically added on insert.">ref name</label><sup><a href="https://en.wikipedia.org/wiki/Help:Footnotes#Footnotes:_using_a_source_more_than_once" target="_blank">?</a></sup>
  797.                 <input type="text" id="name" name="name">
  798.             </div>
  799.             <div class="third">
  800.                 <label for="group" title="An identifier for the reference tag (e.g., 'finches' in <ref group=finches>). If spaces exist in identifier, quotes will be automatically added on insert.">ref group</label><sup><a href="https://en.wikipedia.org/wiki/Help:Footnotes#Footnotes:_groups" target="_blank">?</a></sup>
  801.                 <input type="text" id="group" name="group">
  802.             </div>
  803.         </div>
  804.         <br style="clear:both;" />
  805.  
  806.     </div>
  807.  
  808.     </form>
  809. </div>
  810.  
  811. This is a mock-up of the wikipedia editor:
  812. <form>
  813. <textarea id="editor-textarea" cols="80" rows="20">I need a source. This sentence also needs a source. You should know that this sentence is highly speculative and needs a proper source. This claim is fantastic and should be sourced. Here lies a dubious statement, and here stands a questionable one. This statement would be much better if sourced. This sentence doesn't need a source.{{citation needed}} An idea is here that requires a source.</textarea>
  814. </form>
  815. <button id="insert-ref-button">Insert book reference</button>
  816.  
  817. </body>
  818. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!