Skip to content

Commit

Permalink
Merge pull request #7 from DoggersHusky/SilverStripe4
Browse files Browse the repository at this point in the history 
SilverStripe 4
  • Loading branch information
@nathancox
nathancox authored Feb 4, 2019
2 parents a35163a + c8298f2 commit 43fe33b
Show file tree
Hide file tree
Showing 11 changed files with 141 additions and 82 deletions.
50 changes: 26 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Nathan Cox (<[email protected]>)

Requirements
------------
* SilverStripe 3.1+
* SilverStripe 4.0+

Documentation
-------------
Expand All @@ -30,40 +30,42 @@ Usage Overview
Make a has_one relationship to an EmbedObject then create an EmbedField in getCMSFields:

```php
class Page extends SiteTree {

// has one video
static $has_one = array(
'Video' => 'EmbedObject'
);

function getCMSFields() {
$fields = parent::getCMSFields();

// add the EmbedField for managing Video
$fields->addFieldToTab('Root.Main', $embedField = EmbedField::create('VideoID', 'Sidebar video'));

// Specify that only videos can be embedded here (optional)
// Options are video, rich, link, photo or false (for any)
$embedField->setEmbedType('video');

return $fields;
}

namespace {

use SilverStripe\CMS\Model\SiteTree;
use nathancox\EmbedField\Model\EmbedObject;
use nathancox\EmbedField\Forms\EmbedField;

class Page extends SiteTree
{
private static $db = [];

private static $has_one = [
'MyVideo' => EmbedObject::class
];

public function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldToTab('Root.Main', EmbedField::create('MyVideoID', 'Sidebar video'));

return $fields;
}
}
}
```

Gives us:

![example embedfield](http://static.flyingmonkey.co.nz/github/silverstripe-embedfield/embedfield-1.png)
![example embedfield](https://i.ibb.co/Hxz7VGB/embedfield.jpg)


In the page template the video can now be embedded with `$Video`.
In the page template the video can now be embedded with `$MyVideo`.


Each embed type is rendered with it's own template (eg EmbedObject_video.ss and EmbedObject_photo.ss). The default templates just return the markup generated by SilverStripe's OembedResult::forTemplate(). You can override them in your theme:

themes/mytheme/templates/Includes/EmbedObject_video.ss:
themes/mytheme/templates/nathancox/EmbedField/Model/EmbedObject_video.ss:
```html

<div class='flex-video self-sizing' style='padding-bottom:$AspectRatioHeight;'>
Expand Down
13 changes: 9 additions & 4 deletions composer.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "nathancox/embedfield",
"description": "A form field for adding oembed objects (primarily videos) to pages or dataobjects",
"type": "silverstripe-module",
"type": "silverstripe-vendormodule",
"homepage": "https://github.com/nathancox/silverstripe-embedfield",
"keywords": ["silverstripe", "oembed", "video", "cms", "formfield"],
"license": "BSD-3-Clause",
Expand All @@ -12,11 +12,16 @@
"issues": "https://github.com/nathancox/silverstripe-embedfield/issues"
},
"require": {
"silverstripe/framework": "~3.1"
"silverstripe/framework": "~4.0"
},
"extra": {
"screenshots": [
"http://static.flyingmonkey.co.nz/github/silverstripe-embedfield/embedfield-1.png"
]
"https://i.ibb.co/Hxz7VGB/embedfield.jpg"
],
"installer-name": "embedfield",
"expose": [
"css",
"javascript"
]
}
}
42 changes: 34 additions & 8 deletions css/EmbedField.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
.field.embed .middleColumn {
background: linear-gradient(#EFEFEF, #FFFFFF 10%, #FFFFFF 90%, #EFEFEF) repeat scroll 0 0 #FFFFFF;
border: 1px solid #B3B3B3;
border-radius: 4px;
padding: 0;
width: 480px;
padding:15px;
.field.embed .form__field-holder {
background: #f1f3f6;
border: 1px solid #B3B3B3;
border-radius: 4px;
padding: 0;
width: 480px;
padding:15px;
}

.field.embed img {
border: 1px transparent;
border-radius: 4px;
}

.field.embed em {
Expand Down Expand Up @@ -41,7 +46,28 @@
}

.field.embed button.action {
margin: 8px 0;
margin-top: 10px;
}

.field.embed button.action:not(.btn-outline-primary) {
background-color: #008a00;
border-color: #008a00;
}

.field.embed input.text.error {
border-color: #ff00004d;
background-color: #ff00001a;
}

.field.embed button.action:hover {
background-color: #e9f6e9;
}

.field.embed button.action:not(.btn-outline-primary):hover {
color: #fff;
background-color: #006400;
border-color: #005700;
cursor: pointer;
}

.field.embed .clear {
Expand Down
39 changes: 22 additions & 17 deletions javascript/EmbedField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@
$('.field.embed input.text').entwine({
onmatch: function() {
this.data('original-value', this.val());
this.data('thumbnail-id', this.closest('.middleColumn').find('img').attr('id'));
this.data('message-el-id', this.closest('.middleColumn').find('em').attr('id'));
this.data('thumbnail-id', this.closest('.form__field-holder').find('img').attr('id'));
this.data('message-el-id', this.closest('.form__field-holder').find('em').attr('id'));
if (!this.val() == '') {
this.closest('.form__field-holder').find('a.embed-thumbnail').attr('href',$(this).val());
}
},

onchange: function(){
Expand All @@ -16,6 +19,8 @@
}else {
this.parents('div.field').find('.field.embed button.action').prop('disabled', true).addClass('ui-state-disabled');
}

this.parent().parent().find('button.action').removeClass('btn-outline-primary').removeClass('font-icon-tick').addClass('btn-primary').addClass('font-icon-rocket');
},

onfocusout: function() {
Expand All @@ -37,10 +42,10 @@
clearData: function() {
var $imageEl = $('#'+this.data('thumbnail-id'));
$imageEl.attr({
src: 'framework/images/spacer.gif',
src: '',
title: ''
});
this.closest('.middleColumn').find('.embed-thumbnail').addClass('empty').removeAttr('href');
this.closest('.form__field-holder').find('.embed-thumbnail').addClass('empty').removeAttr('href');
this.val('');
}
});
Expand All @@ -56,33 +61,33 @@
'SecurityID': $('input[name=SecurityID]').val(),
'URL': $field.val()
};

$field.css({
'background-image':"url('cms/images/network-save.gif')",
'background-position':"98% center",
'background-size':"auto",
'background-repeat':"no-repeat"
});

if ( !$field.closest('.form__field-holder').find('button').hasClass('btn-outline-primary') ) {
$field.closest('.form__field-holder').find('input.text').prop('disabled', true);
$field.closest('.form__field-holder').find('button').html('updating...');
}

$.post($field.data('update-url'), params, function (response) {
$field.css('background-image', 'none');
var $messageEl = $('#'+$field.data('message-el-id'));
$messageEl.html(response.message);

if (response.status == 'success') {

var data = response.data;
var $imageEl = $('#'+$field.data('thumbnail-id'));
$field.closest('.middleColumn').find('.embed-thumbnail').removeClass('empty').attr('href', $field.val());

$field.closest('.form__field-holder').find('.embed-thumbnail').removeClass('empty').attr('href', $field.val());
$field.closest('.form__field-holder').find('button').html('Update URL').removeClass('font-icon-rocket').removeClass('btn-primary').addClass('font-icon-tick').addClass('btn-outline-primary');
$field.closest('.form__field-holder').find('input.text').prop('disabled', false).removeClass('error');

$imageEl.attr({
src: data.ThumbnailURL,
title: data.Title
});
} else if (response.status == 'nourl') {
$field.clearData();
} else if (response.status == 'invalidurl') {
} else if (response.status == 'invalidurl' || response.status == 'nourl') {
$field.val($field.data('original-value'));
$field.closest('.form__field-holder').find('input.text').prop('disabled', false).addClass('error');
$field.closest('.form__field-holder').find('button').addClass('font-icon-rocket').addClass('btn-primary').removeClass('font-icon-tick').removeClass('btn-outline-primary').html('Update URL');
} else {
console.log('@TODO error', response);
}
Expand Down
29 changes: 22 additions & 7 deletions code/EmbedField.php → src/Forms/EmbedField.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
<?php

namespace nathancox\EmbedField\Forms;

use SilverStripe\Forms\FormField;
use SilverStripe\View\Requirements;
use SilverStripe\Forms\TextField;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Security\SecurityToken;
use SilverStripe\Core\Convert;
use SilverStripe\ORM\DataObjectInterface;
use nathancox\EmbedField\Model\EmbedObject;

/**
* The form field used for creating EmbedObjects. Basically you enter a URL and it fetches the oEmbed data from it and stores it in an EmbedObject.
*/
Expand Down Expand Up @@ -30,14 +42,14 @@ function setEmbedType($type = false) {
}

public function FieldHolder($properties = array()) {
Requirements::javascript(EMBED_FIELD_BASE . '/javascript/EmbedField.js');
Requirements::css(EMBED_FIELD_BASE . '/css/EmbedField.css');
Requirements::javascript('nathancox/embedfield: javascript/EmbedField.js');
Requirements::css('nathancox/embedfield: css/EmbedField.css');

if (!$this->object || $this->object->ID == 0) {
$this->object = EmbedObject::create();
}

$properties['ThumbnailURL'] = 'framework/images/spacer.gif';
$properties['ThumbnailURL'] = false;
$properties['ThumbnailTitle'] = '';
$properties['ShowThumbnail'] = false;

Expand All @@ -62,26 +74,28 @@ public function Type() {
return 'embed text';
}

public function setValue($value) {

public function setValue($value, $data = null) {
if ($value instanceof EmbedObject) {
$this->object = $value;
parent::setValue($object->ID);

}
$this->object = EmbedObject::get()->byID($value);

parent::setValue($value);
}


public function saveInto(DataObjectInterface $record) {

$val = $this->Value(); // array[sourceurl],[data] (as json)

$name = $this->getName();
$sourceURL = $val['sourceurl'];

$existingID = (int)$record->$name;


$originalObject = EmbedObject::get()->byID($existingID);
if (!strlen($sourceURL)) {
$record->$name = 0;
Expand Down Expand Up @@ -127,7 +141,8 @@ public function saveInto(DataObjectInterface $record) {
/**
* This is called by the javascript
*/
public function update(SS_HTTPRequest $request) {
public function update(HTTPRequest $request) {

if (!SecurityToken::inst()->checkRequest($request)) {
return '';
}
Expand Down
Loading

0 comments on commit 43fe33b

Please sign in to comment.