core/modules/edit/css/edit.css | 457 +++ core/modules/edit/edit.info | 6 + core/modules/edit/edit.module | 403 +++ core/modules/edit/images/attention.png | 6 + core/modules/edit/images/close.png | 78 + core/modules/edit/images/throbber.gif | 73 + core/modules/edit/includes/form.inc | 147 + core/modules/edit/includes/missing-api.inc | 43 + core/modules/edit/includes/pages.inc | 188 + core/modules/edit/js/app.js | 306 ++ core/modules/edit/js/backbone.drupalform.js | 148 + core/modules/edit/js/createjs/editable.js | 40 + .../createjs/editingWidgets/drupalalohawidget.js | 157 + .../editingWidgets/drupalcontenteditablewidget.js | 111 + .../edit/js/createjs/editingWidgets/formwidget.js | 150 + core/modules/edit/js/createjs/storage.js | 4 + core/modules/edit/js/edit.js | 41 + core/modules/edit/js/lib/create.js | 1643 +++++++++ core/modules/edit/js/lib/vie.js | 3682 ++++++++++++++++++++ core/modules/edit/js/models/edit-app-model.js | 12 + core/modules/edit/js/routers/edit-router.js | 50 + core/modules/edit/js/theme.js | 150 + core/modules/edit/js/util.js | 154 + core/modules/edit/js/viejs/SparkEditService.js | 202 ++ core/modules/edit/js/views/fielddecorator-view.js | 318 ++ core/modules/edit/js/views/menu-view.js | 38 + core/modules/edit/js/views/modal-view.js | 108 + core/modules/edit/js/views/overlay-view.js | 80 + core/modules/edit/js/views/toolbar-view.js | 445 +++ .../field/formatter/TextDefaultFormatter.php | 3 + .../Plugin/field/formatter/TextPlainFormatter.php | 3 + .../formatter/TextSummaryOrTrimmedFormatter.php | 3 + .../field/formatter/TextTrimmedFormatter.php | 3 + 33 files changed, 9252 insertions(+) diff --git a/core/modules/edit/css/edit.css b/core/modules/edit/css/edit.css new file mode 100644 index 0000000..9109d62 --- /dev/null +++ b/core/modules/edit/css/edit.css @@ -0,0 +1,457 @@ +/** + * Animations. + */ +.edit-animate-invisible { + opacity: 0 !important; +} + +.edit-animate-fast { +-webkit-transition: all .2s ease; + -moz-transition: all .2s ease; + -ie-transition: all .2s ease; + -o-transition: all .2s ease; + transition: all .2s ease; +} + +.edit-animate-default { + -webkit-transition: all .4s ease; + -moz-transition: all .4s ease; + -ie-transition: all .4s ease; + -o-transition: all .4s ease; + transition: all .4s ease; +} + +.edit-animate-slow { +-webkit-transition: all .6s ease; + -moz-transition: all .6s ease; + -ie-transition: all .6s ease; + -o-transition: all .6s ease; + transition: all .6s ease; +} + +.edit-animate-delay-veryfast { + -webkit-transition-delay: .05s; +} + +.edit-animate-delay-fast { + -webkit-transition-delay: .2s; +} + +.edit-animate-delay-default { + -webkit-transition-delay: .4s; +} + +.edit-animate-delay-slow { + -webkit-transition-delay: .6s; +} + +.edit-animate-disable-width { + -webkit-transition: width 0s; +} + +.edit-animate-only-visibility { + -webkit-transition: opacity .2s ease; + -moz-transition: opacity .2s ease; + -ie-transition: opacity .2s ease; + -o-transition: opacity .2s ease; + transition: opacity .2s ease; + -webkit-transition-delay: 0s; +} + + + + +/** + * Edit's bar — inspired by core's toolbar.module & shortcut.module. + */ +#editbar, +#editbar * { + border: 0; + font-size: 100%; + line-height: inherit; + list-style: none; + margin: 0; + outline: 0; + padding: 0; + text-align: left; /* LTR */ + vertical-align: baseline; +} +#editbar { + position: relative; + background: #666; + color: #ccc; + font: normal small "Lucida Grande", Verdana, sans-serif; + margin: 0 -20px; + padding: 0 20px; + -moz-box-shadow: 0 3px 20px #000; + -webkit-box-shadow: 0 3px 20px #000; + box-shadow: 0 3px 20px #000; + z-index: 500; +} +#editbar ul { + padding: 5px 0 2px 0; + height: 28px; + line-height: 24px; + margin-left:5px; /* LTR */ +} +#editbar ul li, +#editbar ul li a { + float: left; /* LTR */ + padding: 0 5px 0 5px; + margin-right: 5px; /* LTR */ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; +} +#editbar a { + padding: 5px 10px 5px 5px; + line-height: 24px; + color: #fefefe; + font-size: .846em; + text-decoration: none; +} +#editbar a:focus, +#editbar a:hover, +#editbar a.active { + color: #fff; +} +#editbar ul li a:focus, +#editbar ul li a:hover, +#editbar ul li a.active:focus { + background: #555; +} +#editbar ul li a.active:hover, +#editbar ul li a.active { + background: #000; +} + + + + +/** + * Edit mode: overlay + candidate editables + editables being edited. + * + * Note: every class is prefixed with "edit-" to prevent collisions with modules + * or themes. In IPE-specific DOM subtrees, this is not necessary. + */ + +#edit_overlay { + position: fixed; + z-index: 250; + width: 100%; + height: 100%; + background-color: rgba(255,255,255,.5); + top: 0px; /* offset for navbar, modified later */ + left: 0px; +} + +/* Editable. */ +.edit-editable { + z-index: 300; + position: relative; +} +.edit-editable:focus { + outline: none; +} +.edit-field.edit-editable, +.edit-field.edit-type-direct .edit-editable { + box-shadow: 0px 0px 1px 1px #4D9DE9; +} + +/* Highlighted (hovered) editable. */ +.edit-editable.edit-highlighted { + min-width: 200px; /* TODO: we even need them to be at least fairly wide! */ +} +.edit-field.edit-editable.edit-highlighted, +.edit-form.edit-editable.edit-highlighted, +.edit-field.edit-type-direct .edit-editable.edit-highlighted { + box-shadow: 0px 0px 1px 1px #0199FF, 0px 0px 3px 3px rgba(153, 153, 153, .5); +} +.edit-field.edit-editable.edit-highlighted.edit-validation-error, +.edit-form.edit-editable.edit-highlighted.edit-validation-error, +.edit-field.edit-type-direct .edit-editable.edit-highlighted.edit-validation-error { + box-shadow: 0px 0px 1px 1px red, 0px 0px 3px 3px rgba(153, 153, 153, .5); +} +.edit-form.edit-editable .form-item .error { + border: 1px solid #eea0a0; +} + + +/* Editing (focused) editable. */ +.edit-form.edit-editable.edit-editing, +.edit-field.edit-type-direct .edit-editable.edit-editing { + /* In the latest design, there's no special styling when editing as opposed to + just hovering. */ +} + + + + +/** + * Edit mode: modal. + */ +#edit_modal { + z-index: 350; + position: fixed; + top: 40%; + left: 40%; + box-shadow: 3px 3px 5px #333; + background-color: white; + border: 1px solid #0199FF; + font-family: 'Droid sans', 'Lucida Grande', sans-serif; +} + +#edit_modal .main { + font-size: 130%; + margin: 25px; + padding-left: 40px; + background: transparent url('../images/attention.png') no-repeat; +} + +#edit_modal .actions { + border-top: 1px solid #ddd; + padding: 3px inherit; + text-align: right; + background: #f5f5f5; +} + +/* Modal active: prevent user from interacting with toolbar & editables. */ +.edit-form-container.edit-belowoverlay, +.edit-toolbar-container.edit-belowoverlay, +.edit-validation-errors.edit-belowoverlay { + z-index: 210; +} +.edit-editable.edit-belowoverlay { + z-index: 200; +} + + + + +/** + * Edit mode: type=direct. + */ +.edit-validation-errors { + z-index: 300; + position: relative; +} + +.edit-validation-errors .messages.error { + position: absolute; + top: 6px; + left: -5px; + margin: 0; + border: none; + box-shadow: 0px 0px 1px 1px red, 0px 0px 3px 3px rgba(153, 153, 153, .5); + background-color: white; +} + + + + +/** + * Edit mode: type=form. + */ +#edit_backstage { + display: none; +} + +.edit-form { + position: absolute; + z-index: 300; + box-shadow: 0 0 30px 4px #4F4F4F; + max-width: 35em; +} + +.edit-form .placeholder { + min-height: 22px; +} + +/* Default form styling overrides. */ +.edit-form form { padding: 1em; } +.edit-form .form-item { margin: 0; } +.edit-form .form-wrapper { margin: .5em; } +.edit-form .form-actions { display: none; } +.edit-form input { max-width: 100%; } + + + + +/** + * Edit mode: toolbars + */ + +/* Trick: wrap statically positioned elements in relatively positioned element + without changing its location. This allows us to absolutely position the + toolbar. +*/ +.edit-toolbar-container, +.edit-form-container { + position: relative; + padding: 0; + border: 0; + margin: 0; + vertical-align: baseline; + z-index: 310; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.edit-toolbar-heightfaker { + height: auto; + position: absolute; + bottom: 1px; + box-shadow: 0px 0px 1px 1px #0199FF, 0px 0px 3px 3px rgba(153, 153, 153, .5); + background: #FFF; +} + +/* The toolbar; these are not necessarily visible. */ +.edit-toolbar { + position: relative; + height: 100%; + font-family: 'Droid sans', 'Lucida Grande', sans-serif; +} +.edit-toolbar-heightfaker { + clip: rect(-1000px, 1000px, auto, -1000px); /* Remove bottom box-shadow. */ +} +/* Exception: when used for a directly WYSIWYG editable field that is actively + being edited. */ +.edit-type-direct-with-wysiwyg .edit-editing .edit-toolbar-heightfaker { + width: 100%; + clip: auto; +} + + +/* The toolbar contains toolgroups; these are visible. */ +.edit-toolgroup { + float: left; /* LTR */ +} + +/* Info toolgroup. */ +.edit-toolgroup.info { + float: left; /* LTR */ + font-weight: bolder; + padding: 0 5px; + background: #FFF url('../images/throbber.gif') no-repeat -60px 60px; +} +.edit-toolgroup.info.loading { + padding-right: 35px; + background-position: 90% 50%; +} + +/* Operations toolgroup. */ +.edit-toolgroup.ops { + float: right; /* LTR */ + margin-left: 5px; +} + +.edit-toolgroup.wysiwyg-tabs { + float: right; +} +.edit-toolgroup.wysiwyg { + clear: left; + width: 100%; + padding-left: none; +} + + + +/** + * Edit mode: buttons (in both modal and toolbar). + */ +#edit_modal a, +.edit-toolbar a { + float: left; /* LTR */ + display: block; + height: 21px; + min-width: 21px; + padding: 3px 6px 3px 6px; + margin: 4px 5px 1px 0; + border: 1px solid #fff; + border-radius: 3px; + color: white; + text-decoration: none; + font-size: 13px; +} +#edit_modal a { + float: none; + display: inline-block; +} + +#edit_modal a:link, +#edit_modal a:visited, +#edit_modal a:hover, +#edit_modal a:active, +.edit-toolbar a:link, +.edit-toolbar a:visited, +.edit-toolbar a:hover, +.edit-toolbar a:active { + text-decoration: none; +} + +/* Button with icons. */ +#edit_modal a span, +.edit-toolbar a span { + width: 22px; + height: 19px; + display: block; + float: left; +} +.edit-toolbar a span.close { + background: url('../images/close.png') no-repeat 2px 2px; +} + +.edit-toolbar a span.close:hover { + /* TODO: use a different "close" image */ +} + + +.edit-toolbar a.blank-button { + color: black; +} + +#edit_modal a.blue-button, +.edit-toolbar a.blue-button { + color: white; + background-image: -webkit-linear-gradient(top, #6fc2f2 0%, #4e97c0 100%); + background-image: linear-gradient(top, #6fc2f2 0%, #4e97c0 100%); + border-radius: 5px; +} + +#edit_modal a.gray-button, +.edit-toolbar a.gray-button { + color: #666; + background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #ccc 100%); + background-image: linear-gradient(top, #f5f5f5 0%, #ccc 100%); + border-radius: 5px; +} + +#edit_modal a img.gray-button.close img, .gray-button.save img, .blue-button.save img, +.edit-toolbar a img.gray-button.close img, .gray-button.save img, .blue-button.save img { + padding: 0; +} + +.gray-button img, .blue-button img, +.gray-button img, .blue-button img { + padding-right: 5px; +} + +#edit_modal a.blue-button:hover, +.edit-toolbar a.blue-button:hover, +#edit_modal a.blue-button:active, +.edit-toolbar a.blue-button:active { + border: 1px solid #55a5d3; + box-shadow: 0px 2px 1px rgba(0,0,0,0.2); +} + +#edit_modal a.gray-button:hover, +.edit-toolbar a.gray-button:hover, +#edit_modal a.gray-button:active, +.edit-toolbar a.gray-button:active { + border: 1px solid #cdcdcd; + box-shadow: 0px 2px 1px rgba(0,0,0,0.1); +} diff --git a/core/modules/edit/edit.info b/core/modules/edit/edit.info new file mode 100644 index 0000000..630c825 --- /dev/null +++ b/core/modules/edit/edit.info @@ -0,0 +1,6 @@ +name = Edit +description = In-place content editing. +package = User interface +core = 8.x + +dependencies[] = field diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module new file mode 100644 index 0000000..1d0c70c --- /dev/null +++ b/core/modules/edit/edit.module @@ -0,0 +1,403 @@ + array(TRUE), + 'access callback' => TRUE, + 'page callback' => 'edit_field_edit', + 'page arguments' => array(3, 4, 5, 6, 7), + 'file' => 'includes/pages.inc', + 'delivery callback'=> 'ajax_deliver', + 'theme callback' => 'ajax_base_page_theme', + ); + $items['admin/render-without-transformations/field/%/%/%/%/%'] = array( + // Access is controlled after we have inspected the entity, which can't + // easily happen until after the callback. + 'access arguments' => array(TRUE), + 'access callback' => TRUE, + 'page callback' => 'edit_text_field_render_without_transformation_filters', + 'page arguments' => array(3, 4, 5, 6, 7), + 'file' => 'includes/pages.inc', + 'delivery callback'=> 'ajax_deliver', + 'theme callback' => 'ajax_base_page_theme', + ); + + return $items; +} + +/** + * Implements hook_page_alter(). + */ +function edit_page_alter(&$page) { + if (path_is_admin(current_path())) { + return; + } + + $page['page_top']['edit'] = array( + 'view_edit_toggle' => array( + '#prefix' => '